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

发布时间：2025-11-04 14:19:08 来源：码上建站 作者：IT科技

 前言

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

正文

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

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

对于 js-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 对宿主系统要求比较高, 需要宿主手动配置 origin 白名单, 对可插拔式体验不够友好, 所以笔者这里采用了比较常用的 url 通行方式, 这里需要对参数做解析, 最后达到一个比较简单的接入方式, 如下:

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

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

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

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

最后

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

相关文章