《javascript設計模式》學習筆記四：Javascript面向對象程序設計鏈式調用實例分析

更新時間：2020年04月07日 11:53:52 作者：silentime

這篇文章主要介紹了Javascript面向對象程序設計鏈式調用,結合實例形式分析了《javascript設計模式》中鏈式調用的原理與簡單使用技巧,需要的朋友可以參考下

本文實例講述了Javascript面向對象程序設計鏈式調用。分享給大家供大家參考，具體如下：

1.鏈式調用：

jquery可能是目前大家最常用到的js框架了，也習慣了如下的調用方式:

$('.someclass').show().css('xxx','xxxx').click(function(){}).xxx……

這種調用方式就叫做鏈式調用，也就是說在調用一個方法之后，可以使用方法的返回值來繼續(xù)進行方法調用。

2.如何實現(xiàn)鏈式調用：

了解了什么是鏈式調用，我們再來看如何實現(xiàn)鏈式調用，從1中所述我們應該知道鏈式調用的關鍵在于方法的返回值，只要方法的返回值都是調用該方法的對象，那么，我們就可以實現(xiàn)鏈式調用了，我們仿照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);

}

})();

上面的代碼就實現(xiàn)了一個簡單的鏈式調用對象，并且使用一個_$作為$的別名，以防止$被其他代碼改寫而導致整個對象的定義丟失。

附：一個簡單鏈式調用示例：

/*
map()
items 遍歷的數(shù)組的每一項

*/
var arr = [1,2,3];
var num = arr.map(function(items){
  return items + 1;
});
console.log(num);//[2,3,4 var arr = [1,2,3];
    var num = arr.map(function (items) {
      return items+1;
    }).reduce(function (a,b) {//[2,3,4].reduce()
      return a+b;
    })

    console.log(num);//0 --- 2+3+4 = 9]

/* 
  reduce 實現(xiàn)數(shù)組里的每個數(shù)相加,也就是給數(shù)組的每一項求總和
  reduce(function(a,b){
    return a+b;
  },a)--a的初始值
*/
var arr = [1,2,3];
var num_1 = arr.reduce(function (a,b) {
  return a+b;
})
console.log(num_1);//6

/* 
  鏈式調用 
  一個鏈子接一個鏈子  
*/
var arr = [1,2,3];
var num = arr.map(function (items) {
  return items+1;
}).reduce(function (a,b) {//[2,3,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數(shù)據(jù)結構與算法技巧總結》、《JavaScript遍歷算法與技巧總結》及《JavaScript數(shù)學運算用法總結》

希望本文所述對大家JavaScript程序設計有所幫助。

您可能感興趣的文章: