关于javascript:实践分享打造极具高扩展性的JavaScript-SDK

SDK（Software Developer Kit）是应用 FeatureProbe 服务必不可少的工具之一。SDK 能将用户的应用程序连贯到 FeatureProbe 服务，依据用户的配置获取开关的后果，还能将开关的拜访状况上报给 FeatureProbe，进而实现 A/B 试验的能力。

FeatureProbe 目前对外提供十余种支流开发语言的 SDK，包含用于服务端开发的 Java、Golang、Python、Rust 等，以及用于客户端开发的 JavaScript、Android、iOS 等。在之前的文章【用 Rust 开发跨平台 SDK 摸索和实际】中咱们曾介绍过咱们抉择应用 Rust 开发了跨平台语言的 Android SDK 和 iOS SDK，这样做的次要起因是：

（1）能缩小人力老本和开发工夫。

（2）共享一套代码，便于前期保护。

在开发 JavaScript SDK 的过程中，咱们也同样采纳相似的思路。JavaScript 是目前构建 Web 利用的次要语言，在此基础上产生了很多现代化的 JavaScript 前端框架，比方：React、Vue、Angular 等。近几年在国内爆火的微信小程序框架也次要应用 JavaScript 语言进行开发的。如何制作一款能反对所有前端框架应用的通用 SDK，同时在此 SDK 的根底上，可能疾速地依据框架的语法个性进行下层封装，是 JavaScript SDK 的外围要求之一。

实现一个功能完善的 JavaScript SDK，可能在一般的 Web 前端工程中应用。在此基础上，依据框架语法个性，进一步封装其它语言的 SDK，不同语言的 SDK 别离治理和发版。

React SDK 在实现时将 JavaScript SDK 作为依赖项装置到工程内，次要应用了 React 的 Context API 和 Context hooks 进行下层封装，不便开发者在 React 工程中的应用。

1、应用 React 的 createContext API 创立一个上下文对象，保留开关 FeatureProbe 实例和开关后果的汇合。2、应用 React 的 Context Hooks 封装若干个自定义 Hook，用于在任何组件内疾速应用 FeatureProbe 实例和拜访开关后果。

这里咱们展现了一种以高阶组件的形式应用 React SDK。

应用 FPProvider 对根组件 <App /> 进行初始化，初始化时传入必填参数 remoteUrl、clientSdkKey 和 user 对象等。

应用 withFPConsumer 高阶组件的形式包装业务组件 <Home />，组件外部可通过 props 属性拜访 FeatureProbe 实例（client）和开关汇合（toggles）。

（1）client 实例上可拜访 JavaScript SDK 所有对外裸露的 API，比方 booleanValue、jsonDetail、track 等。

（2）toggles 开关汇合是同一个用户在一个 clientSdkKey 环境中调用所有开关的返回后果汇合，提供了另一种获取开关后果和详情的形式。

相比拟 React SDK，在 JavaScript SDK 上的集成微信小程序 SDK 更简单一些，须要针对微信小程序的语法个性做一些兼容工作。次要的起因是微信小程序和一般的 Web 利用的运行环境不同，前者是在微信客户端运行，后者在浏览器环境中运行的。例如在浏览器环境中反对的 window 和 document 对象，在微信小程序中是不反对的。

上面的表格列举出了两种 SDK 的次要不同点：

	JavaScript SDK	微信小程序 SDK
发送 HTTP 申请 API	fetch	wx.request
本地缓存 API	localStorage.setItem、localStorage.getItem	wx.setStorageSync、wx.getStorageSync
长连贯工具库	socket.io-client	wepapp.socket.io
是否反对主动上报事件	反对	不反对
UA	JS/1.0.1	MINIPROGRAM/1.0.1

在代码层面，JavaScript SDK 将上述差别进行抽离，并保留在 platform 对象中，platform 对象目前蕴含的字段有：

UA: 标识 SDK 名称和版本；

localStorage： 本地存储对象，调用 localStorage.setItem() 办法保留数据，调用 localStorage.getItem() 办法获取数据；

httpRequest： 发送申请对象，调用 httpRequest.get() 办法发送 GET 申请，调用 httpRequest.post() 办法发送 POST 申请；

socket： 用于初始化 socket.io-client 客户端，监听开关的变更。

JavaScript SDK 导出 initializePlatform 办法，其它语言的 SDK 在初始化时可传入 platform 对象来保留配置差别局部，不传入时将应用默认值。

export function initializePlatform(options) {if (options.platform) {setPlatform(options.platform);
  }
}

以下为微信小程序 SDK 的 platform 对象形成。在发送 HTTP 申请上咱们目前抉择了一款开源的工具库 wefetch，不便后续反对其它的小程序 SDK，WebSocket 客户端抉择了基于 socket.io 实现的 weapp.socket.io。

import wefetch from "wefetch";          // 小程序申请扩大
import pkg from '../package.json';      
const PKG_VERSION = pkg.version;        // 微信小程序 UA 信息
const io = require("weapp.socket.io");  // 基于 socket.io 实现的构建微信小程序的 WebSocket 客户端

// 基于微信小程序 API 封装的 localStorage 对象
class StorageProvider {public async getItem(key) {
    try {return wx.getStorageSync(key);
    } catch (e) {console.log(e);
    }
  }

  public async setItem(key, data) {
    try {wx.setStorageSync(key, data);
    } catch (e) {console.log(e);
    }
  }
}

// 基于微信小程序 API 封装的 httpRequest 对象
const httpRequest = {get: function(url, headers, data, successCb, errorCb) {
    wefetch.get(url, {
      header: headers,
      data,
    }).then(json => {successCb(json.data);
    }).catch(e => {errorCb(e);
    });
  },
  post: function(url, headers, data, successCb, errorCb) {
    wefetch.post(url, {
      header: headers,
      data,
    }).then(() => {successCb();
    }).catch(e => {errorCb(e);
    });
  }
};

const platform = {localStorage: new StorageProvider(),
  UA: "MINIPROGRAM/" + PKG_VERSION,
  httpRequest: httpRequest,
  socket: io,
};

// 初始化
initializePlatform({platform});

下面咱们介绍了在 JavaScript SDK 的根底下来开发其它语言的 SDK。外围思路是首先实现一个「大而全」的通用 SDK，而后将各个语言差别的局部进行抽离，其它语言 SDK 在初始化时进行差别局部的替换。其它语言的 SDK 再依据对应的语法个性进行下层封装，底层复用 JavaScript SDK 提供的通用能力。

目前除了 JavaScript SDK、React SDK 和微信小程序 SDK 之外，咱们正在筹备 Vue SDK。如果 FeatureProbe 目前提供的 SDK 不满足您的需要，能够通过新建 issue 的形式告知咱们。咱们也欢送社区搭档能为咱们奉献更多语言的 SDK，奉献 SDK 时可参考文档 SDK 奉献指南：https://docs.featureprobe.io/zh-CN/reference/sdk-contributor/。

FeatureProbe 是国内首家性能开关治理开源平台，它蕴含了灰度放量、AB 试验、实时配置变更等针对『性能粒度』的一系列治理操作，齐全开源，能够释怀间接应用。

以后 FeatureProbe 作为一个性能开关治理平台曾经应用 Apache 2.0 License 协定齐全开源，你能够在 GitHub 和 Gitee 上拜访源码，你也能够在下面给提 issue 和 feature 等，如果你感觉咱们的我的项目有意思，欢送大家在 GitHub 或 Gitee 给咱们点个🌟，须要大家的反对和激励。

GitHub: https://github.com/FeatureProbe/FeatureProbe

Gitee: https://gitee.com/featureprobe/FeatureProbe

体验环境: https://featureprobe.io/

关于javascript:实践分享打造极具高扩展性的JavaScript-SDK

实现思路

React SDK 的实现

1、将 SDK 初始化

2、SDK 的应用

微信小程序 SDK 的实现

总结

对于 FeatureProbe