jQuery是一個Internal DSL的典型的例子,ds.js也是使用函數式編程的風格。
鏈式方法調用 eg:$('.mydiv').addClass('flash').draggable().css('color', 'blue')css
一個簡單的列子:html
Func = (function() { this.add = function(){ console.log('1'); return this; }; this.result = function(){ console.log('2'); return this; }; return this; }); var func = new Func(); func.add().result();
建立一個$函數:
html:
<div id="head"></div>
<div id="contents"></div>
調用方法:
$('head','contents').show().addEvent('click', function(){alert(1)})
封裝方法以下:node
(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); } })();
模擬jquery底層鏈式編程: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'); });