媒介

尽量地保持代码风格和定名风格，使人读你的代码像是浏览同一小我写的文┞仿一样。

本篇博文来自一次公司内部的前端分享，大年夜多个方面评论辩论了在设计接口时的原则，总共包含了七个大年夜块。系卤煮本身总结的一些经验教训。同时也参考了一些文┞仿，地址会在后面贴出来。很难做到详尽充分，如不雅有好的建议或者纰谬的处所，还望不吝赐教示正。

一、接口的流畅性

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

1.简单

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

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

封装之后

function a(selector, color) { 
 
  document.querySelectorAll(selector)[0].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 
 
}  

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

//nighware 
 
function set(selector, color) { 
 
  document.getElementById(selector).style.color = color; 
 
} 
 
//dream 
 
zepto.init = function(selector, context) { 
 
  var dom 
 
  // If nothing given, return an empty Zepto collection 
 
  if (!selector) return zepto.Z() 
 
  // Optimize for string selectors 
 
  else if (typeof selector == 'string'	
			
 1/7    1 2 3 4 5 6 下一页 尾页
	
			

　　推荐阅读
　　智慧城市发展路径应分级分类
            
            智能泊车、长途智能抄表、智能路灯杆、智能井盖……聪明城市扶植正在为我们的生活带来各类便利。聪明城市也成为当前热议的话题。6月8日,第二十届中国北京国际科技家当博览会同>>>详细阅读


本文标题：JavaScript的API设计原则
地址：http://www.17bianji.com/lsqh/35828.html
 1/2    1