JavaScript SDK 设计指南

本文转载自:众成翻译
译者:levon
链接:http://www.zcfy.cc/article/530
原文:http://sdk-design.js.org/

介绍

本文介绍如何对开发 JavaScript 网页应用设计SDK,适用于桌面端,移动端,不同平台,不同浏览器。对于JavaScript实现的非网页应用(硬件,嵌入式,node/io js)场景则不适用,这些场景会在未来介绍。

由于我没有找到比较好的 JavaScript SDK文档,所以把我的个人经验做了整理和记录。JavaScript-SDK-设计 不仅仅介绍SDK,还包括用户和浏览器的关系。写的越多,想的越多,就开始关注不同平台,不同浏览器之间的性能和差异。

你可以自由编辑这篇文章,也可以把建议写到issue list。

什么是SDK

SDK是软件开发工具包 的缩写,是能够让编程者开发出应用程序的软件包。一般SDK包括一个或多个API、开发工具集和说明文档。

设计哲学

SDK设计成什么样子取决于SDK用途,但是必须要原生简短执行迅速代码干净易读可测试

不应该使用Livescript, Coffeescript, Typescript这类寄生语言,这种语言的原理是把代码编译成JavaScript语言再执行。JavaScript的原生实现执行速度更快。

尽量不要使用jQuery,而应该使用轻量的类库代替。如果是DOM操作可以使用zepto.js 。如果要发HTTP ajax请求 使用window.fetch 。

SDK版本一旦发布,要保证可以兼容旧版本并且要能被将来的版本兼容。所以要给SDK写文档 、写注释、做单元测试和情景测试。

范围

基于文章:第三方JavaScript

哪些情况你应该设计SDK?

1. 嵌入的widgets - 在第三方网页上嵌入的交互应用(Disqus, Google Maps, Facebook Widget)

2. 分析和度量 - 收集用户信息,了解访客和网站交互的方式 (GA, Flurry, Mixpanel)。

3. 封装网络服务 - 开发调用外部网站服务的客户端应用. (Facebook Graph API)

哪些情况应该使用SDK 一个建议 。

SDK内容

应该使用异步语法来加载脚本。

应该改善用户体验,SDK类库不应该影响主页面的加载。

异步语法

<script>
  (function () {
    var s = document.createElement('script');
    s.type = 'text/javascript';
    s.async = true;
    s.src = 'http://xxx.com/sdk.js';
    var x = document.getElementsByTagName('script')[0];
    x.parentNode.insertBefore(s, x);
  })();
script>

针对现代浏览器,可以使用async

<script async src="http://xxx.com/sdk.js">script>

传统语法

<script type="text/javascript" src="http://xxx.com/sdk.js">script>

比较

下列图标表示异步语法和同步语法的差别。

异步:

 |----A-----|
    |-----B-----------|
        |-------C------|

同步:

|----A-----||-----B-----------||-------C------|

JavaScript 异步执行和延迟执行

https://developers.google.com/speed/docs/insights/BlockingJS

应该避免代码块,或者缩小代码块的规模,特别是外部代码。渲染页面不可或缺的代码应该内联,内联代码应该简短并且执行速度要快。不是初始化必须的代码应该异步或延迟执行。

异步的问题

如果异步加载,不能像下列代码一样调用SDK。


                    
                    

你可能感兴趣的:(JavaScript)