如何快速将你的应用封装成JS-SDK?

 前言

创新互联主要从事做网站、网站设计、网页设计、企业做网站、公司建网站等业务。立足成都服务灵丘,10年网站建设经验,价格优惠、服务专业,欢迎来电咨询建站服务:18982081108

本文将介绍前端如何封装一款 js-sdk 以及如何快速将你的应用变成 js-sdk , 我们将总结一些封装 js-sdk 的原则和案例, 来帮大家更快的上手 sdk 开发. 其中笔者还会以H5-Dooring 为例子, 介绍如何将 H5 页面编辑器封装成一个 js-sdk 供他人使用.

正文

在开始文章之前, 笔者先来介绍一下什么是 sdk .

sdk 即软件开发工具包, 一般是一些软件工程师为特定的软件包、软件框架、硬件平台、操作系统等建立应用软件时的开发工具的集合。

对于 js-sdk 而言, 我们能举出很多例子, 如下:

  • UI组件库
  • 性能监控工具, 如阿里 arms
  • 统计分析工具
  • 阿里云智能验证sdk
  • 极验验证sdk

sdk 的目的是提高我们开发项目的效能, 安全性和便捷性等问题, 所以我们在设计 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 通行方式, 这里需要对参数做解析, 最后达到一个比较简单的接入方式, 如下:

 
 
 
 
    
  
  
  
  
  1. var dooringOpts = {
    2. 
  
  
  
  
  2.     container: '',  // 挂载到哪个dom节点上
    3. 
  
  
  
  
  3.     iframeStyle: {  // iframe自定义样式
    4. 
  
  
  
  
  4.         width: '',
    5. 
  
  
  
  
  5.         height: '',
    6. 
  
  
  
  
  6.         border: ''
    7. 
  
  
  
  
  7.     },
    8. 
  
  
  
  
  8.     controls: {
    9. 
  
  
  
  
  9.       gallery: false,  // 是否启动图片库
    10. 
  
  
  
  
  10.       template: false, // 是否启用模版库
    11. 
  
  
  
  
  11.       saveTemplate: true,  // 参数可以是true/false,表示是否启动下载代码, 也可以是函数, 用来自定义下载代码逻辑
    12. 
  
  
  
  
  12.       save: true,  // 参数可以是true/false,表示是否启动下载代码, 也可以是函数, 用来自定义下载代码逻辑
    13. 
  
  
  
  
  13.       downCode: true, // 参数可以是true/false,表示是否启动下载代码, 也可以是函数, 用来自定义下载代码逻辑
    14. 
  
  
  
  
  14.       isPhoneTest: false,
    15. 
  
  
  
  
  15.       helpPage: true,   // false/true表示隐藏/显示帮助页面
    16. 
  
  
  
  
  16.       uploadApi: '',  // 自定义上传api
    17. 
  
  
  
  
  17.       formApi: '',  // 自定义表单提交api
    18. 
  
  
  
  
  18.       screenshotsApi: ''  // 自定义截图提交api
    19. 
  
  
  
  
  19.     }
    20.

用户只需要在全局定义好配置的 props 和 callback , 即可自由定制 H5-Dooring. 接下来我们只需要再引入 dooring-sdk即可(注意先定义全局变量, 再引入sdk):

 
 
 
 
    
  
  
  
  
    2.

以上只是确定了 js-sdk 的方案和最终调用效果, 接下来我们来看看如何去实现它. 也就是 dooring-sdk 内部到底做了那些工作. 我们先看一张实现机制图:

由上图分析可知我们需要提前把用户定义的全局配置解析成 url 参数, 然后将动态创建的 iframe 的 src 属性设置为 dooring url + parmas的结构, 具体实现如下:

 
 
 
 
    
  
  
  
  
  1. (function(){
    2. 
  
  
  
  
  2.       let iframe = document.createElement('iframe');
    3. 
  
  
  
  
  3.       let tid = Date.now();
    4. 
  
  
  
  
  4.       let sdk_domain_path = 'http://xxxx/xxxx';
    5. 
  
  
  
  
  5.       iframe.src = sdk_domain_path + '/h5_plus/editor?tid=' + tid + '&' + getDooringApiStr(dooringOpts) + '&isOpen=1';
    6. 
  
  
  
  
  6. 
  
  
  
  
  7.       iframe.style.border = 'none';
    8. 
  
  
  
  
  8.       iframe.style.width = '100vw';
    9. 
  
  
  
  
  9.       iframe.style.height = '100vh';
    10. 
  
  
  
  
  10.       if(dooringOpts && dooringOpts.iframeStyle) {
    11. 
  
  
  
  
  11.           iframe.style.border = dooringOpts.iframeStyle.border || 'none';
    12. 
  
  
  
  
  12.           iframe.style.width = dooringOpts.iframeStyle.width || '100vw';
    13. 
  
  
  
  
  13.           iframe.style.height = dooringOpts.iframeStyle.height || '100vh';
    14. 
  
  
  
  
  14.       }
    15. 
  
  
  
  
  15. 
  
  
  
  
  16.       document.querySelector(dooringOpts.container || 'body').appendChild(iframe);
    17. 
  
  
  
  
  17. 
  
  
  
  
  18.       function getDooringApiStr(opt) {
    19. 
  
  
  
  
  19.           let controls = Object.assign({
    20. 
  
  
  
  
  20.               gallery: false,
    21. 
  
  
  
  
  21.               template: false,
    22. 
  
  
  
  
  22.               saveTemplate: true,  // 参数可以是true/false,表示是否启动下载代码, 也可以是函数, 用来自定义下载代码逻辑
    23. 
  
  
  
  
  23.               save: true,  // 参数可以是true/false,表示是否启动下载代码, 也可以是函数, 用来自定义下载代码逻辑
    24. 
  
  
  
  
  24.               downCode: true, // 参数可以是true/false,表示是否启动下载代码, 也可以是函数, 用来自定义下载代码逻辑
    25. 
  
  
  
  
  25.               isPhoneTest: false,
    26. 
  
  
  
  
  26.               helpPage: true,   // false/true表示隐藏/显示帮助页面
    27. 
  
  
  
  
  27.               uploadApi: '',
    28. 
  
  
  
  
  28.               formApi: '',
    29. 
  
  
  
  
  29.               screenshotsApi: ''
    30. 
  
  
  
  
  30.           }, opt.controls || {})
    31. 
  
  
  
  
  31. 
  
  
  
  
  32.           let params = '';
    33. 
  
  
  
  
  33.           for(let key in controls) {
    34. 
  
  
  
  
  34.               params += key + '=' + encodeURI(controls[key]) + '&'
    35. 
  
  
  
  
  35.           }
    36. 
  
  
  
  
  36.           return params.slice(0, params.length -1)
    37. 
  
  
  
  
  37.       }
    38. 
  
  
  
  
  38. })()
    39.

以上只是个简单的实现实现思路, 是不是有点传统的写jquery插件的感觉? 同时我们还需要配合 h5-dooring 内部去支持解析 parmas 等操作, 这里感兴趣的可以自行研究. 当然 sdk 的实现方式还有很多, 期待大家的探索.

最后

以上方案笔者已经集成到 H5-Dooring 中，大家可以以 sdk 的方式体验一下。github 地址：所见即所得的H5页面编辑器H5-Dooring

新闻标题：如何快速将你的应用封装成JS-SDK?
本文链接：http://www.csdahua.cn/qtweb/news18/480968.html

网站建设、网络推广公司-快上网，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 快上网

成都快上网为您推荐相关内容

外贸建站知识

各行业网站

佑馨产后护理　　 　添翼二手车鉴定评估　　 　软文推广公司　　 　西部信息服务器托管　　 　成都外贸网站优化　　 　温江网站建设　　 　班戈纳美网站　　 　公路打桩机　　 　成都服务器机柜租用　　 　企业手机网站建设　　 　网站排名优化　　 　简阳威斯达宇　　 　重庆移动机房托管　　 　重庆网站设计　　 　青羊雕琢时光　　 　亮美家　　 　成都网站设计　　 　广安网站设计　　 　尊格展览　　 　公路钻孔机