前言
本篇博文来自一次公司内部的前端分享，从多个方面讨论了在设计接口时的原则，总共包含了七个大块。系卤煮自己总结的一些经验教训。同时也参考了一些文章，地址会在后面贴出来。很难做到详尽充实，如果有好的建议或者不对的地方，还望不吝赐教斧正。
一、接口的流畅性
好的接口是流畅易懂的，他主要体现如下几个方面：
1.简单
操作某个元素的css属性，下面是原生的方法:
|
1 |
document.querySelectorAll('#id').style.color = 'red'; |
封装之后
|
1 2 3 4 |
function a(selector, color) { document.querySelectorAll(selector)[0].style.color = color } a('#a', 'red'); |
从几十个字母长长的一行到简简单单的一个函数调用，体现了api简单易用
2.可阅读性
a(‘#a’, ‘red’)是个好函数，帮助我们简单实用地改变某个元素，但问题来了，如果第一次使用改函数的人来说会比较困惑，a函数是啥函数，没有人告诉他。开发接口有必要知道一点，人都是懒惰的，从颜色赋值这个函数来说，虽然少写了代码，但是增加了记忆成本。每次做这件事情的时候都需要有映射关系。 a—->color. 如果是简单的几个无所谓，但是通常一套框架都有几十甚至上百的api，映射成本增加会使得程序员哥哥崩溃。 我们需要的就是使得接口有意义，下面我们改写一下a函数：
|
1 2 3 |
function letSomeElementChangeColor(selector, color) { document.querySelectorAll(selector, color); } |
letSomeElementChangeColor相对于a来说被赋予了语言意义，任何人都会知道它的意义
3.减少记忆成本
我们刚刚的函数也是这样的它太长了letSomeElementChangeColor虽然减少了映射成本，但是增加了记忆成本。要知道，包括学霸在内，任何人都不喜欢被单词。原生获取dom的api也同样有这个问题 document.getElementsByClassName； document.getElementsByName; document.querySelectorAll;这些api给人的感觉就是单词太长了，虽然他给出的意义是很清晰，然而这种做法是建立在牺牲简易性的基础上进行的。于是我们又再次改写这个之前函数
|
1 2 3 |
function setColor(selector, color) { xxxxxxxxxxxx } |
在意义不做大的变化前提下，缩减函数名称。使得它易读易记易用；
4.可延伸
所谓延伸就是指函数的使用像流水一样按照书写的顺序执行形成执行链条:
|
1 2 3 |
document.getElementById('id').style.color = 'red'; document.getElementById('id').style.fontSize = '12px'; document.getElementById('id').style.backgourdColor = 'pink'; |
用我们之前的之前的方法是再次封装两个函数 setFontSize, setbackgroundColor; 然后执行它们 setColor(‘id’, ‘red’);setFontSiez(‘id’, ’12px’); setbackgroundColor(‘id’, ‘pink’); 显然，这样的做法没有懒出境界来；id元素每次都需要重新获取，影响性能，失败；每次都需要添加新的方法 失败 每次还要调用这些方法，还是失败。下面我们将其改写为可以延伸的函数 首先将获取id方法封装成对象,然后再对象的每个方法中返回这个对象：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
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; } getElement.prototype.fontSize = function(size) { this.style.fontSize = size; return this; } //调用 var el = new getElement('#id') el.color('red').background('pink').fontSize('12px'); |
简单、流畅、易读后面我们会在参数里面讲到如何继续优化。所以，大家都比较喜欢用jquery的api，虽然一个$符号并不代表任何现实意义，但简单的符号有利于我们的使用。它体现了以上的多种原则，简单，易读，易记，链式写法，多参处理。
nightmare:
