jQuery最出色的是 API 设计

CHINGAgo

CHINGAgo

2016-02-20 01:10

下面请跟着图老师小编一起来了解下jQuery最出色的是 API 设计,精心挑选的内容希望大家喜欢,不要忘记点个赞哦!

jQuery 将马上发布 1.4 正式版,代码也从 googlecode 上迁移到了 github. jQuery 是我接触的第一个 JS 类库,俗话说初恋总是让人难以忘记。一年以前,这种难以忘记仅仅是一种纯感觉,说不出来具体原因。前几天重新看了一遍 github 上的源码。从纯功能上说,jQuery 并没有特别出色的地方。究竟是什么让我如此恋恋不舍呢?

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)

昨天搭建 taskspeed, 检查 jQuery 的测试代码时,突然明晓了一个也许大家都已知道的秘密:

jQuery 最出色最让人恋恋不舍的是它的 API 设计。

比如 dom-style 的 api, YUI3 和 MooTools 等框架采用的是传统方式:

el.setStyle(prop, val);el.getStyle(prop);el.setStyles({ propA: valA, propB: valB });el.getStyles(propA, propB); // MooTools 支持

在 jQuery 里,一个 css 方法全部搞定:

el.css(prop); // 表示 getStyleel.css(prop, val); // 表示 setStyleel.css({ propA: valA, propB, valB }); // 表示 setStylesel.css(prop, func); // func 是一个返回 val 值的函数

对比以上两种 API 设计,乍一看 jQuery 显得不那么标准。但从可记忆性和灵活性上讲,我觉得 jQuery 的设计都更人性化。jQuery 的 API 还符合学习上的渐进式思维:先学会最简单的情况el.css(prop), 再了解到还可以有两个参数,接着发现参数可以是 map, 更进一步发现 val 还可以是一个函数。func 参数甚至能带给学习者一种惊喜:居然还可以这样用!jQuery 把一种渐进和愉悦带进了学习和使用的过程中,实在漂亮!

YUI3 的 API 缺少这种乐趣。查询 jQuery 的 API, 会有一种探寻秘密的寻宝感觉。YUI 的文档查询则让人感觉就是份工作,有点 boring.

和 YUI2 相比,YUI3 的 API 做了些改变。在 YUI2 里,YAHOO.util.Dom 的方法名,严格以动词开头,虽然有些方法名长点,但总体规律性很强,可记忆性还不错。在 YUI3 里,则出现了 byId, elementByAxis 等方式命名的方法。纯粹为了省几个字符?这种不一致性很纳闷。还有一些以名词命名的方法:ancestor, docHeight, 乍一看很难以为是方法。

老婆说,要睡觉了,就不码字了。最后说一句:YUI3 的 API 整体还是挺不错的,比如 Node 的方法命名,就非常严谨。ancestor 也是为了对应 next, prev 等命名。也就是说:Y.Dom 其实已变成了内部 API, 不鼓励用户直接调用。

但是不知为什么,我还是觉得 jQuery 的 API 设计高出一个层次,套用一句流行话就是:
jQuery API 的用户体验更好。

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)
展开更多 50%)
分享

猜你喜欢

jQuery最出色的是 API 设计

Web开发
jQuery最出色的是 API 设计

跟着JQuery API学Jquery 之三 筛选

Web开发
跟着JQuery API学Jquery 之三 筛选

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

jQuery EasyUI 中文API Layout(Tabs)

Web开发
jQuery EasyUI 中文API Layout(Tabs)

跟着Jquery API学Jquery之一 选择器

Web开发
跟着Jquery API学Jquery之一 选择器

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

jQuery EasyUI 中文API Button使用实例

Web开发
jQuery EasyUI 中文API Button使用实例

50款出色的Logo设计

平面设计 标志设计 UI设计 VI设计
50款出色的Logo设计

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

javaScript教程:以实例方式学习call函数

javaScript教程:以实例方式学习call函数

关于WPS超链接

关于WPS超链接
下拉加载更多内容 ↓