Go...
Go...
对于前端而言，SDK其实指的是什么？ 是API接口的集合还是只是一段代码调用 我的理解是SDK是针对某个平台、某个系统、或者某个软件所特定的开发工具集成，可以是包含多个API也可以只是一个编程工具
1.SDK类型一个应用的JS-SDK大概可以分为以下三种
Web的API集合（类似微信官方的js-sdk工具）分析与统计工具（类似百度统计的js-sdk工具）嵌入式类如Widget2.如何设计 通过开发一个KSDK（JS-SDK），根据当前浏览器环境或者手动匹配，来识别调用的第三方SDK（钉钉、企业微信、云之家）
2.1 开发文档目录企业微信： work.weixin.qq.com/api/doc/900…钉钉： ding-doc.dingtalk.com/doc#/dev/we…云之家： open.yunzhijia.com/openplatfor…2.2 设计模式 常见的JS设计模式主要有以下几种
单例模式：一个类只返回一个实例，一旦创建再次调用就直接返回（ 如第三方库jQuery，lodash，moment等）构造函数模式混合模式: 原型模式 + 构造函数模式工厂模式发布订阅模式 由于抽象工厂模式适用系统中有多个产品类簇的前提，而每次只使用其中某一产品类簇的情况，比较适合通过使用抽象工厂设计模式来封装KSDK
抽象工厂设计模不直接生成实例，而是用于对产品类簇的创建。SDK使用不同的第三方JS-SDK进行注册的，如：钉钉，企业微信，云之家等。那么这三类工具就是对应的类簇。在抽象工厂中，它其实是由几种子类型组成的，当创建SDK类实例时候，它先判断一下应该用哪个子类，然后创建该子类的实例返回给你
代码语言：javascript复制//工厂设计模式
function SDKFactory(type) {
if(this instanceof SDKFactory) {
return new this[type]();
} else {
return new SDKFactory(type);
}
}
SDKFactory.prototype = {
YUNZHIJIA: function() {
this.jsApi = 'https://static.yunzhijia.com/public/js/qing/latest/qing.js'
this.init = function () {
qing.config({});
};
//
this.getInfo = function (fn) {
qing.call('getPersonInfo', {
success: function (res) {
fn();
},
});
};
this.getVersion = function () {
return qing.version;
};
},
DINGDING: function() {
this.jsApi = 'https://g.alicdn.com/dingding/dingtalk-jsapi/2.7.13/dingtalk.open.js'
this.init = function (fn) {
dd.ready(function () {
fn();
});
};
this.getInfo = function (fn) {
};
this.getVersion = function () {
return dd.version;
};
},
WEIXINWORKSDK: function() {
this.jsApi = 'http://res.wx.qq.com/open/js/jweixin-1.2.0.js'
this.init = function (fn) {
wx.config({beta: true, debug: true});
wx.ready(function () {
fn();
});
};
this.getVersion = function () {
};
}
}
复制代码 KSDK方法使用前，需要先成功加载完相应的第三方js资源，加载方式使用异步加载
这里考虑到当你使用异步加载的时候，将会出现，页面中的函数无法正常调用SDK方法的情况，也就是当调用发生在脚本加载之前执行了，那如何包装让SDK正常执行？这里聊一下script的同步与异步的关系。
同步模式： script标签不带defer或async属性，脚本获取与执行都是同步进行，页面会被阻塞，浏览器都会按照
复制代码2.4 版本管理 通常情况下，我们会有不同方式来声明SDK的版本，这取决于具体针对的业务和设计。常见的版本管理有以下三种：
使用查询字符串路径: http://xxx.com/sdk.js?v=1.0.0
使用文件夹命名: http://xxx.com/v1.0.0/sdk.js
使用主机名或者子域名 http://v1.xxx.com/sdk.js
该项目使用的是使用文件夹命名的方式，结合aliyun对象存储服务OSS（具备CDN加速）
3. 如何打包 打包是sdk上线必不可少的流程，项目用了Rollup作为工具打包，Rollup 将所有资源放在同一个地方，一次性加载，利用tree-shake特性来剔除项目中未使用的代码，减少冗余，相比其他JavaScript打包工具，Rollup总能打出更小，更快的包 官方链接：www.rollupjs.com
3.1 Rolluprollup比较适合打包js的sdk或者封装的框架,对比大家熟悉的webpack，比较适合打包一些应用，例如SPA或者同构项目
3.2 Rollup 配置写一个 rollup.config.js代码语言：javascript复制import resolve from 'rollup-plugin-node-resolve';
import json from 'rollup-plugin-json';
import commonjs from "rollup-plugin-commonjs";
import babel from 'rollup-plugin-babel';
export default {
input: 'src/index.js',
format: 'iife',
output: {
file: 'dist/kdsk.min.js',
format: 'iife'
},
plugins: [
resolve(), //rollup-plugin-node-resolve 插件可以告诉 Rollup 如何查找外部模块
json(),
commonjs() //插件就是用来将 CommonJS 转换成 ES2015 模块的。
babel({
exclude: 'node_modules/**',
}), //需要创建 .babelrc文件编写规则
]
}
复制代码?打包后的文件支持的运行环境（format）
amd – 异步模块定义，用于像RequireJS这样的模块加载器cjs – CommonJS，适用于 Node 和 Browserify/Webpackiife – 一个自动执行的功能，适合作为
