《javascript設計模式》學習筆記四:Javascript面向物件程式設計鏈式呼叫例項分析
阿新 • • 發佈:2020-04-08
本文例項講述了Javascript面向物件程式設計鏈式呼叫。分享給大家供大家參考,具體如下:
1.鏈式呼叫:
jquery可能是目前大家最常用到的js框架了,也習慣瞭如下的呼叫方式:
$('.someclass').show().css('xxx','xxxx').click(function(){}).xxx……
這種呼叫方式就叫做鏈式呼叫,也就是說在呼叫一個方法之後,可以使用方法的返回值來繼續進行方法呼叫。
2.如何實現鏈式呼叫:
瞭解了什麼是鏈式呼叫,我們再來看如何實現鏈式呼叫,從1中所述我們應該知道鏈式呼叫的關鍵在於方法的返回值,只要方法的返回值都是呼叫該方法的物件,那麼,我們就可以實現鏈式呼叫了,我們仿照jquery,使用$作為物件的選擇器:
(function(){ function _$(els){ this.elements = []; for(var i=0,len=els.length;i<len;i++){ var elements = els[i]; if(typeof element = ‘string'){ element = document.getElementByIdx_x_x(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; },setStyle: function(prop,val){ …… },show:function(){ …… },…… } window.$ = function(){ return new _$(arguments); } })();
上面的程式碼就實現了一個簡單的鏈式呼叫物件,並且使用一個_$作為$的別名,以防止$被其他程式碼改寫而導致整個物件的定義丟失。
附:一個簡單鏈式呼叫示例:
/* map() items 遍歷的陣列的每一項 */ var arr = [1,2,3]; var num = arr.map(function(items){ return items + 1; }); console.log(num);//[2,3,4 var arr = [1,3]; var num = arr.map(function (items) { return items+1; }).reduce(function (a,b) {//[2,4].reduce() return a+b; }) console.log(num);//0 --- 2+3+4 = 9] /* reduce 實現數組裡的每個數相加,也就是給陣列的每一項求總和 reduce(function(a,b){ return a+b; },a)--a的初始值 */ var arr = [1,3]; var num_1 = arr.reduce(function (a,b) { return a+b; }) console.log(num_1);//6 /* 鏈式呼叫 一個鏈子接一個鏈子 */ var arr = [1,3]; var num = arr.map(function (items) { return items+1; }).reduce(function (a,4].reduce() return a+b; }) console.log(num);//0 --- 2+3+4 = 9
感興趣的朋友可以使用線上HTML/CSS/JavaScript程式碼執行工具:http://tools.jb51.net/code/HtmlJsRun測試上述程式碼執行效果。
更多關於JavaScript相關內容感興趣的讀者可檢視本站專題:《javascript面向物件入門教程》、《JavaScript錯誤與除錯技巧總結》、《JavaScript資料結構與演算法技巧總結》、《JavaScript遍歷演算法與技巧總結》及《JavaScript數學運算用法總結》
希望本文所述對大家JavaScript程式設計有所幫助。