JavaScript实现链式调用

最新推荐文章于 2025-09-13 11:59:05 发布

weixin_30555125

最新推荐文章于 2025-09-13 11:59:05 发布

阅读量101

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/camille666/p/js_chain_call.html

本文介绍了如何使用JavaScript实现链式调用，包括通过构造函数返回this实现DOM操作的链式调用，以及给Number对象原型添加方法实现数值运算的链式调用。

学习Jquery的时候，我们通常会看到链式调用的写法

$(window).addEvent('load', function(){
    $('test').show().setStyle('color', 'red').addEvent('click', function(e){
        $(this).setStyle('color', 'yellow');
    });
});

下面用JavaScript来实现一个链式调用，核心思想是借助原型构造函数，在每个方法中return this。

(function(){
  function _$(els){
    this.element = [];
    for(var i = 0, len = els.length; i < len; i++){
      var element = els[i];
      if(typeof element === 'string'){
          element = document.getElementById(element);
      }
      this.element.push(element);
    }
    return this;
  }
  _$.prototype = {
    each: function(fn){
      for(var i = 0, len = this.element.length; i < len; i++){
        fn.call(this, this.element[i]);
      }
      return this;
    },
    setStyle: function(prop, val){
      this.each(function(el){
        el.style[prop] = val;
      });
      return this;
    },
    show: function(){
      var that = this;
      this.each(function(el){
        that.setStyle('display', 'none');
      });
      return this;
    },
    addEvent: function(type, fn){
      var add = function(el){
        if(window.addEventListener){
          el.addEventListener(type, fn, false);
        }else if(window.attachEvent){
          el.attachEvent('on' + type, fn);
        }
      };
      this.each(function(el){
        add(el);
      });
    }
  };
  window.$ = function(){
    return new _$(arguments);
  }
})();

下面用JavaScript来实现一个链式调用，核心思想是给Number对象原型添加属性和方法。

(10).add(10).reduce(2).add(10) //28

Number.prototype.add = function(num){
    return this+num;
}
Number.prototype.reduce = function(num){
    return this-num;
}