从0设计开发一款JS-SDK

提示：记录工作中遇到的需求及解决办法

---

前言

最近想研究一下js-sdk，所以就做了一些调研，记录下开发过程。

前端SDK是什么？前端SDK是为了帮助前端实现特定需求，而向开发者暴露的一些JS-API的集合，规范的SDK包括若干API实现、说明文档等

前端SDK其实很常见了，比如：

• UI组件库：通过封装一系列组件，通过配置帮助开发者调用
  • Antd
  • ElementUI
• JS类库：通过实现一类常用的方法，便于开发处理数据，也不用再考虑兼容性
  • lodash
  • moment
• 监控统计工具：通过API，来监听前端系统的报错、统计数据
  • Sentry
  • 百度统计等

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、开发前的设计

SDK开发其实很简单，简单到写一个函数导出就行，但在实际应用的过程中，我们要考虑很多实际情况。

1、设计原则

满足一类功能的需要

SDK一般都是为了满足一类业务的需要，所以设计之初要明确业务范围

最小可用性原则

即能用确定的方法实现，就不要再去搞复杂的内容。我理解，比如获取DOM，如果 GetElementById 可以实现，就不要再设计一下 GetElementsByTagName、 document.querySelector等方法封装，除非有其他的开发需要无法满足。

最少依赖原则

SDK减少依赖，要避免Lodash、JQuery、Moment、Dayjs等库，尽可能自行实现必要的方法，或者引入尽量小的库。否则会导致SDK打包后过大，或者更新版本带来的兼容问题
当然一切都要根据实际情况，有些SDK是时间的各种处理，自己处理时间的成本太高，不妨引入小型的Dayjs时间库

足够稳定、向后兼容

减少BreakChange，绝不能导致载体应用崩溃，同时做好文档说明

易扩展

模块化实现方法，尽量小的封装函数，保持函数功能的单一性原则，这样就可以更好的增加SDK的能力。根据这些原则，下面是我们做的对应操作：

2、要实现的功能

首先要明确我们写的SDK是用来做什么的？
比如我本次实现的是用户H5页面的一键登录和号码检测。
那么我们需要暴露两个实例，供其他开发者使用，为了满足易扩展的原则，我们将声明两个类，来实现（如果每个实例都很多能力，可以拆分成两个SDK也是可以的）

3、构建工具和技术选择

提供的SDK一般都要提供压缩和未压缩版本，未压缩可以用来帮助开发调用，查找问题。压缩版本可以使用在生产环境，减少http损耗。所以我们要借助构建工具来集成这部分的能力。
可供选择的压缩工具有很多：webpack、Rollup、Gulp
如果是纯类库的压缩，当然是Rollup更好，压缩更彻底
如果是有DOM和样式，那么使用webpack功能更强大
这里由于我们可能涉及到页面SDK，而且对Webpack更熟悉，所以选择Webpack

4、单元测试

SDK的设计原则有一条：足够稳定、向后兼容，最少依赖原则。
这就意味着我们要少写Bug，所以一定要引入单元测试，这里我们选择Jest，使用起来也很简单。

describe('common test', () => {
   
    test('osIsPc', () => {
   
        expect(osIsPc()).toBeBoolean(true, false);
    })
    test("isWifi", () => {
   
        expect(isWifi()).toBeBoolean(true, false);
    })
})

5、SDK支持的引入方式

浏览器js模块化常见的几种方式包括：amd\cmd\es6 modules\umd

• 1、静态资源引入

<scriptsrc="/sdk/v1/phoneserver"></