这一章要实现的就是jQuery的那种链式调用,例子:

$(this).setStyle('color', 'green').show();
一:调用链的结构
首先我们来看一下最简单的$()函数的实现:
function $() {
var elements = [];
for (var i = , len = arguments.length; i < len; ++i) {
var element = arguments[i];
if (typeof element == 'string') {
element = document.getElementById(element);
}
if (arguments.length == ) {
return element;
}
elements.push(element);
}
return elements;
}
如果我们要实现$().method()这样的使用方法,想到应该就是$()函数有返回值,并且返回的是一个对象。要实现前面的所说的,最好的方法就是$()里面应该有个类可以让我们new一个对象出来,所以上面的代码就变成下面的样子:
(function() {
// Use a private class.
function _$(els) {
this.elements = [];
for (var i = , len = els.length; i < len; ++i) {
var element = els[i];
if (typeof element == 'string') {
element = document.getElementById(element);
}
this.elements.push(element);
}
}
// The public interface remains the same.
window.$ = function() {
return new _$(arguments);
};
})();
此外我们的对象应该要有方法可以调用啊,那就定义在prototype上吧,然后代码就变成下面那样了:
(function() {
function _$(els) {
// ...
}
_$.prototype = {
each: function(fn) {
for ( var i = , len = this.elements.length; i < len; ++i ) {
fn.call(this, this.elements[i]);
}
return this;
},
setStyle: function(prop, val) {
this.each(function(el) {
el.style[prop] = val;
});
return this;
},
show: function() {
var that = this;
this.each(function(el) {
that.setStyle('display', 'block');
});
return this;
},
addEvent: function(type, fn) {
var add = function(el) {
if (window.addEventListener) {
el.addEventListener(type, fn, false);
}
else if (window.attachEvent) {
el.attachEvent('on'+type, fn);
}
};
this.each(function(el) {
add(el);
});
return this;
}
};
window.$ = function() {
return new _$(arguments);
};
})();
到这里,我们就可以大概的使用一下了:
  $('test-1', 'test-2').show().
setStyle('color', 'red').
addEvent('click', function(e) {
$(this).setStyle('color', 'green');
});
二:设计一个支持方法链式调用的JavaScript库
一般的js库里面都包含着事件、DOM、Ajax这几个重要的模块,那模仿一下:
Function.prototype.method = function(name, fn) {
this.prototype[name] = fn;
return this;
};
(function() {
function _$(els) {
// ...
}
/* Events * addEvent * getEvent */
_$.method('addEvent', function(type, fn) {
// ...
}).method('getEvent', function(e) {
// ...
}).
/* DOM * addClass * removeClass * replaceClass * hasClass * getStyle * setStyle */
method('addClass', function(className) {
// ...
}).method('removeClass', function(className) {
// ...
}).method('replaceClass', function(oldClass, newClass) {
// ...
}).method('hasClass', function(className) {
// ...
}).method('getStyle', function(prop) {
// ...
}).method('setStyle', function(prop, val) {
// ...
}).
/* AJAX * load. Fetches an HTML fragment from a URL and inserts it into an element. */
method('load', function(uri, method) {
// ...
});
window.$ = function() {
return new _$(arguments);
});
})();
其实用的还是上面的方法。
不过,注意到最上面的几行代码了吗,我记得第一章说过,这样的话让添加prototype方法也使用链式调用玩起来了。。
还有,倒数第四行那里,我们总是把函数赋予给window.$,这样的话与一些使用$做命名空间的库是有冲突的,例如和jQuery有冲突~,那换命名空间吧,下面就实现一个安装器来方便改变命名空间:
Function.prototype.method = function(name, fn) {
// ...
};
(function() {
function _$(els) {
// ...
}
_$.method('addEvent', function(type, fn) {
// ...
})
// ... window.installHelper = function(scope, interface) {
scope[interface] = function() {
return new _$(arguments);
}
};
})();
上面代码的主要思想就是先不给任何全局变量赋值,只有调用installHelper绑定相应的命名空间之后才能使用。
使用方法如下:
installHelper(window, '$');

$('example').show();
这样就等于把函数赋值给了window.$了。
三:使用回调从支持链式调用的方法获取数据
上面说的那些链式方法都是返回this的,如果方法本身要返回值了?那么和返回this不就冲突了吗?所以对于这种情况,我们要想出一种方法,那就是对于这种情况,我们传入一个回调函数,来调用返回来的数值,之后还是要返回this的~
例子:
window.API2 = window.API2 || {};
API2.prototype = function() {
var name = 'Hello world';
// Privileged mutator method.
setName: function(newName) {
name = newName;
return this;
},
// Privileged accessor method.
getName: function(callback) {
callback.call(this, name);
return this;
}
}();
上面代码只要看getName哪里就可以了,传入了一个回调函数,然后取出值来直接调用,之后还是返回this,就不破坏链式调用了。
上面代码的一个使用方法:
var o2 = new API2;
o2.getName(console.log).setName('Meow').getName(console.log);
 

《javascript设计模式》笔记之第六章:方法的链式调用的更多相关文章

  1. JavaScript设计模式——方法的链式调用

    方法的链式调用: (function() { //私有类 function _$ (els) { this.elements = []; for(var i = 0, len = els.length ...

  2. 如何写 JS 的链式调用 ---》JS 设计模式《----方法的链式调用

    1.以$ 函数为例.通常返回一个HTML元素或一个元素集合. 代码如下: function $(){ var elements = []; ;i<arguments.length;i++){ v ...

  3. js实现方法的链式调用

    假如这里有三个方法:person.unmerried();person.process();person.married();在jQuery中通常的写法是:person.unmerried().pro ...

  4. PHP 设计模式 笔记与总结(4)PHP 链式操作的实现

    PHP 链式操作的实现 $db->where()->limit()->order(); 在 Common 下创建 Database.php. 链式操作最核心的地方在于:在方法的最后 ...

  5. JS设计模式——6.方法的链式调用

    什么是链式调用 这个很容易理解,例如: $(this).setStyle('color', 'red').show(); 分解链式调用 链式调用其实是两个部分: 1.操作对象(也就是被操作的DOM元素 ...

  6. Javascript设计模式笔记

    Javascript是越来越厉害了,一统前后端开发.于是最近把设计模式又看了一遍,顺便做了个笔记,以方便自己和他人共同学习. 笔记连载详见:http://www.meteorcn.net/wordpr ...

  7. 浅析 JavaScript 链式调用

    对$函数你已经很熟悉了.它通常返回一个html元素或一个html元素的集合,如下: function$(){ var elements = []; for(vari=0,len=arguments.l ...

  8. 《HTTP 权威指南》笔记:第十六章&第十七章 国际化、内容协商与转码

    <HTTP 权威指南>笔记:第十六章 国际化 客户端通过在请求报文中的 Accept-Language 首部和 Accept-Charset 首部来告知服务器:“我理解这些语言.”服务器通 ...

  9. [书籍翻译] 《JavaScript并发编程》第六章 实用的并发

    本文是我翻译<JavaScript Concurrency>书籍的第六章 实用的并发,该书主要以Promises.Generator.Web workers等技术来讲解JavaScript ...

随机推荐

  1. div遮罩弹框口

    <html> <head> <meta http-equiv="Content-Type" content="text/html; char ...

  2. 万亿级日志与行为数据存储查询技术剖析——Hbase系预聚合方案、Dremel系parquet列存储、预聚合系、Lucene系

    转自:http://www.infoq.com/cn/articles/trillion-log-and-data-storage-query-techniques?utm_source=infoq& ...

  3. Java笔记(九)

    网络编程: UDP传输: (UdpSend发送端)通过UDP传输方式,将一段文字数据发送出去: (1)建立udpsocket服务 (2)提供数据,并将数据封装到数据包中 (3)通过socket服务的发 ...

  4. rsync应用实例

      一. 通过ssh的方式 前面介绍的rsync 5种方式当中,第二.第三(1个冒号)就属于通过ssh的方式,这种方式其实就是让用户去登录到远程机器,然后执行rsync的任务. [root@local ...

  5. 文本编辑器[notepad++] :一些快捷键

    资源来自网络收集. Ctrl+C 复制 Ctrl+X 剪切 Ctrl+V 粘贴 Ctrl+Z 撤消 Ctrl+Y 恢复 Ctrl+A 全选 Ctrl+F 键查找对话框启动 Ctrl+H 查找/替换对话 ...

  6. Java中next() 与 nextLine() 区别

    next(): 1.一定要读取到有效字符后才可以结束输入. 2.对输入有效字符之前遇到的空白,next() 方法会自动将其去掉. 3.只有输入有效字符后才将其后面输入的空白作为分隔符或者结束符. 4. ...

  7. RetHad6.7离线通过.rpm安装

    必须有RetHad6.7系统的.ios镜像文件,我们需要的.rpm都在镜像的Packages里面,针对不能联网的,并且也适用与CentOS系统 1. 查看版本号 参考我的博客 https://www. ...

  8. c/c++面试30-38之指针

    30 看代码写结果-----指针加减 #include <stdio.h> int main(void) { ] = { , , , , }; );//这里要特别注意,&a+1的值 ...

  9. 5-1条件运算符 & 5-2

    三目运算符 新建类: ConditionDemo 用三目运算符: package com.imooc.operator; public class ConditionDemo { public sta ...

  10. roguelike地牢生成算法

    文章原地址 上一个地图生成算法,这一次是一个地牢的生成算法,是一个国外的人写的算法,用dart语言写,我把它改成了unity-c#. 原作者博客地址:Rooms and Mazes: A Proced ...