当前位置: 首页 > 图文教程 > 网络编程 > Javascript > jQuery最出色的是 API 设计

Javascript
JavaScript 复制功能代码 兼容多浏览器
图片与文字半透明效果 鼠标移上不透明
javascript 模拟Marquee文字向左均匀滚动代码
纯CSS 链接悬停提示效果代码
JS、CSS文字切换,定时交替,代码精简
Javascript 仿歌词智能滚动代码
javascript 表单中浏览文件的“浏览”按钮修改
让你的网站可编辑的实现js代码
Javascript var变量隐式声明方法
JS CSS制作饱含热情的镶边文字闪烁特效
Js 实现文字爬楼滚动效果 结合文本框
随日期每天自动变换的文本的js特效
一个链接按两种方式打开两个网址的方法
Js文字背景行如流水特效
让链接必须按先后顺序点击的JS代码
单选按钮决定链接的网址
JavaScript 点击插入文字
获取网站跟路径的javascript代码(站点及虚拟目录)
JS 用6N±1法求素数 实例教程
javascript 添加和移除函数的通用方法

Javascript 中的 jQuery最出色的是 API 设计


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2010-01-30   浏览: 74 ::
收藏到网摘: n/a

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

昨天搭建 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); // 表示 getStyle
el.css(prop, val); // 表示 setStyle
el.css({ propA: valA, propB, valB }); // 表示 setStyles
el.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 的用户体验更好。