作者：徐小夕来源：趣谈前端
前言
本文将介绍前端如何封装一款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,//参数可以是true/false,表示是否启动下载代码,也可以是函数,用来自定义下载代码逻辑downCode:true,//参数可以是true/false,表示是否启动下载代码,也可以是函数,用来自定义下载代码逻辑isPhoneTest:false,helpPage:true,//false/true表示隐藏/显示帮助页面uploadApi:,//自定义上传apiformApi:,//自定义表单提交apiscreenshotsApi://自定义截图提交api}
用户只需要在全局定义好配置的props和callback,即可自由定制H5-Dooring.接下来我们只需要再引入dooring-sdk即可(注意先定义全局变量,再引入sdk):
scriptsrc=