如何快速将你的应用封装成js-sdk?

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

前言


本文将介绍前端如何封装一款 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 通行方式, 这里需要对参数做解析, 最后达到一个比较简单的接入方式, 如下:

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    }
};

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

<scriptsrc="http://49.234.61.19/dooring-sdk.js"></script>

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


网络异常,图片无法展示
|



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


(function(){
letiframe=document.createElement('iframe');
lettid=Date.now();
letsdk_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);
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)
      }
})()

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


目录
打赏
0
0
0
0
22
分享
相关文章
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
149 90
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
133 20
【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
如何使用内存监控工具来定位和解决Node.js应用中的性能问题?
总之,利用内存监控工具结合代码分析和业务理解,能够逐步定位和解决 Node.js 应用中的性能问题,提高应用的运行效率和稳定性。需要耐心和细致地进行排查和优化,不断提升应用的性能表现。
224 77
Vue.js应用结合Redis数据库:实践与优化
将Vue.js应用与Redis结合,可以实现高效的数据管理和快速响应的用户体验。通过合理的实践步骤和优化策略,可以充分发挥两者的优势,提高应用的性能和可靠性。希望本文能为您在实际开发中提供有价值的参考。
57 11
Figma-Low-Code:快速将Figma设计转换为Vue.js应用,支持低代码渲染、数据绑定
Figma-Low-Code 是一个开源项目,能够直接将 Figma 设计转换为 Vue.js 应用程序,减少设计师与开发者之间的交接时间,支持低代码渲染和数据绑定。
113 3
Figma-Low-Code:快速将Figma设计转换为Vue.js应用,支持低代码渲染、数据绑定
如何优化Node.js应用的内存使用以提高性能?
通过以上多种方法的综合运用,可以有效地优化 Node.js 应用的内存使用,提高性能,提升用户体验。同时,不断关注内存管理的最新技术和最佳实践,持续改进应用的性能表现。
176 62
【Vue.js】监听器功能(EventListener)的实际应用【合集】
而此次问题的核心就在于,Vue实例化的时机过早,在其所依赖的DOM结构尚未完整构建完成时就已启动挂载流程,从而导致无法找到对应的DOM元素,最终致使计算器功能出现异常,输出框错误地显示“{{current}}”,并且按钮的交互功能也完全丧失响应。为了让代码结构更为清晰,便于后续的维护与管理工作,我打算把HTML文件中标签内的JavaScript代码迁移到外部的JS文件里,随后在HTML文件中对其进行引用。
54 8
ARMS 用户体验监控正式发布原生鸿蒙应用 SDK
阿里云 ARMS 用户体验监控(RUM)推出了针对原生鸿蒙应用的 SDK。SDK 使用 ArkTS 语言开发,支持页面采集、资源加载采集、异常采集及自定义采集等功能,能够全面监控鸿蒙应用的表现。集成简单,只需几步即可将 SDK 接入项目中,为鸿蒙应用的开发者提供了强有力的支持。
182 15
Next.js 实战 (十):中间件的魅力,打造更快更安全的应用
这篇文章介绍了什么是Next.js中的中间件以及其应用场景。中间件可以用于处理每个传入请求,比如实现日志记录、身份验证、重定向、CORS配置等功能。文章还提供了一个身份验证中间件的示例代码,以及如何使用限流中间件来限制同一IP地址的请求次数。中间件相当于一个构建模块,能够简化HTTP请求的预处理和后处理,提高代码的可维护性,有助于创建快速、安全和用户友好的Web体验。
如何使用内存监控工具来优化 Node.js 应用的性能
需要注意的是,不同的内存监控工具可能具有不同的功能和特点,在使用时需要根据具体工具的要求和操作指南进行正确使用和分析。
93 31

热门文章

最新文章

AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等