1小時編寫一個支持七牛上傳的 markdown 客戶端1（技術實現篇）

摘要: 一個小時如何編寫一個支持七牛上傳的 markdown 編輯器的客戶端。如何能從零快速學習 nodejs，並付諸實踐。

<!--more-->

介紹

說是一個小時，前先後後加上代碼重構，優化代碼，也用了一兩天得時間，但在寫初版代碼的時候，的確用了很短的時候。

https://github.com/zhaopengme/ndpediter

技術點

在作這個的時候，出發點是由於 hexo 編輯的時候，我須要使用七牛的圖片外鏈，可是沒有一個好用的支持七牛圖片外鏈的工具。就有了本身動手作一個念頭，在技術選擇的時候，我最熟悉的是後臺 java，前端 javascript 的搭配，由於要寫一個客戶端，首先想到的時候用純 java 來實現，以前我也用 java 寫過一個支持 markdown 的筆記軟件 jnote ,或者作一個 web 網站，再加一個瀏覽器的殼，在幾年以前，我寫過這樣的一個 demo https://github.com/zhaopengme/jbrower-demo，就是用 Mozilla 內核的瀏覽器框架，嵌入 web 網站的方式。可目前已經有了 node-webkit 這樣的技術，就不須要的我以前的想法。用了node-webkit，搭配最好的就是 nodejs 了，我就放棄了用 java 來實現的方式，雖然我不會 nodejs，但這也給了我一個學習的 nodejs 的機會了。那就開始上手了。

在內嵌 web 系統和純 nodejs 的選擇

在開始設計的時候，依照我原來的想法，是採用內嵌一個 web 系統，經過 node-webkit 來打開內嵌的 web 系統來實現的，全部我開始學習 express 的文檔。看了 http://www.expressjs.com.cn/ 文檔後，我嘗試着使用純 nodejs 的方式來實現個人須要，讀寫文件，圖片保存，圖片上傳，發現也是能夠的，其實開頭想一想也是能夠的，只是本身一個慣性思惟致使的。

技術乾貨列表

1. nodejs

2. node-webkit

3. qiniu-nodejs-sdk

4. yeoman

5. generator-node-webkit

6. layer

7. editormd

1. nodejs

主要用來實現文件的讀寫，圖片的上傳。

2. node-webkit

基於node.js和chromium的應用程序實時運行環境，可運行經過HTML(5)、CSS(3)、Javascript來編寫的本地應用程序。從網上扒的介紹，爲了佔位。

3. qiniu-nodejs-sdk

https://github.com/qiniu/nodejs-sdk.v6

七牛的 nodejs 的 api。

4. yeoman

http://yeoman.io/

Yeoman 是 Google 的團隊和外部貢獻者團隊合做開發的，他的目標是經過Grunt（一個用於開發任務自動化的命令行工具）和Bower（一個HTML、CSS、Javascript和圖片等前端資源的包管理器）的包裝爲開發者建立一個易用的工做流。

Yeoman 的目的不只是要爲新項目創建工做流，同時仍是爲了解決前端開發所面臨的諸多嚴重問題，例如零散的依賴關係。

也是從網上扒的介紹，也是爲了佔位。Yeoman 能夠說是對已經成爲體系的流程工具的封裝，更簡單說是"一鍵開發，一鍵部署"等等。是 generator-node-webkit 使用的前提。

5. generator-node-webkit

https://github.com/Dica-Developer/generator-node-webkit

generator-node-webkit 是基於 Yeoman 的工具，能夠"一鍵"建立 node-webkit 的開發環境，"一鍵"打包環境。

6. layer

http://layer.layui.com/

一個 jquery 的彈出框插件，我以爲它好用，就單獨拉出來了，好東西，值得推薦。好比我得圖片上傳 配置 關於 保存提醒等都是使用它的。

7. editormd

https://github.com/pandao/editor.md

編輯器實現的核心，實現編輯器最爲主要的組成部分，在各類 markdown 實現的各類版本中，最優秀的編輯器之一，10分推薦。

在開始實現以前，最好先看一下以上的幾種技術的說明，方便咱們理解。

技術實現篇

環境準備

nodejs 環境

做爲 hexo 的使用者，nodejs 確定會有的，即便沒有，那本身安裝吧，這個很容易。https://nodejs.org/。我裝得 mac 版，不會告訴你用 mac 裝不少東西都是用 brew 能夠一鍵安裝的。

yeoman 安裝

npm install -g yo 這是官方的安裝，有可能安裝成功了，以後 node-webkit 安裝會出現問題，最好用這個 npm i -g yo generator-karma。

generator-node-webkit 安裝

npm install generator-node-webkit -g 用 npm 都是一行命令搞定，很容易吧！用 mac 的童鞋，有沒有裝 brew 呢？裝個 brew 吧！不管是裝13仍是爲了本身開發方便。

生成開發環境

以上 yeoman 和 generator-node-webkit 咱們採用的都是安裝全局的辦法。

1. 自動建立目錄結構

yo node-webkit 就能生成好咱們須要的環境目錄了,好吧！這裏錄個 gif 給你們看看。

注意

1. mac 如今基本都是64位的了，不要選擇32位的。

2. 這個要下載 對應平臺的資源，比較慢，我就中止錄了。

當前建立完成後，就會有下面這樣的界面了。

2. 下載依賴

npm install & bower install 按照提醒，就能夠把相關的依賴所有安裝了。若是提醒沒有 bower，那就 npm install bower -g，bower 也是個經常使用工具，也做爲全局安裝吧。

3. 下載項目依賴

前幾個步驟，能夠叫作工程依賴，就是每個這樣的工程，都須要這樣的步驟的，這個步驟是說，咱們項目須要的依賴。好比 qiniu-nodejs-sdk 就是咱們項目須要的，能夠經過 npm install qiniu來安裝，若是咱們須要 bootstrap，那麼就能夠用 bower install bootstrap或者npm install bootstrap 來安裝。我是手動安裝我須要的 js 插件之類的。

npm install qiniu --save 下載七牛的 sdk。

npm install path-extra --save 一個獲取系統目錄，臨時目錄的。

npm install fs-utils --save 一個文件工具，能夠很方便的同步、異步讀取文件，還能夠讀寫 json。

咱們帶上--save，這樣就說明是咱們項目中使用的，在package.json就添加了項目的依賴。

咱們的項目結構就是這樣的了。

原本是打算把代碼說明也放到本篇的，寫到這裏，發現內容會很長，那就放到下一篇文章吧！下一篇文章包含代碼講解和代碼優化，以及如何進行模塊化分割。

github 上面有代碼，結合本篇步驟，再加上源碼，也是能夠看懂的，源碼真得很簡單。

https://github.com/zhaopengme/ndpediter

這個文件是我初版寫的未通過優化的 demo 版本，下一篇會講解如何將這個文件進行模塊化分割。
https://github.com/zhaopengme/ndpediter/blob/master/demo.js