链式代码
- $('input[type="button"]')
- .eq(0).click(function() {
- alert('点击我!');
- }).end().eq(1)
- .click(function() {
- $('input[type="button"]:eq(0)').trigger('click');
- }).end().eq(2)
- .toggle(function() {
- $('.aa').hide('slow');
- }, function() {
- $('.aa').show('slow');
- });
找出 type 类型为 button 的 input 元素
找到第一个按钮, 并绑定 click 事件处理函数
返回所有按钮, 再找到第二个
为第二个按钮绑定 click 事件处理函数
为第三个按钮绑定 toggle 事件处理函数
jQuery 的这种管道风格的 DSL 链式代码, 总的来说:
节约 JS 代码;
所返回的都是同一个对象, 可以提高代码的效率.
通过简单扩展原型方法并通过 return this 的形式来实现跨浏览器的链式调用. 利用 JS 下的简单工厂方法模式, 来将所有对于同一个 DOM 对象的操作指定同一个实例.
这个原理就超简单了, 如下代码:
aQuery().init().name()
分解:
- a = aQuery();
- a.init()
- a.name()
把代码分解一下, 很明显实现链式的基本条件就是要实例对象先创建好, 调用自己的方法.
- aQuery.prototype = {
- init: function() {
- return this;
- },
- name: function() {
- return this
- }
- }
所以我们如果需要链式的处理, 只需要在方法内部方法当前的这个实例对象 this 就可以了, 因为返回当前实例的 this, 从而又可以访问自己的原型了, 这样的就节省代码量, 提高代码的效率, 代码看起来更优雅. 但是这种方法有一个问题是: 所有对象的方法返回的都是对象本身, 也就是说没有返回值, 所以这种方法不一定在任何环境下都适合.
来源: http://www.qdfuns.com/article/18084/24224f12f56597fcbb20252c0655e9e9.html