JavaScript设计模式 Item 5 --链式调用
1、什么是链式调用
这个很容易理解,例如:
$(this).setStyle('color', 'red').show();
一般的函数调用和链式调用的区别:调用完方法后,return this
返回当前调用方法的对象。
function Dog(){
this.run= function(){
alert("The dog is running....");
return this;//返回当前对象 Dog
};
this.eat= function(){
alert("After running the dog is eatting....");
return this;//返回当前对象 Dog
};
this.sleep= function(){
alert("After eatting the dog is running....");
return this;//返回当前对象 Dog
};
}
//一般的调用方式;
/* var dog1 =new Dog();
dog1.run();
dog1.eat();
dog1.sleep();*/
var dog2 = new Dog();
dog2.run().eat().sleep();
2、分解链式调用
链式调用其实是两个部分:
1.操作对象(也就是被操作的DOM元素,如上例的$(this))
2.操作方法(具体要做什么事情,如上例的setStyle和show)
如何实现操作对象与操作方法
创建一般的$函数:
function $(){
var elements = [];
for(var i= 0,len=arguments.length; i<len; i++){
var element = arguments[i];
if(typeof element==='string'){
element = document.getElementById(element);
}
if(arguments.length==1){
return element;
}
elements.push(element);
}
return elements;
}
但是,如果把这个函数改造为一个构造器,把那些元素作为数组保存在一个实例属性中,并让所有定义在构造器函数的prototype属性所指对象中的方法都返回用以调用方法的那个实例的引用,那么它就具有了链式调用的能力。(说了这么多,就是在每个方法最后return this;
),
我首先需要把这个$
函数改为一个工厂方法,它负责创建支持链式调用的对象。这个函数应该能接受元素数组形式的参数,以便我们能够使用与原来一样的公用接口。这样以来,它就具有了进行链式调用的能力。
改造后如下:
(function(){
function _$(els){
this.elements = [];//把那些元素作为数组保存在一个实例属性中,
for(var i= 0, len=els.length; i<len; i++){
var element = els[i];
if(typeof element==='string'){
element = document.getElementById(element);
}
this.elements.push(element);
}
}
_$.prototype = {
each: function(fn){
for(var i= 0,len=this.elements.length; i<len; i++){
fn.call(this, this.elements[i]);
}
return this; //在每个方法的最后return this;
},
setStyle: function(prop, val){
this.each(function(el){
el.style[prop] = val;
});
return this; //在每个方法的最后return this;
},
show: function(){
var that = this;
this.each(function(el){
that.setStyle('display', 'block');
});
return this; //在每个方法的最后return this;
},
addEvent: function(type, fn){
var add = function(el){
if(window.addEventListener){
el.addEventListener(type, fn, false);
}else if(window.attachEvent){
el.addEvent('on'+type, fn);
}
};
this.each(function(el){
add(el);
});
return this; //在每个方法的最后return this;
}
}
window.$ = function(){
return new _$(arguments);
}
})();
在最后return this,这就将调用方法的对象传给调用链上的下一个方法。
3、模拟jquery底层链式编程
// 块级作用域
//特点1 程序启动的时候 里面的代码直接执行了
//特点2 内部的成员变量 外部无法去访问 (除了不加var修饰的变量)
(function(window , undefined){
// $ 最常用的对象 返回给外界 大型程序开发 一般使用'_'作为私用的对象(规范)
function _$(arguments){
//实现代码...这里仅实现ID选择器
// 正则表达式匹配id选择器
var idselector = /#\w+/ ;
this.dom ; // 此属性 接受所得到的元素
// 如果匹配成功 则接受dom元素 arguments[0] = '#inp'
if(idselector.test(arguments[0])){
this.dom = document.getElementById(arguments[0].substring(1));
} else {
throw new Error(' arguments is error !');
}
};
// 在Function类上扩展一个可以实现链式编程的方法
Function.prototype.method = function(methodName , fn){
this.prototype[methodName] = fn ;
return this ; //链式编程的关键
}
// 在_$的原型对象上 加一些公共的方法
_$.prototype = {
constructor : _$ ,
addEvent:function(type,fn){
// 给你的得到的元素 注册事件
if(window.addEventListener){// FF
this.dom.addEventListener(type , fn);
} else if (window.attachEvent){// IE
this.dom.attachEvent('on'+type , fn);
}
return this ;
},
setStyle:function(prop , val){
this.dom.style[prop] = val ;
return this ;
}
};
// window 上先注册一个全局变量 与外界产生关系
window.$ = _$ ;
// 写一个准备的方法
_$.onReady = function(fn){
// 1 实例化出来_$对象 真正的注册到window上
window.$ = function(){
return new _$(arguments);
};
// 2 执行传入进来的代码
fn();
// 3 实现链式编程
_$.method('addEvent',function(){
// nothing to do
}).method('setStyle',function(){
// nothing to do
});
};
})(window); // 程序的入口 window传入作用域中
$.onReady(function(){
var inp = $('#inp');
//alert(inp.dom.nodeName);
//alert($('#inp'));
inp.addEvent('click',function(){
alert('我被点击了!');
}).setStyle('backgroundColor' , 'red');
});
4、使用回调函数从支持链式调用的方法获取数据
链式调用很适合于赋值器方法,但对于取值器方法,就不方便了,因为每个方法返回的都是this啊。
不过,变通的方法还是有的,那就是回调函数。
未使用回调函数时
//without callback
window.API = window.API || function(){
var name = 'JChen';
this.setName = function(newName){
name = newName;
return this;
};
this.getName = function(){
return name;
};
};
var o = new API();
console.log(o.getName());
console.log(o.setName('Haha').getName());
使用回调函数时
//with callback
window.API2 = window.API2 || function(){
var name = 'JChen';
this.setName = function(newName){
name = newName;
return this;
};
this.getName = function(callback){
callback.call(this, name);
return this;
};
};
var o2 = new API2();
o2.getName(console.log).setName('Hehe').getName(console.log);
在使用回调函数时候callback.call(this, name)在一般情况下是没问题的,但是,这个例子偏偏用到了console.log,那么就有问题了。原因是console的this是指向console而不是winodw。
这个问题也很好解决。如下:
//with callback
window.API2 = window.API2 || function(){
var name = 'JChen';
this.setName = function(newName){
name = newName;
return this;
};
this.getName = function(callback){
callback.call(this, name);
return this;
};
};
var o2 = new API2();
var log = function(para){
console.log(para);
};
o2.getName(log).setName('Hehe').getName(log);
5、总结
链式调用这种风格有助于简化代码的编写工作,让代码更加简洁、易读,同时也避免多次重复使用一个对象变量。
版权声明:本文为小平果原创文章,转载请注明:http://blog.csdn.net/i10630226
JavaScript设计模式 Item 5 --链式调用的更多相关文章
- JavaScript设计模式——方法的链式调用
方法的链式调用: (function() { //私有类 function _$ (els) { this.elements = []; for(var i = 0, len = els.length ...
- 关于JavaScript中的setTimeout()链式调用和setInterval()探索
http://www.cnblogs.com/Wenwang/archive/2012/01/06/2314283.html http://www.cnblogs.com/yangjunhua/arc ...
- JavaScript实现链式调用
学习Jquery的时候,我们通常会看到链式调用的写法 $(window).addEvent('load', function(){ $('test').show().setStyle('color', ...
- JavaScript设计模式-8.链式调用
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- 《javascript设计模式》笔记之第六章:方法的链式调用
这一章要实现的就是jQuery的那种链式调用,例子: $(this).setStyle('color', 'green').show(); 一:调用链的结构: 首先我们来看一下最简单的$()函数的实现 ...
- JavaScript中的链式调用
链模式 链模式是一种链式调用的方式,准确来说不属于通常定义的设计模式范畴,但链式调用是一种非常有用的代码构建技巧. 描述 链式调用在JavaScript语言中很常见,如jQuery.Promise等, ...
- 简谈 JavaScript、Java 中链式方法调用大致实现原理
相信,在 JavaScript .C# 中都见过不少链式方法调用,那么,其中实现该类链式调用原理,大家有没有仔细思考过?其中 JavaScript 类库:jQuery 中就存在大量例子,而在 C# 中 ...
- javascript学习(10)——[知识储备]链式调用
上次我们简单的说了下单例的用法,这个也是在我们java中比较常见的设计模式. 今天简单说下链式调用,可能有很多人并没有听过链式调用,但是其实只要我简单的说下的话,你肯定基本上都在用,大家熟知的jQue ...
- js原生设计模式——2面向对象编程之js原生的链式调用
技巧点:对象方法中返回当前对象就可以链式调用了,即方法中写return this; <!DOCTYPE html><html lang="en"><h ...
随机推荐
- Android开发技巧——实现可复用的ActionSheet菜单
在上一篇<Android开发技巧--使用Dialog实现仿QQ的ActionSheet菜单>中,讲了这种菜单的实现过程,接下来将把它改成一个可复用的控件库. 本文原创,转载请注明出处: h ...
- 写一个python的服务监控程序
写一个python的服务监控程序 前言: Redhat下安装Python2.7 rhel6.4自带的是2.6, 发现有的机器是python2.4. 到python网站下载源代码,解压到Redhat上, ...
- C语言之可变参实现scanf函数
既然有printf函数可变参实现,那就一定有scanf函数的可变参实现.废话不多说,源码奉上: 本源码不过多分析,如要明白原理,请翻本博客以往的文章看说明. 欢迎关注新浪微博:http://weibo ...
- https认证
HTTPS认证 说明 1. HTTPS协议的站点信息更加安全,同时可降低网站被劫持的风险,如网站同时存在HTTP和HTTPS站点,可使用本工具进行认证,便于百度搜索识别网站HTTP与HTTPS之间的对 ...
- iframe局部刷新的二种实现方法
需求描述: 当页面有一部分是不变的或整个页面的图片很多时,可以考虑使用局部刷新,以提高整体的下载速度与用户体验. 1,iframe实现局部刷新的方法一 复制代码代码示例: <script t ...
- Java 理论与实践: 并发集合类
Java 理论与实践: 并发集合类 DougLea的 util.concurrent 包除了包含许多其他有用的并发构造块之外,还包含了一些主要集合类型 List 和 Map 的高性能的.线程安全的实现 ...
- Memocache 详细的工作机制
memcached集群 2013-04-26 13:56:37| 分类: memcached | 标签:集群 memcached |举报|字号 订阅 集群架构方面的问题 memcach ...
- Odoo 学习 【二】Environment 概览
Environment 参考链接: http://odoo-new-api-guide-line.readthedocs.io/en/latest/environment.html#environme ...
- POSTGRESQL 并发控制
http://meidayhxp.blog.163.com/blog/static/117608156201210243837491/ 这个内容是官方Doc中的一章,具体是那一版的,还未确认. 第九章 ...
- Floyd 算法求多源最短路径
Floyd算法: Floyd算法用来找出每对顶点之间的最短距离,它对图的要求是,既可以是无向图也可以是有向图,边权可以为负,但是不能存在负环(可根据最小环的正负来判定). 基本算法: Floyd算法基 ...