国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

如何從0開發一個Atom組件

lauren_liuling / 2332人閱讀

摘要：將剪切板中的數據轉換為然后暫存到本地，通過本地文件的方式來進行上傳七牛。以上，就是開發一個插件的完整流程咯。

最近用Atom寫博客比較多，然后發現一個很嚴重的問題。。
沒有一個我想要的上傳圖片的方式，比如某乎上邊就可以直接copy/paste文件，然后進行上傳。
然而在Atom上沒有找到類似的插件，最接近的一個，也還是需要手動選擇文件，然后進行上傳。
這個操作流程太繁瑣，索性自己寫一個插件用好了。

成品插件下載地址：https://atom.io/packages/atom-image-uploader

規劃

首先，我們確定了需求，要通過可以直接copy文件，然后在Atom中paste即可完成上傳的操作。
確定了以后，我們就要開始搬磚了。

插件開發

因為Atom是一個Electron應用：https://electronjs.org

是使用JavaScript來開發的桌面應用，所以對于一個前端來說，簡直是太美好了。
我們先去翻看Atom的官方文檔，查看關于創建插件相關的操作：
首先我們在Atom中打開命令面板，然后輸入Generate Package

按下回車后，將會彈出一個對話框，在框中輸入要建立的包名即可完成一個Package的創建。

Atom會生成一套默認文件，并打開一個新的窗口。

項目結構

生成的插件目錄如下：

.
├── keymaps
│?? └── first-package.json
├── lib
│?? ├── first-package-view.js
│?? └── first-package.js
├── menus
│?? └── first-package.json
├── package.json
├── spec
│?? ├── first-package-spec.js
│?? └── first-package-view-spec.js
└── styles
    └── first-package.less
keymaps

這里可以配置要監聽的快捷鍵，我們可以設置一些自定義快捷鍵來觸發一些我們插件的行為。

{
  "atom-workspace": {
    "ctrl-alt-o": "first-package:toggle"
  }
}

我們可以添加各種自定義的快捷鍵在這里。
Value的定義為：包名:觸發的事件名
需要注意的是：
這里配置的快捷鍵還有一個作用域的概念。也就是JSON外邊的那個key。
atom-workspace表示在Atom中生效
atom-text-editor表示只在文本編輯器范圍內生效。

Atom官方文檔

lib

這里就是存放插件主要代碼的地方了。
默認會生成兩個文件：

package.js

package.view.js

默認插件生成的主入口文件指向這里。

入口文件的表現方式為一個JSON對象，可以實現如下幾個函數：

activate: 當Package被激活時會執行該方法，函數的簽名表示會接受一個state參數，該參數是通過serialize方法傳遞過來的（如果有實現它的話）

deactivate: 當Package失效時會出發的方法，這兩個方法可以理解為React中的componentWillMount和componentWillUnmount

serialize: 也就是上邊說到的那個方法，可以返回一個JSON對象供下次激活后使用

自定義快捷鍵對應的事件名: 每次Package被觸發對應快捷鍵時都會執行的方法

menus

這里存放的是在應用菜單和編輯區域菜單欄的配置文件

{
  "context-menu": {
    "atom-text-editor": [
      {
        "label": "Toggle first-package",
        "command": "first-package:toggle"
      }
    ]
  },
  "menu": [
    {
      "label": "Packages",
      "submenu": [
        {
          "label": "first-package",
          "submenu": [
            {
              "label": "Toggle",
              "command": "first-package:toggle"
            }
          ]
        }
      ]
    }
  ]
}

context-menu對應的元素會在對應的區域內右鍵觸發時顯示。
menu則是出現在Atom主菜單欄上：

同樣的，context-menu會區分兩個環境，text-editor和workspace。

spec

這里存放的是一些測試用例，創建Package會生成一些默認的斷言。
寫測試確實是一個好習慣。

styles

如果Package有很多View要展示的話，可以在這里編寫，默認使用的是Less語法。
由于我們只做一個C/V的操作，不會涉及到界面，所以styles直接就刪掉了。

開始搬磚

大致結構已經了解了，我們就可以開始搬磚了。
因為是一個Electron應用，所以我們直接在Atom中按下alt + command + i，呼出我們熟悉的控制臺界面。

Atom是不會把Electron的各種文檔重新寫一遍的，所以我們現在控制臺里邊試一下我們的猜測是否正確。
一些想要的東西是否存在。

經過驗證確定了，Electron的clipboard對象可以直接在Atom中使用，這就很開心了。

require("electron").clipboard.readImage().toPng()

這樣我們就拿到剪切板中的圖片數據了，一個二進制的數組對象。
我們在觸發Paste操作時，從clipboard中獲取，如果剪切板中是圖片的話，我們就將它上傳并顯示到編輯器中。
所以，接下來我們要做的就是：

進行上傳圖片的操作

將上傳后的圖片顯示到編輯器中

上傳圖片

上傳圖片我們選擇的是七牛，我們選擇七牛來作為圖床使用，因為他家提供了10GB的免費存儲，灰常適合自己這樣的筆記型博客。
但是用他家SDK時發現一個問題。。我將二進制數據轉換為ReadStream后上傳的資源損壞了-.-目前還沒有找到原因。
所以我們做了曲線救國的方式。
將剪切板中的數據轉換為Buffer然后暫存到本地，通過本地文件的方式來進行上傳七牛。
在操作完成后我們再將臨時文件移除。

try {
  let buffer = clipboard.readImage().toPng()
  let tempFilePath = "XXX"
  fs.writeFileSync(tempFilePath, Buffer.from(buffer))
} catch (e) {
  // catch error
} finally {
  fs.unlink(tempFilePath) // 因為我們并不依賴于刪除成功的回調，所以直接空調用異步方法即可
}
將上傳后的資源顯示到編輯器中

因為考慮到上傳可能會受到網絡影響，從而上傳時間不可預估。
所以我們會先在文件中顯示一部分占位文字。
通過全局的atom對象可以拿到當前活躍的窗口：

let editor = atom.workspace.getActiveTextEditor()

為了避免同時上傳多張圖片時出現問題，我們將臨時文件名作為填充的一部分。

editor.insertText(`![](${placeHolderText})`, editor)

然后在上傳成功后，我們將對應的填充字符替換為上傳后的URL就可以了。

editor.scan(new RegExp(placeHolderText), tools => tools.replace(url))

scan方法接收一個正則對象和回調函數。
我們將前邊用到的占位文本作為正則對象，然后在回調將其替換為上傳后的url。
至此，我們的代碼已經編寫完了，剩下的就是一些交互上的優化。

完成后的效果圖：

以及，最后：我們要進行Package的上傳。

上傳開發完的Package

首先我們需要保證package.json中存在如下幾個參數：

name

description

repository

我們可以先使用如下命令來檢查包名是否沖突。

apm show 你的包名

如果沒有沖突，我們就可以直接執行以下命令進行上傳了。

apm publish 你的包名

后續的代碼修改，只需在該包的目錄下執行：

apm publish

一些可選的參數：

major，增加版本號的第一位1.0.0 -> 2.0.0

minor，增加版本號的第二位0.1.0 -> 0.2.0

patch，增加版本號的第三位0.0.1 -> 0.0.2

通過apm help可以獲取到更多的幫助信息。

以上，就是開發一個Atom插件的完整流程咯。

參考資料

hacking-atom
electron-doc

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/94162.html

相關文章

  • [譯] Focal：類型安全、表達力強、可組合的狀態管理方案

    摘要：致力于為應用提供一個類型安全表達力強可組合的狀態管理方案。是一組的命名空間。是內置組件的鏡像，但允許組件的額外接受類型的數據。這次內容更新，是由組件處理的。這些小的組件不必知道所有的應用狀態數據。這是因為大部分對的研究來自于。 Focal Focal 致力于為 React 應用提供一個類型安全、表達力強、可組合的狀態管理方案。 用一個不可變的 （immutable） 、響應式的 （o...

    suemi 評論0 收藏0

  • Vue.js資源分享

    摘要：中文官網英文官網組織發出一個問題之后，不要暫時的離開電腦，如果沒有把握先不要提問。珍惜每一次提問，感恩每一次反饋，每個人工作還是業余之外抽出的時間有限，充分準備好應有的資源之后再發問，有利于問題能夠高效質量地得到解決。 Vue.js資源分享 更多資源請Star：https://github.com/maidishike... 文章轉自：https://github.com/maid...

    vpants 評論0 收藏0

  • 前端每周清單第 10 期：Firefox53、React VR發布、Microsoft Edge現代

    摘要：新聞熱點國內國外，前端最新動態發布近日，正式發布新版本中提供了一系列的特性與問題修復。而近日正式發布，其能夠幫助開發者快速構建應用。 前端每周清單第 10 期：Firefox53、React VR發布、JS測試技術概述、Microsoft Edge現代DOM樹構建及性能之道 為InfoQ中文站特供稿件，首發地址為這里；如需轉載，請與InfoQ中文站聯系。從屬于筆者的 Web 前端入門...

    MingjunYang 評論0 收藏0

  • 2014 杭JS大會 會議盛況與技術熱點現場報道（直播）

    摘要：中國開發者的年度盛會中國開發者大會，于年月日在杭州舉辦了本年度的杭會議我們的和將為在現場為您帶來現場的報道，一覽大牛風采，直擊技術熱點。簽到中第日的會議即將開幕以下是與參會者和與博文視點的作者們合影 中國JS開發者的年度盛會JS中國開發者大會，于2014年6月21日在杭州舉辦了本年度的杭JS會議！ 我們SegmentFault的 @integ 和 @shamiao 將為在現場為您帶來...

    caige 評論0 收藏0

  • 前端每周清單第 41 期 : Node 與 Rust、OpenCV 的火花，網絡安全二三事

    摘要：的網站仍然使用有漏洞庫上周發布了開源社區安全現狀報告，發現隨著開源社區的日漸活躍，開源代碼中包含的安全漏洞以及影響的范圍也在不斷擴大。與應用安全是流行的服務端框架，本文即是介紹如何使用以及其他的框架來增強應用的安全性。 showImg(https://segmentfault.com/img/remote/1460000012181337?w=1240&h=826); 前端每周清單專注...

    syoya 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<