個人2018小結 | 掘金年度徵文

終於把研究生開題的事情弄得差很少了，能夠抽空寫一下2018年的小結了。

今年和去年同樣，也是格外忙。不只實驗室活多，還要兼顧研究生的開題等。跟去年同樣，列一個今年學習成果清單：

過去的一年

技術成果

• 2019.01.17（插播）hexo-theme-melody star數破500。【hexo+hexo-theme】

• 2019.01.13（插播） PicGo 發佈v2.0版本，正式支持插件系統。star數破3200，下載量破26k。【Electron】

• 2018.08.28 PicGo star數破2000，下載量破12k。【Electron】

• 2018.07.19 PicGo-Core 開坑PicGo底層流程系統，將支持插件系統【Node+TypeScript】

• 2018.07.11 PicGo 更新v1.6版本，支持阿里雲OSS，imgur，mini窗口，批量刪除等功能。【Electron】

• 2018.05.23 爲VSCode的amVim-for-VSCode插件提交的支持:呼出Command Palette並實現部分Vim命令的PR被合併。【TypeScript】

• 2018.05.17 PicGo star數破800，下載數破5k。【Electron】

• 2018.05.15 開發推來推趣3期後臺時遇到微信二維碼支付相關功能的開發，總結了一篇《基於Koa2開發微信二維碼掃碼支付相關流程》的經驗文。【Koa】

• 2018.05.09 PicGo 更新v1.5版本，支持騰訊雲COSv五、GitHub圖牀、重命名等新功能。【Electron】

• 2018.03.28 node-github-profile-summary和vue-koa-demo的Docker話。【Docker】

• 2018.03.10~2018.05.31 推來推趣3期後臺（全棧）迭代。【Vue+Koa+Graphql】

• 2018.03.06 hexo-theme-melody 更新v1.5版本，支持iframe、支持slides等特性。【hexo+hexo-theme】

• 2018.01.17~2018.03.28 開坑node-github-profile-summary，能夠生成漂亮的GitHub總結報告。【Vue+Koa+Chart.js+Graphql】

• 2018.01.11~2018.05.08 寫了Electron-vue開發實戰系列教程，用於記錄本身開發PicGo的坑以及幫助新人入門Electron開發。【Electron】

對比去年給本身立的目標：

• 算法、數據結構 【一部分】
• Parcel 【沒有】
• TypeScript 【用上了】
• Puppeteer自動化測試 【沒有】
• PWA 【有新的體驗】
• 給開源庫提PR 【完成】
• github robot 【沒有】
• 若是能夠，學習一下react 【碰了皮毛】

感受完成度不夠高，不及去年同期對2016年的目標的實現。主要是沒有預料到下半年研究生的開題的戰線耗時這麼久。從2018年8月開始我就沒有發過筆記或者技術文章了，真的很是慚愧。

指望、目標

依然要寫下2019年須要學習的東西：

• 算法、數據結構
• Flutter入門
• PWA
• 學習react
• Puppeteer使用

感受把目標縮小點應該完成度會更高。畢竟19年要開始找實習和正式工做+寫研究生畢設了。

小結

這一年來的前端的學習之路，收穫仍是很多的。比起2017年來講，我感受最大的收穫就是閱讀源碼的能力提升了。雖然不是什麼高深的源碼，不過相比以前對閱讀源碼有恐懼心理的本身，仍是好了很多。文章寫得很少，除了上半年的Electron-vue開發實戰系列教程，好像以後也沒啥能拿得出手的文章。不過沒什麼人看是真的。

5月份的時候，那段時間個人Mac上的VSCode的Vim插件變得異常卡，能夠參考這個issue。無奈之下只能把官方的Vim插件替換掉，換成了amVim-for-VSCode，當初剛換上的時候，操做如絲般順滑！不過當時發現它不支持:帶來的一系列操做，好比:w保存，:q退出等。因而我萌生了一個想法，能不能把VSCodeVim的操做移植到amVim上？在閱讀了VSCodeVim的源碼以後，我也模仿了它的實現，把一部分經常使用的命令移植到了amVim上，並最終成功被做者合併。

此次提交PR的過程，我也發了一篇文章做爲記錄。應該說此次經歷事後我對閱讀源碼的恐懼感減輕了很多，這也爲以後的PicGo-Core的開發帶來很大的幫助。

8月份以後很長的一段時間裏，除了在作研究生開題相關的東西，我基本就是在開發PicGo-Core了。若是你有用過PicGo，那麼你應該知道它的1.x版本是不支持插件系統的。並且內置的只有有限的8個圖牀。（若是你不知道PicGo，歡迎使用，對你的文章寫做有很大幫助~）。PicGo裏我收到最多的issue，應該就是可否支持XXX圖牀。若是是一開始寫PicGo的時候，我通常會在下一個版本里更新新的圖牀支持。可是支持到第8個的時候我發現這樣無限地支持下去不是一個辦法。正巧有個用戶提出一個想法：可否將對各類圖牀的支持，作成插件化的管理，相似 Core + Plugins 這樣的模式。

我爲此思考了很久，發現這樣是可行並且很是合理的。因而我開始找相關的資料——我一開始的想法只是在Electron內部實現一個插件系統。爲此我去找了很多例子，好比VSCode、Kap、Atom、Hyper等用Electron寫的工具，想看看他們的插件系統是如何實現的。發現他們的實現相對比較複雜。對我來講我是想要實現一個底層的上傳流程系統。

後來我想到了Hexo也是有插件系統的，因而就去閱讀了Hexo的插件系統如何實現。在看Hexo插件系統實現的同時，我還發現了另一個工具feflow的插件系統實現。不過我後來發現，feflow的插件體系其實底層大部分是「抄」的hexo的源碼的，尤爲一個很經典的例子...

因而我就把feflow的文章當作hexo插件系統實現的解析文章了哈哈。

在充分理解了hexo插件如何實現了以後，我也開始着手我本身的PicGo-Core了。固然我並無徹底照搬hexo的實現，由於我發現那樣的話不利於插件開發者開發插件（主要是語法提示），hexo的插件機制是暴露全局的hexo變量去實現的。

PicGo-Core的流程大概以下：

輸入路徑或者變量等->通過轉換器轉換->上傳器上傳->輸出結果。中間包含着三個生命週期鉤子。這樣的話用戶開發插件能夠只實現其中的某個部分，也能夠實現其中的某幾個部分，來實現PicGo原先不能實現的一些功能：

1. 好比上傳非圖片文件
2. 好比上傳圖片前壓縮、加水印
3. 好比經過已知URL上傳圖片

等等。

我也正式使用了TypeScript做爲PicGo-Core的開發語言，使用起來一開始確實很不習慣，可是後來越用越順手，學習新東西的過程大概都是這樣吧！

在開發PicGo-Core的過程當中，我也作了不少除了上面流程系統以外的工做。好比：

1. 要讓用戶在命令行和Node裏都能使用，我爲此基於commander.js和Inquirer.js給PicGo-Core加上了命令行支持，一樣插件也能支持註冊命令等操做。
2. 爲了方便其餘開發者開發插件，首先我得寫好一個插件模板picgo-template-plugin，並學習了vue-cli2和vue-cli3對於模板生成的實現，寫了一個下載模板、生成模板的命令init，好讓插件開發者可以快速建立插件模板進行插件開發。
3. 爲了讓使用者方便下載使用插件，我寫了一個PluginHandler用於調用npm命令來下載插件。
4. 除了寫代碼，還得寫文檔，沒有文檔怎麼能有其餘開發者爲你開發插件呢？因此還花了很大的精力寫了PicGo-Core的文檔，配圖、示例包羅萬象。

開發完Node版本的PicGo-Core以後，我還要將它和Electron版本的PicGo整合起來，使得Electron版本的PicGo也能擁有插件系統。而且還得經過ipcMain等方式，將主進程的信息通知給渲染進程，從而渲染出插件頁面裏的插件列表：

爲了讓插件開發者可以更好地利用GUI版本的優點，我還爲GUI版本的PicGo插件加了GUI插件特有的guiApi、guiMenu等功能：

這樣插件擁有本身的菜單，能夠執行本身的操做，那麼能作的事就更多了，好比：

1. 結合GitHub剛剛開放的免費私人倉庫，能夠經過插件實現PicGo的相冊以及配置文件同步。
2. 結合TinyPng等工具實現上傳前給圖片瘦身。（不過可能挺影響上傳速度的。）
3. 結合一些Canvas工具，能夠在上傳圖片前給圖片加水印。
4. 經過指定文件夾，將文件夾內部的markdown裏的圖片地址進行圖牀遷移。

等等。。

終於，在2019年1月13號，PicGo迎來了2.0版本的更新。

回顧這些工做，都是我一我的在半年的時間裏經過課餘的時間作出來的，其實仍是很自豪的。更關鍵的是，經過開放了插件系統，可讓更多的人蔘與到PicGo軟件的完善中來，經過插件能夠實現不少本體不提供或者不足的功能，也是讓PicGo更增強大的一個條件。我也但願它往後也能造成本身的一個小生態。

實際上，PicGo-Core以及PicGo2.0發佈以後，就已經有第三方開發者開發插件了，速度之快讓我始料未及。爲此我也迅速加上了Awesome-PicGo的倉庫，這樣能讓更多的開發者的做品讓用戶看到：

你已經能夠在VSCode裏搜索PicGo，就能發現VSCode版的PicGo擴展了，實現了三種在Markdown裏快速上傳圖片的方式：

• 經過截圖上傳

• 經過文件瀏覽器上傳

• 經過輸入文件路徑上傳

2019年，我會更新幾篇文章，主要講講如何實現一個插件系統，如何將Node端實現的插件系統整合到Electron端，如何實現一個模板下載、生成功能，如何實現良好的命令行交互等等。平時都是給別人的系統寫插件，不如本身實現一個插件系統吧，哈哈。

2019年也是我找實習、找正式工做的一年，但願今年一切都順利吧！

也但願這篇文章能讓更多人看到...

掘金年度徵文 | 2018 與個人技術之路 徵文活動正在進行中......