本页二维码,扫一扫分享到朋友圈
朋友圈

javascript的api设计技巧


阅读172 评论0 赞 43返回首页    go 编程与技术  go javascript


前言

这里所指的api,其实就是一个给他人或者自己或者回调的函数和方法,主要说说在编写这样的方法时的一些原则和有效的处理方式。


参数的处理

首先,我们需要考虑到代码的鲁棒性,不能因为参数的错误就导致整个程序运行崩溃。我们需要对参数进行验证:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

//需要传入字符串

functionsetColor(color){

if(typeofcolor !=='string')return;

//todo

}

//需要传入对象

functionsetObj(obj){

if(typeofobj !=='object')return;

//todo

}

//不能为空

functionsetObj(obj){

if(obj ===undefined)return;

//todo

}

针对字符串,如果我们需要确保参数的类型为字符串或数字或布尔值,可以进行如下转化:

1

2

3

4

5

functioncastaway(some_string, some_integer, some_boolean){

some_string +="";

some_integer -=0;// parseInt(some_integer, 10) 更安全些

some_boolean = !!some_boolean;

}

其次,针对对象类型,我们需要确保方法内部访问该对象的某些属性时不会报错从而影响程序的政策进行,所以我们最好可以设置默认值,这一点我以jquery的extend方法为例:

1

2

3

4

5

6

7

8

9

10

11

12

functiongetTips(options){

options = $.extend({

obj:null,//jq对象,要在那个html标签上显示

str:"+1",//字符串,要显示的内容;也可以传一段html,如: "<b style='font-family:Microsoft YaHei;'>+1</b>"

startSize:"12px",//动画开始的文字大小

endSize:"30px",//动画结束的文字大小

interval:600,//动画时间间隔

color:"red",//文字颜色

callback:function(){ }//回调函数

}, options);

//todo

}

或者进行简单的处理:

1

options = options || {};


可扩展性

设计的方法最好具有可扩展性,就是说别人可以在不修改你的方法的基础上进行一定的添加改进。这里看一个例子:

1

2

3

4

functionset(selector, color){

document.querySelectroAll(selector).style.color = color;

document.querySelectroAll(selector).style.backgroundColor = color;

}

这个方法就没有扩展性,如果我现在需要多改变一个字体大小,就得修改set函数本身。但是随着set方法越来越复杂,其中的逻辑并不适合一直改来改去。我们进行如下修改:

1

2

3

4

5

6

functionset(selector, color){

varel =document.querySelectroAll(selector);

el.style.color = color;

el.style.backgroundColor = color;

returnel;

}

如果我们需要再设置字体的话,只需要用一个代理即可:

1

2

3

4

5

functionsetAgain(selector, color, px){

varel = set(selector, color)

el.style.fontSize = px;

returnel;

}

这样就实现了扩展。


处理异常

最后是对异常的处理,在有可能出错的位置进行相应的异常处理。

1

2

3

4

5

6

7

8

9

10

11

12

13

functionerror(a){

if(typeofa !=='string') {

console.error('param a must be type of string')

}

}

functionerror(){

try{

// todo

}catch(ex) {

console.wran(ex);

}

}


  上一篇:go 浏览器高性能滑动解决方案(javascript)
  下一篇:go jQuery面向对象的写法


评论


用QQ登录管理/创建网站 用微博登录管理/创建网站   发布于:11-19