如何快速將你的應用封裝成 js-sdk?

{"type":"doc","content":[{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"前言"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"本文將介紹"},{"type":"text","marks":[{"type":"strong"}],"text":"前端"},{"type":"text","text":"如何封裝一款 "},{"type":"codeinline","content":[{"type":"text","text":"js-sdk"}]},{"type":"text","text":" 以及如何快速將你的應用變成 "},{"type":"codeinline","content":[{"type":"text","text":"js-sdk"}]},{"type":"text","text":"，我們將總結一些封裝 "},{"type":"codeinline","content":[{"type":"text","text":"js-sdk"}]},{"type":"text","text":" 的原則和案例，來幫大家更快的上手 SDK 開發。其中筆者還會以 "},{"type":"link","attrs":{"href":"https:\/\/github.com\/MrXujiang\/h5-Dooring","title":"","type":null},"content":[{"type":"text","text":"H5-Dooring"}]},{"type":"text","text":" 爲例子，介紹如何將 "},{"type":"text","marks":[{"type":"strong"}],"text":"H5 頁面編輯器"},{"type":"text","text":"封裝成一個 "},{"type":"codeinline","content":[{"type":"text","text":"js-sdk"}]},{"type":"text","text":" 供他人使用。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/p6-juejin.byteimg.com\/tos-cn-i-k3u1fbpfcp\/aafc7e1098b5470da695abe8548961ca~tplv-k3u1fbpfcp-watermark.image","alt":null,"title":null,"style":null,"href":null,"fromPaste":true,"pastePass":false}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"正文"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"在開始文章之前，筆者先來介紹一下什麼是 SDK。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"SDK，即軟件開發工具包，一般是一些軟件工程師爲特定的軟件包、軟件框架、硬件平臺、操作系統等建立應用軟件時的開發工具的集合。"}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"對於 "},{"type":"codeinline","content":[{"type":"text","text":"js-sdk"}]},{"type":"text","text":" 而言，我們能舉出很多例子，如下:"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"bulletedlist","content":[{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"UI 組件庫"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"性能監控工具，如阿里 arms"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"統計分析工具"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"阿里雲智能驗證 SDK"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"極驗驗證 SDK"}]}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"SDK 的目的是提高我們開發項目的效能，安全性和便捷性等問題，所以我們在設計 "},{"type":"codeinline","content":[{"type":"text","text":"SDK"}]},{"type":"text","text":" 時一定要遵循一些原則，如下："}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/p6-juejin.byteimg.com\/tos-cn-i-k3u1fbpfcp\/9fddd4a1c2214155b6478477ae60c3e4~tplv-k3u1fbpfcp-watermark.image","alt":null,"title":null,"style":null,"href":null,"fromPaste":true,"pastePass":false}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"bulletedlist","content":[{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong"}],"text":"最小可用性原則"},{"type":"text","text":"：也就是沒有必要的功能\/代碼儘量不額外添加，使代碼達到最簡"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong"}],"text":"最少依賴原則"},{"type":"text","text":"：也就是沒有必要的依賴堅決不添加，以達到最低限度的外部依賴"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong"}],"text":"易擴展"},{"type":"text","text":"：插件化，最大限度支持擴展和自定義"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong"}],"text":"穩定性"},{"type":"text","text":"：絕不能導致宿主應用崩潰，向後兼容，可測試"}]}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"在熟悉以上的背景和原則之後，我們來看看如何實現一個 SDK 的案例。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"將 H5-Dooring 封裝成一個 js-sdk"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"筆者在這拿 "},{"type":"text","marks":[{"type":"strong"}],"text":"開源頁面製作工具"},{"type":"text","text":" "},{"type":"link","attrs":{"href":"https:\/\/github.com\/MrXujiang\/h5-Dooring","title":"","type":null},"content":[{"type":"text","text":"H5-Dooring"}]},{"type":"text","text":" 來作爲案例（當然將其封裝成 "},{"type":"codeinline","content":[{"type":"text","text":"SDK"}]},{"type":"text","text":" 也是我們迭代中的一部分，甚至後期會做成 NPM 包）, 介紹如何封裝 js-sdk，我們先看一張抽象圖："}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/p9-juejin.byteimg.com\/tos-cn-i-k3u1fbpfcp\/0c2f56b4959f40d19f089f6eced45a8d~tplv-k3u1fbpfcp-watermark.image","alt":null,"title":null,"style":null,"href":null,"fromPaste":true,"pastePass":false}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"我們的 SDK 就好像一個完整系統的一個零件，可以和系統中的其他模塊通信，互相交換數據。總體而言 SDK 是爲宿主系統服務的，在 dooring-sdk 中，我們一方面要提供對外的接口支持，另一方面需要支持宿主能控制 "},{"type":"text","marks":[{"type":"strong"}],"text":"H5 編輯器"},{"type":"text","text":"的界面，所以綜合分析下來我們有如下的初步規劃圖："}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/p3-juejin.byteimg.com\/tos-cn-i-k3u1fbpfcp\/065cc933f2b04dbea05dc28107e81209~tplv-k3u1fbpfcp-watermark.image","alt":null,"title":null,"style":null,"href":null,"fromPaste":true,"pastePass":false}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}}]}