本文转载自:众成翻译
译者: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包括一个或多个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类库不应该影响主页面的加载。
<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。