《javascript设计模式》学习笔记四：Javascript面向对象程序设计链式调用实例分析

Z时代
2024-01-10
分类：综合

本文实例讲述了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,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 实现数组里的每个数相加,也就是给数组的每一项求总和
  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