一、前言

最近在開發(fā)一款一鍵登錄的號碼認證js-sdk，所以就做了一些調(diào)研，記錄下開發(fā)過程。

前端SDK是什么？前端SDK是為了幫助前端實現(xiàn)特定需求，而向開發(fā)者暴露的一些JS-API的集合，規(guī)范的SDK包括若干API實現(xiàn)、說明文檔等

前端SDK其實很常見了，比如：

• UI組件庫：通過封裝一系列組件，通過配置幫助開發(fā)者調(diào)用

• Antd

• ElementUI

• JS類庫：通過實現(xiàn)一類常用的方法，便于開發(fā)處理數(shù)據(jù)，也不用再考慮兼容性

• lodash

• moment

• 監(jiān)控統(tǒng)計工具：通過API，來監(jiān)聽前端系統(tǒng)的報錯、統(tǒng)計數(shù)據(jù)

• Sentry

• 百度統(tǒng)計等

二、開發(fā)前的設計

SDK開發(fā)其實很簡單，簡單到寫一個函數(shù)導出就行，但在實際應用的過程中，我們要考慮很多實際情況。

1、設計原則

滿足一類功能的需要

SDK一般都是為了滿足一類業(yè)務的需要，所以設計之初要明確業(yè)務范圍

最小可用性原則

即能用確定的方法實現(xiàn)，就不要再去搞復雜的內(nèi)容。我理解，比如獲取DOM，如果GetElementById可以實現(xiàn)，就不要再設計一下GetElementsByTagName、 document.querySelector等方法封裝，除非有其他的開發(fā)需要無法滿足。

最少依賴原則

SDK減少依賴，要避免Lodash、JQuery、Moment、Dayjs等庫，盡可能自行實現(xiàn)必要的方法，或者引入盡量小的庫。否則會導致SDK打包后過大，或者更新版本帶來的兼容問題

當然一切都要根據(jù)實際情況，有些SDK是時間的各種處理，自己處理時間的成本太高，不妨引入小型的Dayjs時間庫

足夠穩(wěn)定、向后兼容

減少BreakChange，絕不能導致載體應用崩潰，同時做好文檔說明

易擴展

模塊化實現(xiàn)方法，盡量小的封裝函數(shù)，保持函數(shù)功能的單一性原則，這樣就可以更好的增加SDK的能力。

根據(jù)這些原則，下面是我們做的對應操作：

2、要實現(xiàn)的功能

首先要明確我們寫的SDK是用來做什么的？

比如我本次實現(xiàn)的是用戶H5頁面的一鍵登錄和號碼檢測。

那么我們需要暴露兩個實例，供其他開發(fā)者使用，為了滿足易擴展的原則，我們將聲明兩個類，來實現(xiàn)（如果每個實例都很多能力，可以拆分成兩個SDK也是可以的）

3、構(gòu)建工具和技術(shù)選擇

提供的SDK一般都要提供壓縮和未壓縮版本，未壓縮可以用來幫助開發(fā)調(diào)用，查找問題。壓縮版本可以使用在生產(chǎn)環(huán)境，減少http損耗。所以我們要借助構(gòu)建工具來集成這部分的能力。

可供選擇的壓縮工具有很多：webpack、Rollup、Gulp

如果是純類庫的壓縮，當然是Rollup更好，壓縮更徹底

如果是有DOM和樣式，那么使用webpack功能更強大

這里由于我們可能涉及到頁面SDK，而且對Webpack更熟悉，所以選擇Webpack

4、單元測試

SDK的設計原則有一條：足夠穩(wěn)定、向后兼容，最少依賴原則。

這就意味著我們要少寫B(tài)ug，所以一定要引入單元測試，這里我們選擇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、靜態(tài)資源引入

<script src="/sdk/v1/phoneserver"></script> 復制代碼

• 2、支持amd引入

define([jquery.js, lodash.js], function($, _){     console.log("jquery and lodash", $, _) }) 復制代碼

• 3、支持cmd引入

define(function(require){     const lodash = require('./a.js')     console.log("lodash", lodash) }) 復制代碼

• 4、支持es6引入

import { PhoneServer } from 'phone-server-sdk' 復制代碼

我們直接在webpack中配置umd方式打包，然后就可以支持上面的多種引入方式

output: {     path: path.resolve(__dirname, '../dist'),     filename: '[name].js',     library: 'Phone-JS-SDK',     libraryTarget: 'umd' } 復制代碼

打包的庫命名：Phone-JS-SDK

6、版本維護和更新

• 管理好版本號

• 記錄好更新日志

SDK版本更新，每個版本都會存在差異，而用戶使用的版本肯定也太一樣，所以記錄好版本更新日志可以減少非技術(shù)問題。

通過靜態(tài)文件導出的SDK要同時部署多個版本，不能隨時下線老版本。

7、其他的注意點

• 代碼混淆

• 開發(fā)環(huán)境配置和代碼格式

• 上傳NPM

• CDN部署

• 依賴的三方庫如何打包進SDK

• 僅支持靜態(tài)引入的庫如何處理

• 如何全局共享庫方法

• 針對有后端API交互的SDK，需要考慮

• API要限流、限制次數(shù)、防止盜刷

• 日志監(jiān)控和數(shù)據(jù)上報

三、項目實踐

針對提交代碼的檢測和格式化，這里直接配置好了，如果需要了解，可以查看我之前的一篇文章前端工程化：Prettier+ESLint+lint-staged+commitlint+Hooks+CI 自動化配置處理

1、項目需要實現(xiàn)的能力

• 構(gòu)建工具構(gòu)建，配置開發(fā)環(huán)境、ts配置

• 實現(xiàn)類庫的相關(guān)方法（版本記錄、幫助命令等）

• 實現(xiàn)一鍵登錄的方法（預期的功能方法）

• 實現(xiàn)號碼檢測的方法

• 單元測試

• 上傳npm，支持導入

2、搭建基礎(chǔ)架構(gòu)，配置webpack。

我們選擇了ts，首先配置下tsconfig.json，然后配置webpack，引入ts-lodader，通過webpack-merge自行配置生產(chǎn)環(huán)境和開發(fā)環(huán)境，比較簡單就不重復了

module.exports = {     entry: {         sdk: [path.resolve(__dirname, '../src/index.ts')]     },     resolve: {         extensions: ['.tsx', '.ts', '.js'],     },     output: {         path: path.resolve(__dirname, '../dist'),         filename: '[name].js',         library: 'SDK',         libraryTarget: 'umd'     },     module: {       rules: [         {           test: /\.ts?$/,           exclude: /node_modules/,           use: [               {                 loader: 'babel-loader',                 options: {                   presets: ['@babel/preset-env'],                 },               },               {                 loader: 'ts-loader',                 options: {                   compilerOptions: {                     noEmit: false,                   },                 },               },             ],         },       ]     } 復制代碼

3、實現(xiàn)類庫的相關(guān)方法

下面是項目的主要目錄結(jié)構(gòu)

• src源代碼

• scripts 是webpack的相關(guān)配置

• public 是用來調(diào)試和打包的目錄

• tests 單元測試

LibInfo.ts 用來實現(xiàn)庫的一些方法，比如獲取版本號，幫助文檔，展示依賴版本等

PhoneNumberLogin.ts 一鍵登錄類

PhoneNumberAuth.ts 號碼認證類

ajax.ts 簡單封裝的ajax請求

index.ts 作為入口文件

js-sdk                    ├─ __tests__                                        │  └─ utils                      │     ├─ ajax.test.js            │     └─ commont.test.js                       ├─ public                        │  ├─ index.html                 │  └─ sdk.js                     ├─ scripts                                      │  ├─ webpack.base.config.js     │  ├─ webpack.dev.config.js      │  └─ webpack.prod.config.js     ├─ src                           │  ├─ lib                        │  │  ├─ LibInfo.ts              │  │  ├─ PhoneNumberAuth.ts      │  │  ├─ PhoneNumberLogin.ts     │  │  └─ Init.ts                 │  ├─ utils                              │  │  ├─ ajax.ts                 │  │  ├─ common.ts                        │  │  └─ interface.ts            │  └─ index.ts                   ├─ Readme.md                     ├─ index.d.ts                    ├─ jest.config.js                ├─ package.json                  ├─ tsconfig.json                           └─ yarn.lock                     復制代碼

4、實現(xiàn)SDK的接口

1、在調(diào)用之前，我們需要引用第三方庫，而且是md5加密的（如下），無法直接下載本地使用，所以考慮直接插入head中

export const scriptInit = (src: string, callback?: Function) => {     const script:any = document.createElement('script'),         fn = callback || function(){};     script.type = 'text/javascript';     //IE     if(script.readyState){         script.onreadystatechange = function(){             if( script.readyState == 'loaded' || script.readyState == 'complete' ){                 script.onreadystatechange = null;                 fn();             }         };     }else{         //其他瀏覽器         script.onload = function(){             fn();         };     }     script.src = src;     document.getElementsByTagName('head')[0].appendChild(script); } 復制代碼

2、我們以實現(xiàn)意見登錄號碼為例，新建PhoneNumberLogin.ts

const loginPhoneUrl = `http://test.com` export class PhoneNumberLogin {     constructor(options:AppInfo){         this.Init()     }     private Init(){         // 引入第三方依賴的script         scriptInit(loginPhoneUrl)     }      // 處理一鍵登錄的接口邏輯     public LoginApp(options){         return options     } } 復制代碼

這樣我們每一個小的功能點都放在一個類中，不對外的設置為私有方法，對外的可以設置為公共方法，其他的通過引用就可以讓SDK保持良好的可擴展性。

3、在index.ts中拋出方法

export * from './lib/PhoneNumberLogin.ts' 復制代碼

4、在項目中使用

script導入，一般都需要申請域名，那么就需要考慮容災，防止一臺機器掛掉，服務不可用，一般考慮CDN部署

const { PhoneNumberLogin } = Phone-JS-SDK const PhoneServer = new PhoneNumberLogin() 復制代碼

ES6 Modules導入

const { PhoneNumberLogin } from "Phone-JS-SDK" const PhoneServer = new PhoneNumberLogin() 復制代碼

5、上傳NPM

接著我們發(fā)布下npm，一個JS-SDK就完成了。

登陸npm倉庫，沒有的話去注冊一個,地址

npm login 復制代碼

選擇一個中意的SDK名字，查一下是否存在，這里我們起個名字Phone-JS-SDK

執(zhí)行npm version patch && npm publish --registry=https://registry.npmjs.org，然后就發(fā)布成功了。

作者：前端中后臺
鏈接：https://juejin.cn/post/7111880557914488846
來源：稀土掘金
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請注明出處。