javascript设计模式_第二部分_链式调用

 链式调用是一个语法招数.包含两个部分:
1.一个创建HTML元素的对象的工厂
2.对这个HTML元素执行的操作的方法
[个人理解:将HTML元素包装成对象,在对象上添加方法(重点在return this)]

构造器

 

(function(){ //Use a private class function _$(els){ this.elements = []; for(var i=0; i<els.length; 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; i<this.elements.length; 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","bloc"); }); 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; } }; //the public interface remains the same window.$ = function(){ return new _$(arguments); } })()

 

使用回调从支持链式调用的方法获取数据
链式调用很适合于赋值器方法,但对于取值器方法,你可能会希望它们返回你要的数据而不是返回this.

window.API2 = window.API2 || function(){ var name = "hell"; 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("Menw").getName(console.log);