Skip to content

Home

Jump to bottom
magic edited this page Nov 4, 2020 · 8 revisions

如何从零自己编写一个JavaScript语言 SDK

前言

由于疫情等个人原因，一年没更新文章，在我开发的JS SDK上有许多人想有一些个性需求，问我SDK 怎么开发，今天再一次遇到，对此准备写一系列文章讲解从零开始开发一个跨平台SDK。

SDK的开发并不会很难，由于有一些JS基础 就可以开发出SDK，SDK的难点不在代码以及逻辑的复杂，而在你对整个架构的理解，如何更合理的规模每个模块，所以这里不只是讲技术如何开发，这里会讲下这个SDK的开发思路，以及我们自己对开发者的一些考量。

曾经负责过旧SDK维护，做过旧SDK改造支持小程序，直到3年前，各类小程序如雨后春笋般冒出来，导致曾经13年的SDK，已经不能跟上时代的步伐，每隔2个月就会有一个小程序平台出来，如果每个平台都开发一个SDK，一个bug，需要修改多份代码，例如：（微信、快应用、支付宝、百度、今日头条、QQ、抖音），旧SDK基于JS 对象开发，常年打补丁，须支持各大平台，存在改动大，维护难等问题，于是决定重新开发一个跨平台JS SDK。

在考量过程中，是用Livescript, Coffeescript, Typescript这类寄生语言，还是直接用JavaScript 进行了研究，由于这个夸平台SDK是希望全部源码开源，并且接口调用文档也开源，所以这里面有开源的考虑在其中，最终以代码简短，易读为主要目标，虽然现在Typescript比较热门，因为有些js 基础不是很扎实的，没法参与进来，我们希望这个SDK，谁都可以进行变更，最终选择了使用原生JavaScript。当然，这里跟曾经13年1.0写SDK的方式还是有不同，我们看下13年1.0SDK 结构如下

(function (window) {

    // 定义你的对象名称
    var Bmob = {};

    // 初始化你的SDK
    Bmob.init = function () {
        // ...
    };

    // 把sdk对象导出到浏览器window下
    window.Bmob = Bmob;

})(window, undefined);

特点是简单直观，只有一个js文件，如果需要实现项目级别SDK非常麻烦，文件相对混乱，目前新SDK目录结构

├── index.js  //入口文件
├── package-lock.json //包依赖管理文件
├── package.json   //包依赖管理文件
└── src //源码目录
    └── lib
    		└── app.js  //sdk逻辑

由于这次是夸平台基于npm构建，不能像之前一样，下载SDK ，必须来我们官网下载，我们需要支持npm install 安装，我们直接用npm来构造一个SDK。

sdk开发的一些考虑

  1. 初始化方式尽量与原先保持一致，让开发者第一眼看就如此简单。
  2. 所有函数名称尽量保持原来的函数名称，这样从13年开始使用我们SDK，到今天很多习惯可以保留，照顾老用户，也方便曾经的客户升级到最新SDK。
  3. 包尽可能小，尽量不使用第三方包，提高加载速度
  4. 使用要简单，提高SDK接口的易用性，最大程度减少sdk接入方需要了解的细节。
  5. 一个方法只做一件事，接口参数尽量少，并且接口值要易于理解，难理解的部分要通过函数翻译，例如我们接口$gt 大于某值，让开发者传入【>】 更容易理解。
  6. 使用对象:一定要清楚自己的使用对象是谁，像我们这个JSSDK虽然是夸非常多平台，但主流使用对象就是微信小程序的开发人员。优先照顾这类人
  7. 使用时间:一个SDK的生命周期是很长的，一旦发布任何修改都会影响到其他人，所以维护时间是比较长的，像我们旧的SDK，基本从13年，维护到19年。经过前端技术发展的几个时代，当年的前端技术都还是Jquery的天下。
  8. 更新节奏: 开发者每天也比较忙，函数功能固定下来了，不要随便改，天天让开发者升级SDK，是比较痛苦的事情。特别像在微信小程序审核还如此严的情况下。

考虑上面这些我们就开始做吧

Clone this wiki locally