宝哥软件园

关于JavaScript API设计的一些建议和指南

编辑:宝哥软件园 来源:互联网 时间:2021-09-09

设计是一个非常常见的概念,通常可以理解为预先为要做的事情形成一个计划或框架。在牛津英语词典中,设计是编织艺术、系统、硬件或更多的主线。软件设计,尤其是API设计作为软件设计的子类,是一样的。然而,API设计通常很少关注软件开发,因为为其他程序员编写代码不如应用程序UI设计和最终用户体验重要。

但是API设计作为我们自己的库提供的公共接口,可以向调用我们代码的开发者展示我们库的一些特性和功能,所以API设计和UI设计一样重要。事实上,这两者都是应用程序提供更好用户体验的基本方式。应用UI在用户UX中扮演着重要角色,应用API的开发者是UX。因此,应用程序接口设计应该得到与我们为用户提供的接口相同的考虑和关注。就像我们关注UI的功效、简洁、优雅一样,也要评价API的功效、简洁、优雅!

API Design ——javascript API设计是所有开发人员面临的唯一挑战,无论您是开发公共库还是内部库。javascript的动态性、库用户的匿名性和需求的模糊性都给API设计者带来了巨大的挑战。然而,好的API设计没有捷径可走,但是可以从一些流行的javascript库中提取一些设计标准!

API设计:天使与恶魔的斗争

javascript API中糟糕的设计会给使用你的API和你的开发人员带来很高的成本。设计不好会导致浪费。使用你的API的开发人员会浪费时间试图理解你的接口,而API开发人员会浪费时间处理不断增加的需求和解决用户的困惑。然而,当几乎所有的应用编程接口都被开发出来时,它们被设计成提取相同的函数,使得调用变得容易并节省时间。但是设计糟糕的API会让你的库用户对你感到好奇。这些库真的能节省时间吗?

优秀的API设计,一方面达到了抽取的目的,同时实现了自我描述。当一个API设计好了,用户就可以快速直观地完成工作,而不需要不断地使用文档,不需要不断地访问支持或回答网站。您还可以通过封装一些开发人员需要花费大量时间开发的特性来节省库开发人员的时间。好的设计不仅能节省开发人员的时间,还能让他们看起来更聪明、更负责。帮助你的用户看起来聪明能干,会让你看起来更好!

对于javascript来说,API设计尤为重要

无论什么编程语言或者框架,API设计都很重要,API设计的重要性比很多其他语言的javascript都要高。首先,作为一种动态的后期绑定语言,javascript没有编译器来实现安全网或者检查单元功能,所以javascript无法在你的代码中发现错误。林挺或者像JSLint和JSHint这样的检查框架可以帮助我们。这些框架的功能可以指出javascript中的一些常见错误,但是当我们使用API时,它们找不到javascript错误。

这一切都取决于你。你可以用好的设计开发一个应用编程接口。这个API可以帮助你的用户掉进众所周知的“成功坑”,这意味着你的库对于开发者来说是舒适和熟悉的,它也在开发者与你的代码交互时提供了积极的强化和信心。

“掉进成功的坑”最好的例子就是jQuery通过CSS选择器语法获得DOM元素的应用。例如,如果我想获取所有带有类名的文章元素,我可以使用jQuery来实现:

$('article.blogPost ')。fadeIn();选择器文章. blogPost使用如下所示的完全相同的语法绝非偶然!

article . BlogPost { border-radius : 10px;背景-color:鲑鱼;box-shadow : 0px 0px 10px 2px # CCC;}jQuery的选择器引擎旨在使我和其他开发人员能够使我对CSS选择器的理解与其引擎进行交互。因此,可以想象,如果jQuery要求我使用为特定目的而形成的新语法,我将失去速度、独特性和效率。

我们可以从这些框架中获得灵感,比如jQuery,或者其他框架,并将这些灵感应用到我们的设计中。然而,获得灵感并不是抄袭。有一个问题。任何一个设计过API的人都会继承,不管是好是坏,如果只是基于别人的想法。如果我们把在好的javascript中获得的指导方针应用到其他领域,我们就可以开发出一个具有好的API的框架,这些API设计在任何情况下都可以应用。

优秀的Javascript APIs设计技巧

尽管软件没有类似于绘画或架构的视觉评价标准,但我们仍然倾向于使用类似于物理实体的形容词来描述软件质量。例如,用“优雅”和“漂亮”来赞美软件并不少见。如果用类似于物理实体的形容词来描述软件接口是合理的,那么同样的原则也可以用来评价软件设计。

在本节中,四个流行的设计原则从艺术领域扩展到应用编程接口设计:

和谐、一致、平衡、对称和强调。对于每个原则,将列出一个或多个示例来说明流行的Javascript库API设计如何遵循这些原则。

原则1:一致性和协调性

在一件艺术作品中,一致性是作品背后不可或缺的概念,或者说是设计师如何将一些东西变成一个连贯的整体。而协调则是作品中相似元素的布局,在考虑整体时会产生一种简单的感觉。

对于API设计者来说,这些原则可以通过在类库中使用相似和/或统一的元素来实现。以剑道UI为例,这是一个用于创建丰富web应用程序的javascript框架。剑道UI提供了一系列UI控件和工具,可以通过简单的语法进行初始化。例如,如果我想从一个无序列表创建一个TreeView,我只需要调用下面的方法:

$('ul.tree ')。kendoTreeView({ /*配置在这里*/});2015624141513720.png  (634294)

剑道UI树组件

如果我想从列表中创建一个panel PanelBar,我只需要将其更改为不同的调用方法。

$('ul.panel ')。kendoPanelBar({ /*配置在这里*/});2015624141539614.png  (634402)

剑道用户界面面板组件

Kendo UI对所有组件使用一致的kendoX语法,以促进整体协调。更重要的是,这种设计依靠jQuery对象为DOM元素封装一个统一的层,这使得这种设计对所有熟悉jQuery的开发人员都是有益的。数百万开发人员使用类似的“原生语言”(jQuery语法),Kendo UI可以跨库流畅使用。

另一个协调的例子是主干的[对象]。扩展语法创建对象,继承和扩展主干模型、视图、集合和路由器的功能。您可以在Backbone的完全支持下创建一个Backbone模型,还可以自定义我需要的功能:

var Book=主干。model . extend({ initialize : function()}.},author:函数(){ 0.},pubDate:函数(){ 0.},});统一协调的目的是让API新手感到熟悉和舒适。虽然功能不同,但语法相同或相似,这使得API变得熟悉,大大减轻了开发人员使用新工具的负担。

原则2:平衡

下一个原则是平衡。在组织元素时,一个部分不会太重而覆盖其他部分,使用时会不稳定。在艺术作品中,平衡是视觉上的重量。即使是不对称的,不对称下的平衡仍然可以感觉到,因为它遵循一定的模式。API设计在上下文中的平衡,我指的是代码的视觉权重和可预测性(参见函数)。

平衡的API让人觉得它的组件是属于彼此的,它们的行为是相同的或者是相辅相成的,以达到一个目的。通过扩展,API也可以感觉到平衡,这允许开发人员简单地预测其他API并使用它们。例如,Modernizr的属性测试在两个方面是平衡的:a)属性名称对应HTML5和CSS术语以及API名称;b)每个属性测试统一返回真值或假值。

//对于给定的浏览器,所有这些属性将为“真”或“假”

2015624141604498.png  (634267)

访问单个属性来告诉开发人员他们需要知道的相关属性,这样他们就可以通过它访问所有其他属性。高质量应用编程接口的优势在于其简单性。Balance还确保我编写的代码和与Modernizr交互的代码在每次读写时都具有相同的视觉权重。当我使用和访问API时,如何看起来和感觉一样,不考虑我的约定。另一方面,如果Modernizr增加了polyfill Canvas的API,不仅类库的视觉权重会受到新API的影响,Modernizr的范围和使用也会大大扩大,我与API交互的可预测性也会受到限制。

实现平衡的另一种方法是通过依赖开发人员对概念的熟悉程度来获得可预测的结果。一个典型的例子是jquery的选择器语法,它将css1-3的选择器映射到自己的DOM选择器引擎:

$(' # grid ')//selections by ID $(' ul . nav Li ')//类为' nav ' $(' ul Li : th-child(2)')的ul的所有LiS//每个列表中的第二项jquery通过使用一个熟悉的概念并将其映射到自己的类库来避免新的选择器语法,同事们还为新用户创建了一种机制,通过可预测的API将类库快速应用于生产。

原则3:相称性

下一个原则是比例原则,用来衡量作品中元素的大小和数量。一个好的api不是一个小的API,相称性是相对于目的的大小。一种相称的原料药,其原料药表面与其能力范围相匹配。

例如,一个流行的日期转换和格式化类库Moment.js可以被认为是相称的,因为它的API表面是紧凑的,并且它显然与类库的目的相匹配。矩. js用来处理日期,它的API提供了方便的函数来处理javascript Date对象:

力矩()。格式(' dddd ');力矩()。开始时间('小时')。fromNow();2015624141630224.png  (634270)

对于像Moment.js这样的目标类库,保持API的重点和简单是非常重要的。对于更大更广的类库,API的大小应该反映类库本身的能力。

以下划线为例,作为一个多用途的库,它提供了很多方便的函数,旨在帮助开发人员处理javascript集、数组、函数和对象。它的API容量远远超过了Moment.js这样的库,但是下划线也是成正比的,因为库中的每个函数都有自己的功效目的。考虑下面的例子。前两个示例使用下划线处理数组,最后一个示例处理字符串。

_.每(['Todd ',' Burke ','吴镇男'],函数(名称){ alert(名称);});_.map([1,2,3],function(num){ return num * 3;});_.is number(' ten ');//假2015624141653770.png  (634272)

当一个图书馆逐渐发展壮大,维持这个比例的挑战就变得更加严峻。为了确保添加到库中的每个功能和功能都能增强库的用途,需要更多的考虑。对于像剑道UI这样的大型库,可扩展性的目的并不意味着我们需要向库中添加每一个特性。对于剑道这样大的图书馆来说,功能性的物品和特征在被纳入图书馆之前应该证明它们的价值。例如,剑道UI的JavaScript基于DataSource,可以用来查询和处理远程数据。

var data source=new kendo . data . data source({ transports : { read : { URL : ' http://search . Twitter.com/search . JSON ',dataType: 'jsonp ',data : { q : ' API Design ' } } } },schema : { data : ' results ' });乍一看,它似乎是一个习惯了它的数据源,感觉超出了库本身的基本目的。然而,如今的网站装修需要动态数据的支持。数据源的引入,让剑道UI可以使用稳定舒适的范式,解决整个库内的远程数据。

将一个API变成一个真正的javascript垃圾抽屉对于库的扩展来说是危险的,但对于库来说这并不是唯一的危险。陷入一个不允许你的API随库增长的陷阱,或者因为一些人为的原因限制库的大小,也是很危险的!

不处理API增长的最好例子是jQuery或jQuery的$函数。和我一样,成千上万的开发者喜欢jQurey,但是它的门户方法有点乱。从DOM选择到在jQuery对象中包含DOM元素,该方法提供了11种以上独立的重载选择方法。

在很大程度上,一些不太相关的特性被塞进了同一个应用编程接口。总的来说,jQuery是一个大型的库,可以认为是一个合理的库比例。另一方面,当我们试图在不考虑库比的情况下将一个函数塞进单个接口时,jQuery方法也可以实现这样的功能。

如果你发现你是在把一个不相关的特性强加到一个现有的方法中,或者试图合理化一个不适合API的函数的添加,你需要做的改变是松开腰带,让库呼吸。当您的用户调用一个可以描述名称本身的新函数时,它将节省更多的时间,并且不会给另一个现有的方法增加负担。

原则4:强调

在艺术作品中,强调的是利用对比,使作品的某一方面脱颖而出,形成焦点。在许多API中,焦点可能是通道的锚点或类库的主要方法。强调的另一个例子可以参考“link”或fluent API,通过增加强调效果来突出类库的中心对象。Jquery倾向于从许多功能演示中强调这个对象:

$('ul.first ')。查找('。逾期”)。css('背景色','红色')。end()。查找('。到期-很快')。css('背景色','黄色');对于许多现代类库,另一个强调的例子是可扩展性:类库创建者没有提供的部分将为您提供一个工具,您可以自己完成相关的扩展。

一个典型的例子可以参考jQuery的sfn(发音为“Effin”)命名空间,通用扩展点可以由无数的插件和补充类库来完成。

(function($){ $ . fn . kittehfy=function(){ return this . each(function(idx,El)){ var width=El . width,height=el.heightvar src=' http://place kitten.com/';el.src=src宽度'/高度;});};})(jQuery);可扩展性的另一个例子是主干的“扩展”功能,我们在本文中已经看到了。

var DocumentRow=主干。View.extend({ tagName: 'li ',className: 'row ',events: { ' click。icon': 'open ',' click . button . edit ' : ' openEditDialog ' },render : function(){ 0.}});

2015624141715183.png  (634258)

扩展性是一个重要的方面,因为它让我们意识到现有的类库并不意味着一切都是完美的,并鼓励我们扩展适合自己的类库。当类库支持扩展时,它们不仅开辟了新的用途,而且使无数开发人员从通用中受益。最好的例子之一是主干框架。提线木偶,一个扩展到主干的类库,其目标是“简化大型javascript应用程序的结构”。如果不是像主干网这样的类库的扩展,像提线木偶这样的类库将变得非常复杂,甚至无法实现。

API设计:不仅针对库代码编写人员

如果您不是JavaScript库编写人员,而是JavaScript应用程序开发人员或库实现人员,您可能会认为本文中的原则不适用于您。毕竟,当我们大多数人听到“API”时,我们通常会想到第三方库,就像我在本文中的例子一样

事实是,按照API的定义,它只不过是一个向其他人提供隔离功能的接口。现在我用一句老话强调一个非常重要的点:模块化JS代码是为了实用性而写的,使用的次数并不重要。

就像本文中引用的类库一样,您可以向其他人公开您的javascript代码。即使你的代码的用户是一小部分或者内部团队——,即使你构建了一个私有的类库——,你也不用作为一个公共类库的作者去考虑API设计原则和这些原则的实现。使用API设计的好处是,即使只针对一个用户,也应该像百万用户一样设计。

因为API的设计代表了开发人员的用户体验,所以它与最终用户的UI设计一样重要。就像我们可以通过学习一些原理,参考一些好的或者不好的例子来开发优秀的UI一样,我们也可以通过同样的方式来学习更好的API设计。应用本文提到的四个原则,以及您自己发现的其他原则,可以帮助您构建一个优秀的API,并给用户带来良好的体验。

更多资讯
游戏推荐
更多+