您好,欢迎访问一九零五行业门户网

JavaScript API 设计原则 - 1565783227

网+线下沙龙 | 移动app模式创新:给你一个做app的理由>>
好的 api 设计:在自描述的同时,达到抽象的目标。
设计良好的 api ,开发者可以快速上手,没必要经常抱着手册和文档,也没必要频繁光顾技术支持社区。
流畅的接口
方法链:流畅易读,更易理解
//常见的 api 调用方式:改变一些颜色,添加事件监听 var elem = document.getelementbyid(foobar); elem.style.background = red; elem.style.color = green; elem.addeventlistener('click', function(event) {   alert(hello world!); }, true);  //(设想的)方法链 api domhelper.getelementbyid('foobar')   .setstyle(background, red)   .setstyle(color, green)   .addevent(click, function(event) {     alert(hello world);   }); 设置和获取操作,可以合二为一;方法越多,文档可能越难写
var $elem = jquery(#foobar);  //setter $elem.setcss(background, green); //getter $elem.getcss(color) === red;  //getter, setter 合二为一 $elem.css(background, green); $elem.css(color) === red; 一致性
相关的接口保持一致的风格,一整套 api 如果传递一种熟悉和舒适的感觉,会大大减轻开发者对新工具的适应性。
命名这点事:既要短,又要自描述,最重要的是保持一致性
“there are only two hard problems in computer science: cache-invalidation and naming things.”
“在计算机科学界只有两件头疼的事:缓存失效和命名问题”
— phil karlton
选择一个你喜欢的措辞,然后持续使用。选择一种风格,然后保持这种风格。
处理参数
需要考虑大家如何使用你提供的方法,是否会重复调用?为何会重复调用?你的 api 如何帮助开发者减少重复的调用?
接收map映射参数,回调或者序列化的属性名,不仅让你的 api 更干净,而且使用起来更舒服、高效。
jquery 的 css() 方法可以给 dom 元素设置样式:
jquery(#some-selector)   .css(background, red)   .css(color, white)   .css(font-weight, bold)   .css(padding, 10); 这个方法可以接受一个 json 对象:
jquery(#some-selector).css({   background : red,   color : white,   font-weight : bold,   padding : 10 });  //通过传一个 map 映射绑定事件 jquery(#some-selector).on({   click : myclickhandler,   keyup : mykeyuphandler,   change : mychangehandler });  //为多个事件绑定同一个处理函数 jquery(#some-selector).on(click keyup change, myeventhandler); 处理类型
定义方法的时候,需要决定它可以接收什么样的参数。我们不清楚人们如何使用我们的代码,但可以更有远见,考虑支持哪些参数类型。
//原来的代码 dateinterval.prototype.days = function(start, end) {   return math.floor((end - start) / 86400000); };  //修改后的代码 dateinterval.prototype.days = function(start, end) {   if (!(start instanceof date)) {     start = new date(start);   }   if (!(end instanceof date)) {     end = new date(end);   }    return math.floor((end.gettime() - start.gettime()) / 86400000); }; 加了短短的6行代码,我们的方法强大到可以接收 date 对象,数字的时间戳,甚至像 sat sep 08 2012 15:34:35 gmt+0200 (cest) 这样的字符串
如果你需要确保传入的参数类型(字符串,数字,布尔),可以这样转换:
function castaway(some_string, some_integer, some_boolean) {   some_string += ;   some_integer += 0; // parseint(some_integer, 10) 更安全些   some_boolean = !!some_boolean; } 处理 undefined
为了使你的 api 更健壮,需要鉴别是否真正的 undefined 值被传递进来,可以检查 arguments 对象:
function testundefined(expecting, someargument) {   if (someargument === undefined) {     console.log(someargument 是 undefined);   }   if (arguments.length > 1) {     console.log(然而它实际是传进来的);   } }  testundefined(foo); // 结果: someargument 是 undefined testundefined(foo, undefined); // 结果:  someargument 是 undefined , 然而它实际是传进来的 给参数命名
event.initmouseevent(   click, true, true, window,   123, 101, 202, 101, 202,   true, false, false, false,   1, null); event.initmouseevent 这个方法简直丧心病狂,不看文档的话,谁能说出每个参数是什么意思?
给每个参数起个名字,赋个默认值,可好
event.initmouseevent(   type=click,   canbubble=true,   cancelable=true,   view=window,   detail=123,   screenx=101,   screeny=202,   clientx=101,   clienty=202,   ctrlkey=true,   altkey=false,   shiftkey=false,   metakey=false,   button=1,   relatedtarget=null); es6, 或者 harmony 就有 默认参数值 和 rest 参数 了。
参数接收 json 对象
与其接收一堆参数,不如接收一个 json 对象:
function nightmare(accepts, async, beforesend, cache, complete, /* 等28个参数 */) {   if (accepts === text) {     // 准备接收纯文本   } }  function dream(options) {   options = options || {};   if (options.accepts === text) {     // 准备接收纯文本   } } 调用起来也更简单了:
nightmare(text, true, undefined, false, undefined, /* 等28个参数 */);  dream({   accepts: text,   async: true,   cache: false }); 参数默认值
参数最好有默认值,通过 jquery.extend() http://underscorejs.org/#extend) 和 protoype 的 object.extend ,可以覆盖预设的默认值。
var default_options = {   accepts: text,   async: true,   beforesend: null,   cache: false,   complete: null,   // … };  function dream(options) {   var o = jquery.extend({}, default_options, options || {});   console.log(o.accepts); }  dream({ async: false }); // prints: text 扩展性
回调(callbacks)
通过回调, api 用户可以覆盖你的某一部分代码。把一些需要自定义的功能开放成可配置的回调函数,允许 api 用户轻松覆盖你的默认代码。
api 接口一旦接收回调,确保在文档中加以说明,并提供代码示例。
事件(events)
事件接口最好见名知意,可以自由选择事件名字,避免与原生事件 重名。
处理错误
不是所有的错误都对开发者调试代码有用:
// jquery 允许这么写 $(document.body).on('click', {});  // 点击时报错 //   typeerror: ((p.event.special[l.origtype] || {}).handle || l.handler).apply is not a function //   in jquery.min.js on line 3 这样的错误调试起来很痛苦,不要浪费开发者的时间,直接告诉他们犯了什么错:
if (object.prototype.tostring.call(callback) !== '[object function]') { // 看备注   throw new typeerror(callback is not a function!); }     备注:typeof callback === function 在老的浏览器上会有问题,object 会当成个 function 。 可预测性
好的 api 具有可预测性,开发者可以根据例子推断它的用法。
modernizr’s 特性检测 是个例子:
a) 它使用的属性名完全与 html5、css 概念和 api 相匹配
b) 每一个单独的检测一致地返回 true 或 false 值
// 所有这些属性都返回 'true' 或 'false' modernizr.geolocation modernizr.localstorage modernizr.webworkers modernizr.canvas modernizr.borderradius modernizr.boxshadow modernizr.flexbox 依赖于开发者已熟悉的概念也可以达到可预测的目的。
jquery’s 选择器语法 就是一个显著的例子,css1-css3 的选择器可直接用于它的 dom 选择器引擎。
$(#grid) // selects by id $(ul.nav > li) // all lis for the ul with class nav $(ul li:nth-child(2)) // second item in each list 比例协调
好的 api 并不一定是小的 api,api 的体积大小要跟它的功能相称。
比如 moment.js ,著名的日期解析和格式化的库,可以称之为均衡,它的 api 既简洁又功能明确。
像 moment.js 这样特定功能的库,确保 api 的专注和小巧非常重要。
编写 api 文档
软件开发最艰难的任务之一是写文档,实际上每个人都恨写文档,怨声载道的是没有一个好用的文档工具。
以下是一些文档自动生成工具:
yuidoc (requires node.js, npm)
jsdoc toolkit (requires node.js, npm)
markdox (requires node.js, npm)
dox (requires node.js, npm)
docco (requires node.js, python, coffeescript)
jsduck (reqires ruby, gem)
jsdoc 3 (requires java)
其它类似信息

推荐信息