专栏首页前端那些趣事前端JS-SDK那些事

前端JS-SDK那些事

对于前端而言,SDK其实指的是什么? 是API接口的集合还是只是一段代码调用 我的理解是SDK是针对某个平台、某个系统、或者某个软件所特定的开发工具集成,可以是包含多个API也可以只是一个编程工具

1.SDK类型

一个应用的JS-SDK大概可以分为以下三种

  • Web的API集合(类似微信官方的js-sdk工具)
  • 分析与统计工具(类似百度统计的js-sdk工具)
  • 嵌入式类如Widget

2.如何设计

通过开发一个KSDK(JS-SDK),根据当前浏览器环境或者手动匹配,来识别调用的第三方SDK(钉钉、企业微信、云之家)

2.1 开发文档目录

2.2 设计模式

常见的JS设计模式主要有以下几种

  • 单例模式:一个类只返回一个实例,一旦创建再次调用就直接返回( 如第三方库jQuery,lodash,moment等)
  • 构造函数模式
  • 混合模式: 原型模式 + 构造函数模式
  • 工厂模式
  • 发布订阅模式

由于抽象工厂模式适用系统中有多个产品类簇的前提,而每次只使用其中某一产品类簇的情况,比较适合通过使用抽象工厂设计模式来封装KSDK

抽象工厂设计模不直接生成实例,而是用于对产品类簇的创建。SDK使用不同的第三方JS-SDK进行注册的,如:钉钉,企业微信,云之家等。那么这三类工具就是对应的类簇。在抽象工厂中,它其实是由几种子类型组成的,当创建SDK类实例时候,它先判断一下应该用哪个子类,然后创建该子类的实例返回给你

//工厂设计模式

 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属性,脚本获取与执行都是同步进行,页面会被阻塞,浏览器都会按照<script>元素在页面中出现的先后顺序对他们依次进行解析加载
  • 异步模式:<script>标签打开defer或async属性,脚本就会异步加载。渲染引擎执行后就会开始下载外部脚本,但不会等它下载和执行完成,而是直接执行后面的命令。
  • defer与async的区别 : defer 是“渲染完再执行”,async 是“下载完就执行" async和defer不同之处是async加载完成后会自动执行脚本,defer加载完成后需要等待页面也加载完成才会执行代码
 function initScript(src, params = {}, fn) {
    const script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = src;
    if (script.addEventListener) {
      script.addEventListener('load', function () {
        fn();
      }, false);
    }
    document.head.appendChild(script);
  }
复制代码

KSDK 构造函数,支持传入类型后识别应该用哪个子类,然后异步加载第三方SDK的JS文件,加载成功最后通过原型链继承,完成初始化。

 (function () {
 
  'use strict';
  //获取手动配置类型
const scriptDOM = document.getElementsByTagName("script"), [scriptDetail] = scriptDOM, URL = scriptDetail.src,
  type = URL.match(new RegExp("(?:\\?|&)" + 'type' + "=(.*?)(?=&|$)"))[1], domain = document.domain;

//集成工具对象
function KSDK() {
  this.domain = domain;
  this.ready = function (fn) {
    //动态加载
    const that = this;
    let sdkFac;
    try {
      sdkFac = SDKFactory(type || this.domain);
    } catch (e) {
      console.log('不支持该类型的SDK')
    }
    if (sdkFac) {
      initScript(sdkFac.jsApi, {
        async: true,
        defer: true,
      }, function () {
        that.__proto__ = sdkFac;
        that.init(function () {
          fn();
        });
      });
    }
  };
}
    
   window.ksdk = new KSDK();
   
 })(window);

复制代码

2.3 如何使用

引入SDK

<script src="kdsk.min.js?type=DINGDING"></script>
<script type="text/javascript">
  window.ksdk.ready(function () {
    window.ksdk.getVersion(function () {

    })
  })
</script>
复制代码

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 Rollup

rollup比较适合打包js的sdk或者封装的框架,对比大家熟悉的webpack,比较适合打包一些应用,例如SPA或者同构项目

3.2 Rollup 配置

  • 写一个 rollup.config.js
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/Webpack
  • iife – 一个自动执行的功能,适合作为<script>标签
  • umd – 通用模块定义,以amd,cjs 和 iife 为一体

这里目前只支持script引入,采用了 iife (即立即执行函数表达式模式)格式打包 ,这个模式下打包会在函数作用域添加闭包,避免变量污染

(function () {
  
}());
复制代码

3.3 运行

rollup -c
复制代码

如有问题欢迎指出

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 前端路由那些事

    假设你浏览器访问的url地址是 http://127.0.0.1/#/test 那么通过 location.hash 获取的hash值为 #/test

    树酱
  • 前端单元测试那些事

    Jest 是 Facebook 开源的一款 JS 单元测试框架,它也是 React 目前使用的单元测试框架,目前vue官方也把它当作为单元测试框架官方推荐 。 ...

    树酱
  • 面试官问你关于node的那些事(进阶篇)

    当我们请求/user路由时,会依次输出树酱?来了和Hello World,接着浏览器端显示执行完毕,同理访问/user/tree则只会输出 树酱?来了,为啥呢?

    树酱
  • 前端学习之jQuery

    [1]   jQuery由美国人John Resig创建,至今已吸引了来自世界各地的众多 javascript高手加入其team。

    超蛋lhy
  • Vue_Vue权威指南

    Vue只是聚焦视图层,是一个构建数据驱动的Web界面的库。 Vue通过简单 API提供高效的数据绑定和灵活的组件系统

    前端博客 : alili.tech
  • python_day15_前端_jQue

    <1> jQuery由美国人John Resig创建,至今已吸引了来自世界各地的众多 javascript高手加入其team。

    py3study
  • webpack2 的 tree-shaking 好用吗?

    代码压缩的现状 下面是一个使用 react 的业务的代码依赖,但是实际上业务代码中并没有对依赖图中标识的模块,也就是说构建工具将不需要的代码打包到了最终的代码当...

    IMWeb前端团队
  • 原 模块化编程之require.js

    作者:汪娇娇 日期:2016.5.4 最早的时候,所有Javascript代码都写在一个文件里面,只要加载这一个文件就够了。后来,代码越来越多,一个文件不够了,...

    jojo
  • javascript模仿块级作用域

    模仿块级作用域 var somefunction=function(){ ///这里是块级作用域 } somefunction(); 在这里定义了一个函数,然后...

    wangxl
  • JavaScript函数及其prototype

    函数可以通过声明定义,也可以是一个表达式。 (1)函数声明式: 分号是用来分隔可执行JavaScript语句,由于函数声明不是一个可执行语句,所以不以分...

    奋飛

扫码关注云+社区

领取腾讯云代金券