序文
この記事では、フロントエンドをカプセル化するjs-sdk 方法と、アプリケーションをすばやくアプリケーションに変換する 方法を紹介します js-sdk 。カプセル化のjs-sdk 原則とケースを要約して、 sdk 開発をより早く開始できるようにします 。著者は、例としてH5-Dooringを取り上げてその方法を説明します。js-sdk 他の人が使用できるように、H5ページエディタを1つにパッケージ化 します。
テキスト
記事を始める前に、まず何を紹介します sdk 。
SDKはソフトウェア開発キットであり、通常、ソフトウェアエンジニアが特定のソフトウェアパッケージ、ソフトウェアフレームワーク、ハードウェアプラットフォーム、およびオペレーティングシステム用のアプリケーションソフトウェアを構築するために使用する開発ツールのコレクションです。
このため js-sdk に、次のように多くの例を引用できます。
UIコンポーネントライブラリ
Aliアームなどのパフォーマンス監視ツール
統計分析ツール
アリババクラウドスマート検証SDK
極端な検証sdk
sdk 目的は、開発プロジェクトの効率、安全性、および利便性を向上させることです。そのためsdk 、設計 時には、次のようないくつかの原則に従う必要があります。
最小限の使いやすさの原則：つまり、コードが最も単純になるように、不要な関数/コードをできるだけ追加しないでください。
最小の依存性の原則：つまり、最小の外部依存性を達成するために必要な依存性が断固として追加されない
拡張が簡単：プラグイン、拡張とカスタマイズの最大限のサポート
安定性：ホストアプリケーションをクラッシュさせないでください。下位互換性があり、テスト可能です。
上記の背景と原則を理解した後、sdk ケースの実装方法を見てみましょう 。
パッケージH5-js-sdkへのドア
ここでの著者は、オープンソースページのオーサリングツールH5-Dooringをケースとして取り上げ（もちろん、それをsdkにパッケージ化することも私たちの反復の一部であり、後でnpmパッケージになります）、js-sdkをパッケージ化する方法を紹介するために、要約を見てみましょう。図： 私たちのsdkは、システム内の他のモジュールと通信し、相互にデータを交換できる完全なシステムの一部のようなものです。通常、sdkはホストシステムにサービスを提供します。dooring-sdkでは、外部を提供する必要があります。一方、インターフェイスのサポートでは、H5エディターのインターフェイスを制御するためにホストをサポートする必要があるため、包括的な分析を行った後、次の予備的な計画図があります。
まずsdk 、js 動的読み込み iframe モードを 使用して それを実現し、iframe 通信によるprops 送信を実現し ます。現時点では、さらに2つの信頼性の高い通信方式があります。
postmessageクロスドメインおよびクロスシステム通信を実現するために使用し ますurlパラメータ通信を使用 する
postmessage ホストシステムに対して比較的高い要件、ホストのニーズを手動で構成するに origin プラガブルな経験に優しいないホワイトリスト、著者はより一般的な採用して url 、ここでの方法を、ここでパラメータを分析する必要があり、最終的には比較的簡単なアクセスを実現方法は、次のとおりです。
var dooringOpts = {
container: '', // 挂载到哪个dom节点上
iframeStyle: { // iframe自定义样式
width: '',
height: '',
border: ''
},
controls: {
gallery: false, // 是否启动图片库
template: false, // 是否启用模版库
saveTemplate: true, // 参数可以是true/false,表示是否启动下载代码, 也可以是函数, 用来自定义下载代码逻辑
save: true, // 参数可以是true/false,表示是否启动下载代码, 也可以是函数, 用来自定义下载代码逻辑
downCode: true, // 参数可以是true/false,表示是否启动下载代码, 也可以是函数, 用来自定义下载代码逻辑
isPhoneTest: false,
helpPage: true, // false/true表示隐藏/显示帮助页面
uploadApi: '', // 自定义上传api
formApi: '', // 自定义表单提交api
screenshotsApi: '' // 自定义截图提交api
}
};
ユーザーは構成されたprops 合計を グローバルに定義するだけでよく、 callback 自由にカスタマイズでき H5-Dooringます。次に、dooring-sdkを導入するだけです（グローバル変数が最初に定義され、次にsdkが導入されることに注意してください）。
<script src="http://49.234.61.19/dooring-sdk.js"></script>
上記は、決定された js-sdk 計画と最終的な呼び出し効果のみです。次に、それを実装する方法、つまりdooring-sdk 、内部で行われた作業を 見てみましょう。最初に、実装メカニズムの図を見てみましょう。
上記の分析から明らかな図は、ユーザー定義の構成url パラメーターに解析されたグローバルに進み 、次に、特に以下を達成するために、 + 構造 へiframe の srcプロパティを 動的に作成 します。dooring urlparmas
(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, // 参数可以是true/false,表示是否启动下载代码, 也可以是函数, 用来自定义下载代码逻辑
save: true, // 参数可以是true/false,表示是否启动下载代码, 也可以是函数, 用来自定义下载代码逻辑
downCode: true, // 参数可以是true/false,表示是否启动下载代码, 也可以是函数, 用来自定义下载代码逻辑
isPhoneTest: false,
helpPage: true, // false/true表示隐藏/显示帮助页面
uploadApi: '',
formApi: '',
screenshotsApi: ''
}, opt.controls || {})
let params = '';
for(let key in controls) {
params += key + '=' + encodeURI(controls[key]) + '&'
}
return params.slice(0, params.length -1)
}
})()
上記は単純な実現のアイデアですが、jqueryプラグインを作成するという伝統的な感覚ですか？同時に、h5-dooring 解析parmas やその他の操作をサポートするために社内で協力する必要があり ます。ここに興味がある場合は、自分で勉強することができます。もちろんsdk 、それを達成する方法はたくさんあります 。 皆さんを楽しみにしています。探索。
やっと
上記のスキームの作者はH5-Dooringに統合されており、sdkの形で体験できます。
githubアドレス：WYSIWYGH5ページエディターH5-ドア
素晴らしいレビュー
リラックス