关于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的实现

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

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

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

1、将 SDK 初始化

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

2、SDK 的应用

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

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

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

微信小程序 SDK的实现

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

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

在代码层面，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

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/