js的链式调用分析

前言

在做一个组件化开发的案例时在主逻辑中用到了链式调用的方法，目的是为了让代码更简洁易读，减少代码量，但是对各个构造函数末尾的" return this "很是疑惑，未明其意。查了书才明白这句话的作用。

什么是链式调用

其实jquery里面的自带函数都可以链式调用，比如：

point.width(100px).height(100px);
$(this).setStyle('color', 'red').show();

上面两个语句都是链式调用

分析

链式调用其实是两个部分：

1.操作对象(也就是被操作的DOM元素，如上例的$(this))

2.操作方法(具体要做什么事情，如上例的setStyle和show)

这是jquery中$函数的设计方法：

function $(){
  var elements = [];
  for(var i= 0,len=arguments.length; i

现在可以将这个函数改造为下面这样：

(function(){
  function _$(els){
    this.elements = [];//把那些元素作为数组保存在一个实例属性中，
    for(var i= 0, len=els.length; i

上面的代码是让定义在构造函数的prototype属性中的对象都返回用来调用方法的那个实例的引用（在上例中也就是返回" -$() "函数的实例），这样的话，如果每次都return this，那么链式调用就可以不断进行下去。

实际使用

比如在我这次组件式开发中用的是下面这样的形式：

构造函数：

/*JS主逻辑*/
var H5 = function(){
    this.addPage(){//新增一页
        /*代码和方法*/
        return this;
    }
    
    this.addComponent(){//新增一个组件
        /*代码和方法*/
        return this;
    }
 
    this.loader(){
        /*代码和方法*/
        return this;
    }
}

调用：

$(function(){
    var h5 = new H5();
    h5.addPage()
          .addComponent()
          .addComponnet()
          .addComponent()
          .addComponent()
      .addPage()
          .addComponent()
          .addComponnet()
          .addComponent()
          .addComponent()
      ...//后续调用
})

这样使用可以避免多次重复使用一个变量对象，减少代码量，使逻辑更清晰。