深入浅析JavaScript的API设计原则资源-CSDN文库

173 浏览量 2020-10-22 03:19:20 上传评论收藏 109KB PDF 举报

资源推荐

资源详情

资源评论

深入浅析深入浅析JavaScript的的API设计原则设计原则

主要介绍了JavaScript的API设计原则，包括接口的流畅性，一致性，参数的处理，可扩展性，对错误的处理，

可预见性，注释和文档的可读性，本文介绍的非常详细，具有参考借鉴价值，感兴趣的朋友一起学习吧

一、接口的流畅性一、接口的流畅性

好的接口是流畅易懂的，他主要体现如下几个方面：

1.简单简单

操作某个元素的css属性，下面是原生的方法:

document.querySelectorAll('#id').style.color = 'red';

封装之后

function a(selector, color) {

document.querySelectorAll(selector)[].style.color = color

}

a('#a', 'red');

从几十个字母长长的一行到简简单单的一个函数调用，体现了api简单易用

2.可阅读性可阅读性

a('#a', 'red')是个好函数，帮助我们简单实用地改变某个元素，但问题来了，如果第一次使用改函数的人来说会比较困惑，a函

数是啥函数，没有人告诉他。开发接口有必要知道一点，人都是懒惰的，从颜色赋值这个函数来说，虽然少写了代码，但是增

加了记忆成本。每次做这件事情的时候都需要有映射关系。 a---->color. 如果是简单的几个无所谓，但是通常一套框架都有几

十甚至上百的api，映射成本增加会使得程序员哥哥崩溃。我们需要的就是使得接口有意义，下面我们改写一下a函数：

function letSomeElementChangeColor(selector, color) {

document.querySelectorAll(selector, color);

}

letSomeElementChangeColor相对于a来说被赋予了语言意义，任何人都会知道它的意义

3.减少记忆成本减少记忆成本

我们刚刚的函数也是这样的它太长了letSomeElementChangeColor虽然减少了映射成本，但是增加了记忆成本。要知道，包

括学霸在内，任何人都不喜欢被单词。原生获取dom的api也同样有这个问题 document.getElementsByClassName；

document.getElementsByName; document.querySelectorAll;这些api给人的感觉就是单词太长了，虽然他给出的意义是很清

晰，然而这种做法是建立在牺牲简易性的基础上进行的。于是我们又再次改写这个之前函数

function setColor(selector, color) {

xxxxxxxxxxxx

}

在意义不做大的变化前提下，缩减函数名称。使得它易读易记易用；

4.可延伸可延伸

所谓延伸就是指函数的使用像流水一样按照书写的顺序执行形成执行链条:

document.getElementById('id').style.color = 'red';

document.getElementById('id').style.fontSize = 'px';

document.getElementById('id').style.backgourdColor = 'pink';

用我们之前的之前的方法是再次封装两个函数 setFontSize, setbackgroundColor; 然后执行它们 setColor('id',

'red');setFontSiez('id', '12px'); setbackgroundColor('id', 'pink'); 显然，这样的做法没有懒出境界来；id元素每次都需要重新获

取，影响性能，失败；每次都需要添加新的方法失败每次还要调用这些方法，还是失败。下面我们将其改写为可以延伸的函

数首先将获取id方法封装成对象,然后再对象的每个方法中返回这个对象：

function getElement(selector) {

this.style = document.querySelecotrAll(selector).style;

}

getElement.prototype.color = function(color) {

this.style.color = color;

return this;

}

getElement.prototype.background = function(bg) {

this.style.backgroundColor = color;

return this;

}

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余3页未读，立即下载

内容反馈

weixin_38558623

粉丝: 4
资源: 930

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈

feedback-tip