建站
咨詢
售后
建站咨詢
新聞中心
前言
創(chuàng)新互聯(lián)主要從事做網(wǎng)站、網(wǎng)站設(shè)計(jì)、網(wǎng)頁(yè)設(shè)計(jì)、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務(wù)。立足成都服務(wù)靈丘,10年網(wǎng)站建設(shè)經(jīng)驗(yàn),價(jià)格優(yōu)惠、服務(wù)專業(yè),歡迎來(lái)電咨詢建站服務(wù):18982081108
本文將介紹前端如何封裝一款 js-sdk 以及如何快速將你的應(yīng)用變成 js-sdk , 我們將總結(jié)一些封裝 js-sdk 的原則和案例, 來(lái)幫大家更快的上手 sdk 開(kāi)發(fā). 其中筆者還會(huì)以H5-Dooring 為例子, 介紹如何將 H5 頁(yè)面編輯器封裝成一個(gè) js-sdk 供他人使用.
正文
在開(kāi)始文章之前, 筆者先來(lái)介紹一下什么是 sdk .
sdk 即軟件開(kāi)發(fā)工具包, 一般是一些軟件工程師為特定的軟件包、軟件框架、硬件平臺(tái)、操作系統(tǒng)等建立應(yīng)用軟件時(shí)的開(kāi)發(fā)工具的集合。
對(duì)于 js-sdk 而言, 我們能舉出很多例子, 如下:
- UI組件庫(kù)
- 性能監(jiān)控工具, 如阿里 arms
- 統(tǒng)計(jì)分析工具
- 阿里云智能驗(yàn)證sdk
- 極驗(yàn)驗(yàn)證sdk
sdk 的目的是提高我們開(kāi)發(fā)項(xiàng)目的效能, 安全性和便捷性等問(wèn)題, 所以我們?cè)谠O(shè)計(jì) sdk 時(shí)一定要遵循一些原則, 如下:
- 最小可用性原則:也就是沒(méi)有必要的功能/代碼盡量不額外添加, 使代碼達(dá)到最簡(jiǎn)
- 最少依賴原則: 也就是沒(méi)有必要的依賴堅(jiān)決不添加, 以達(dá)到最低限度的外部依賴
- 易擴(kuò)展: 插件化，最大限度支持?jǐn)U展和自定義
- 穩(wěn)定性:絕不能導(dǎo)致宿主應(yīng)用崩潰，向后兼容, 可測(cè)試
在熟悉以上的背景和原則之后, 我們來(lái)看看如何實(shí)現(xiàn)一個(gè) sdk 的案例.
將 H5-Dooring 封裝成一個(gè) js-sdk
筆者在這拿 開(kāi)源頁(yè)面制作工具 H5-Dooring來(lái)作為案例(當(dāng)然將其封裝成 sdk 也是我們迭代中的一部分, 甚至后期會(huì)做成npm包), 介紹如何封裝js-sdk, 我們先看一張抽象圖:
我們的 sdk 就好像一個(gè)完整系統(tǒng)的一個(gè)零件, 可以和系統(tǒng)中的其他模塊通信, 互相交換數(shù)據(jù). 總體而言 sdk 是為宿主系統(tǒng)服務(wù)的, 在 dooring-sdk 中 我們一方面要提供對(duì)外的接口支持, 另一方面需要支持宿主能控制 H5 編輯器的界面, 所以綜合分析下來(lái)我們有如下的初步規(guī)劃圖:
首先我們 sdk 采用 js 動(dòng)態(tài)加載 iframe 的模式來(lái)實(shí)現(xiàn), 并通過(guò) iframe 通信來(lái)實(shí)現(xiàn)props 傳遞, 此時(shí)可以有兩種比較靠譜的通信方案:
- 使用 postmessage 實(shí)現(xiàn)跨域跨系統(tǒng)通信
- 使用 url 參數(shù)通信
由于 postmessage 對(duì)宿主系統(tǒng)要求比較高, 需要宿主手動(dòng)配置 origin 白名單, 對(duì)可插拔式體驗(yàn)不夠友好, 所以筆者這里采用了比較常用的 url 通行方式, 這里需要對(duì)參數(shù)做解析, 最后達(dá)到一個(gè)比較簡(jiǎn)單的接入方式, 如下:
- var dooringOpts = {
- container: '', // 掛載到哪個(gè)dom節(jié)點(diǎn)上
- iframeStyle: { // iframe自定義樣式
- width: '',
- height: '',
- border: ''
- },
- controls: {
- gallery: false, // 是否啟動(dòng)圖片庫(kù)
- template: false, // 是否啟用模版庫(kù)
- saveTemplate: true, // 參數(shù)可以是true/false,表示是否啟動(dòng)下載代碼, 也可以是函數(shù), 用來(lái)自定義下載代碼邏輯
- save: true, // 參數(shù)可以是true/false,表示是否啟動(dòng)下載代碼, 也可以是函數(shù), 用來(lái)自定義下載代碼邏輯
- downCode: true, // 參數(shù)可以是true/false,表示是否啟動(dòng)下載代碼, 也可以是函數(shù), 用來(lái)自定義下載代碼邏輯
- isPhoneTest: false,
- helpPage: true, // false/true表示隱藏/顯示幫助頁(yè)面
- uploadApi: '', // 自定義上傳api
- formApi: '', // 自定義表單提交api
- screenshotsApi: '' // 自定義截圖提交api
- }
用戶只需要在全局定義好配置的 props 和 callback , 即可自由定制 H5-Dooring. 接下來(lái)我們只需要再引入 dooring-sdk即可(注意先定義全局變量, 再引入sdk):
以上只是確定了 js-sdk 的方案和最終調(diào)用效果, 接下來(lái)我們來(lái)看看如何去實(shí)現(xiàn)它. 也就是 dooring-sdk 內(nèi)部到底做了那些工作. 我們先看一張實(shí)現(xiàn)機(jī)制圖:
由上圖分析可知我們需要提前把用戶定義的全局配置解析成 url 參數(shù), 然后將動(dòng)態(tài)創(chuàng)建的 iframe 的 src 屬性設(shè)置為 dooring url + parmas的結(jié)構(gòu), 具體實(shí)現(xiàn)如下:
- (function(){
- let iframe = document.createElement('iframe');
- let tid = Date.now();
- let sdk_domain_path = 'http://xxxx/xxxx';
- iframe.src = sdk_domain_path + '/h5_plus/editor?tid=' + tid + '&' + getDooringApiStr(dooringOpts) + '&isOpen=1';
- iframe.style.border = 'none';
- iframe.style.width = '100vw';
- iframe.style.height = '100vh';
- if(dooringOpts && dooringOpts.iframeStyle) {
- iframe.style.border = dooringOpts.iframeStyle.border || 'none';
- iframe.style.width = dooringOpts.iframeStyle.width || '100vw';
- iframe.style.height = dooringOpts.iframeStyle.height || '100vh';
- }
- document.querySelector(dooringOpts.container || 'body').appendChild(iframe);
- function getDooringApiStr(opt) {
- let controls = Object.assign({
- gallery: false,
- template: false,
- saveTemplate: true, // 參數(shù)可以是true/false,表示是否啟動(dòng)下載代碼, 也可以是函數(shù), 用來(lái)自定義下載代碼邏輯
- save: true, // 參數(shù)可以是true/false,表示是否啟動(dòng)下載代碼, 也可以是函數(shù), 用來(lái)自定義下載代碼邏輯
- downCode: true, // 參數(shù)可以是true/false,表示是否啟動(dòng)下載代碼, 也可以是函數(shù), 用來(lái)自定義下載代碼邏輯
- isPhoneTest: false,
- helpPage: true, // false/true表示隱藏/顯示幫助頁(yè)面
- uploadApi: '',
- formApi: '',
- screenshotsApi: ''
- }, opt.controls || {})
- let params = '';
- for(let key in controls) {
- params += key + '=' + encodeURI(controls[key]) + '&'
- }
- return params.slice(0, params.length -1)
- }
- })()
以上只是個(gè)簡(jiǎn)單的實(shí)現(xiàn)實(shí)現(xiàn)思路, 是不是有點(diǎn)傳統(tǒng)的寫jquery插件的感覺(jué)? 同時(shí)我們還需要配合 h5-dooring 內(nèi)部去支持解析 parmas 等操作, 這里感興趣的可以自行研究. 當(dāng)然 sdk 的實(shí)現(xiàn)方式還有很多, 期待大家的探索.
最后
以上方案筆者已經(jīng)集成到 H5-Dooring 中，大家可以以 sdk 的方式體驗(yàn)一下。github 地址：所見(jiàn)即所得的H5頁(yè)面編輯器H5-Dooring
本文名稱：如何快速將你的應(yīng)用封裝成JS-SDK?
文章來(lái)源：http://m.5511xx.com/article/ccdjoej.html
