首页 > 代码库 > javascript设计模式 第6章 链式调用
javascript设计模式 第6章 链式调用
链式调用是一种语法招数。
作用：能让你通过重用一个初始化操作来达到用少量代码表达复杂操作的目的、。
这种技术包含两个部分：
1.一个创建代表html元素的对象的工厂。以及一批对这个html元素执行某些操作的方法。
通过例子对比：之前和之后的代码，对链式调用的概念的初步认识。
之前：
addevent($(‘example‘),"click",function(){
setstyle(this,"color",‘green‘);
show(this);
})
执行链式调用：
$(".example").addevent("click",function(){
$(this).setstyle(‘color‘,‘green‘).show();
})
6.1调用链的结构
function $(){
var elements = [];
for(var i=0;len = arguments.length,i<lengt;++i){
var element = arguments[i];
if(typeof element ==="string"){
element = document.getElementById(element);
}
if(arguments,length===1){
return element;
}
element.push(element);
}
return elements;
}
---------改造--------------------
步骤：
1.把这个函数改造为一个构造器，把那些元素作为数组保存在一个实例属性中。
2.让所有定义在构造器函数的prototype属性所指对象中的方法都返回用以调用方法的那个实例的引用，那么他就具有了链式调用的能力。
3. 首页需要把$函数改为一个工厂方法。他负责创建支持链式调用的对象。
4.这个函数应该能接受元素数组形式的参数，以便我们能够使用与原来一样的公有接口
(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);
}
}
window.$ = function(){
return new _$(arguments);
}
})()
---------------深入改造- 摩擦摩擦 似魔鬼步伐，一步、两步------------------
所有对象都会继承其原型对象的属性的方法。我们可以让定义在原型对象中那几个方法都返回用以调用方法的实例对象的引用。这些就可以对那些方法进行链式调用了。
实例：把_$这个私有构造函数的prototype对象中添加方法。以便实现链式调用：
(function(){
function _$(els){
}
_$.prototype = {
each:function(fn){
for(var i=0,length = 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 _$(argments);
}
}
})()
-------------------类分析----------在这光滑地上摩擦----------
1.该类的每一个方法的最后一行都是以return this 结束
2.这将会用以调用方法的对象传给调用连上的下一个方法。
---------测试用例------------------妈的等了好久，虽然还有好多我不懂的，但是还是想试试，内心默默的激动-------
$(window).addEvent(‘load‘,function(){
$("test-1","test-2").show().setstyle(‘color‘,‘red‘).addevent("click",function(e){
$(this).setstyle(‘color‘,‘green‘);
})
})
-----------fuck ~O^O~ 这种方式确实在使用jquery的时候用到--------淡淡的忧伤--，好好学习啊~o~
--------------------------------新章节继续，雅蠛蝶（6.2 设计一个支持方法调用的javascript库）-------------------------------------------------------------有木有吓尿了感觉，紧张-----------------------
常见的大多数javascript库的特性
1.事件，添加和删除事件监听器，对事件对象进行规范化出
2.dom：类名管理;样式管理
3.ajax:对xmlhttprequest进行规范发处理
6.3 使用回调从支持链式调用的方法获取数据 -------------》（说实在的感觉很实用）
一个章节总是需要描述的用法和使用场景:
下面见：zzzZZZ
1。链式调用很适合赋值器方法，但是对于取值方法，我们希望返回的是数据不是this.
2.所有需要变通的犯法：使用回调技术来返回所要的数据。（fuck,确实牛逼啊，森森的佩服啊， *@_@* ）
3.通过例子掩饰总方法
api1类使用普通的取值器（中断了调用链），
window.api = window.api || function(){
var name ="hello word";
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("meow").getname());
高级模式------>回调方式
window.api1= window.api2 || function(){
var name = "hello word"
this.setname = function(newname){
name = newname;
retrun this;
}
//重要的步骤
this.getname = function(callback){
callback.call(this,name);
return this;
}
}
-------------------------------end 23:40--- 有点疲惫----- (-_-)ZZZ 睡著了啦~~ -------------------------
javascript设计模式 第6章 链式调用