前言本文将介绍如何在前端打包一个js-sdk，以及如何快速将您的应用程序转换为js-sdk。我们会总结一些js-sdk打包的原理和案例，帮助大家更快的上手sdk开发。其中，笔者还将以H5-Dooring为例，介绍如何将H5页面编辑器打包成js-sdk供他人使用。在开始文章之前，笔者首先来介绍一下什么是sdk。.sdk即软件开发工具包，一般是软件工程师为特定的软件包、软件框架、硬件平台、操作系统构建应用软件所使用的开发工具的集合。对于js-sdk，我们可以举出很多例子，如下：UI组件库性能监控工具，比如阿里arms统计分析工具阿里云智能验证sdk极限测试验证sdksdk旨在提高我们开发项目的性能和安全性以及便利性，所以我们在设计sdk的时候一定要遵循一些原则，具体如下：最小可用性原则：即尽可能不添加不必要的功能/代码，让代码达到最简单、依赖最少的原则：也就是不需要的依赖坚决不加，做到最小的外部依赖。易扩展：插件化，最大程度支持扩展和定制稳定性：一定不能导致宿主应用崩溃，向下兼容，可以测试熟悉了上面的背景和原理后，我们来看看如何实现一个sdk案件。将H5-Dooring封装成js-sdk笔者这里以开源页面制作工具H5-Dooring为例（当然封装成sdk也是我们迭代的一部分，甚至会做成npm包稍后），介绍如何封装js-sdk，我们先来看一张抽象图：我们的sdk就像是一个完整系统的一部分，可以和系统中的其他模块进行通信，相互交换数据。总的来说，sdk是为宿主系统服务的。在dooring-sdk中，我们一方面需要提供对外接口支持，另一方面需要支持宿主控制H5编辑器的接口。因此，综合分析后，我们有如下初步规划图：首先，我们的sdk使用js动态加载iframe的方式来实现，通过iframe通信实现props传递。这时候比较靠谱的通信方案有两种：使用postmessage实现跨域跨系统通信和使用url参数通信，由于postmessage对宿主系统的要求比较高，需要宿主手动配置origin白名单，对于可插拔的体验不够友好，所以笔者这里使用了比较常用的url访问方式，这里需要对参数进行解析，最终实现了一个比较简单的接口。输入法如下：vardooringOpts={container:'',//挂载到哪个dom节点iframeStyle:{//iframe自定义样式width:'',height:'',border:''},controls:{gallery:false,//是否启动图片库template:false,//是否启用模板库saveTemplate:true,//参数可以为true/false，表示是否启动下载代码，也可以是一个函数，用于自定义下载代码的逻辑save:true,//parameter可以为true/false，表示是否开始下载代码，或者一个函数，用于自定义下载代码逻辑downCode:true,//参数可以为true/false，表示是否开始启动下载代码，或者说是一个函数，用于自定义下载代码逻辑isPhoneTest:false,helpPage:true,//false/true表示隐藏/显示帮助页面uploadApi:'',//自定义上传apiformApi:'',//customformsubmissionapiscreenshotsApi:''//self定义截图提交api}用户只需要全局定义配置的props和回调即可自由定制H5-Dooring。接下来我们只需要导入dooring-sdk（注意先定义全局变量，再定义sdk）：以上只是确定了js-sdk的方案和最终的调用效果，下面就来看看如何实现吧。那就是dooring-sdk内部做了什么工作呢？我们先来看一个实现机制的图：从上图分析可以看出，我们需要提前将自定义的全局配置解析成url参数，然后设置动态创建的iframe的src属性todooringurl+parmas的结构实现如下：.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。宽度||'100vw';iframe.style.height=dooringOpts.iframeStyle.height||'100vh';}document.querySelector(dooringOpts.container||'body').appendChild(iframe);functiongetDooringApiStr(opt){letcontrols=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||{})letparams='';for(letkeyincontrols){params+=key+'='+encodeURI(controls[key])+'&'}returnparams.slice(0,params.length-1)}})()上面只是一个简单的实现我dea，写jquery插件是不是有点传统？同时我们还需要配合h5-dooring来支持解析parmas等操作。这里有兴趣的可以自己研究一下。当然sdk的实现还是还有很多，期待你的探索。最后，以上方案作者已经集成到H5-Dooring中，可以体验sdk形式的github地址：所见即所得的H5页面编辑器H5-Dooring
