学习JavaScript设计模式(链式调用)


Posted in Javascript onNovember 26, 2015

1、什么是链式调用
这个很容易理解,例如:

$(this).setStyle('color', 'red').show();

一般的函数调用和链式调用的区别:调用完方法后,return this返回当前调用方法的对象。

function Dog(){
    this.run= function(){
      alert("The dog is running....");
      return this;//返回当前对象 Dog
    };
    this.eat= function(){
      alert("After running the dog is eatting....");
      return this;//返回当前对象 Dog

    };
    this.sleep= function(){
      alert("After eatting the dog is running....");
      return this;//返回当前对象 Dog

    };
  }
  //一般的调用方式;
/* var dog1 =new Dog();
  dog1.run();
  dog1.eat();
  dog1.sleep();*/
  var dog2 = new Dog();
  dog2.run().eat().sleep();

2、分解链式调用

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

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

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

如何实现操作对象与操作方法

创建一般的$函数:

function $(){
  var elements = [];
  for(var i= 0,len=arguments.length; i<len; i++){
    var element = arguments[i];
    if(typeof element==='string'){
      element = document.getElementById(element);
    }
    if(arguments.length==1){
      return element;
    }
    elements.push(element);
  }
  return elements;
}

但是,如果把这个函数改造为一个构造器,把那些元素作为数组保存在一个实例属性中,并让所有定义在构造器函数的prototype属性所指对象中的方法都返回用以调用方法的那个实例的引用,那么它就具有了链式调用的能力。(说了这么多,就是在每个方法最后return this;),

我首先需要把这个$函数改为一个工厂方法,它负责创建支持链式调用的对象。这个函数应该能接受元素数组形式的参数,以便我们能够使用与原来一样的公用接口。这样以来,它就具有了进行链式调用的能力。

改造后如下:

(function(){
  function _$(els){
    this.elements = [];//把那些元素作为数组保存在一个实例属性中,
    for(var i= 0, len=els.length; i<len; i++){
      var element = els[i];
      if(typeof element==='string'){
        element = document.getElementById(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; //在每个方法的最后return this;
    },
    setStyle: function(prop, val){
      this.each(function(el){
        el.style[prop] = val;
      });
      return this; //在每个方法的最后return this;
    },
    show: function(){
      var that = this;
      this.each(function(el){
        that.setStyle('display', 'block');
      });
      return this; //在每个方法的最后return this;
    },
    addEvent: function(type, fn){
      var add = function(el){
        if(window.addEventListener){
          el.addEventListener(type, fn, false);
        }else if(window.attachEvent){
          el.addEvent('on'+type, fn);
        }
      };
      this.each(function(el){
        add(el);
      });
      return this; //在每个方法的最后return this;
    }
  }
  window.$ = function(){
    return new _$(arguments);
  }
})();

在最后return this,这就将调用方法的对象传给调用链上的下一个方法。

3、模拟jquery底层链式编程

// 块级作用域
//特点1 程序启动的时候 里面的代码直接执行了
//特点2 内部的成员变量 外部无法去访问 (除了不加var修饰的变量)

(function(window , undefined){
  // $ 最常用的对象 返回给外界 大型程序开发 一般使用'_'作为私用的对象(规范)
  function _$(arguments){
    //实现代码...这里仅实现ID选择器
    // 正则表达式匹配id选择器
    var idselector = /#\w+/ ;
    this.dom ;   // 此属性 接受所得到的元素
    // 如果匹配成功 则接受dom元素  arguments[0] = '#inp'
    if(idselector.test(arguments[0])){
      this.dom = document.getElementById(arguments[0].substring(1));
    } else {
      throw new Error(' arguments is error !');
    }
  };

  // 在Function类上扩展一个可以实现链式编程的方法
  Function.prototype.method = function(methodName , fn){
    this.prototype[methodName] = fn ;
    return this ; //链式编程的关键
  }

  // 在_$的原型对象上 加一些公共的方法
  _$.prototype = {
    constructor : _$ ,
    addEvent:function(type,fn){
      // 给你的得到的元素 注册事件
      if(window.addEventListener){// FF 
        this.dom.addEventListener(type , fn);
      } else if (window.attachEvent){// IE
        this.dom.attachEvent('on'+type , fn);
      }
      return this ; 
    },
    setStyle:function(prop , val){
      this.dom.style[prop] = val ;
      return this ;
    }
  };


   // window 上先注册一个全局变量 与外界产生关系
  window.$ = _$ ;
  // 写一个准备的方法
  _$.onReady = function(fn){ 
    // 1 实例化出来_$对象 真正的注册到window上
    window.$ = function(){
      return new _$(arguments);
    };
    // 2 执行传入进来的代码
    fn();
    // 3 实现链式编程
    _$.method('addEvent',function(){
      // nothing to do
    }).method('setStyle',function(){
      // nothing to do
    });

  };

})(window); // 程序的入口 window传入作用域中


$.onReady(function(){
  var inp = $('#inp');
  //alert(inp.dom.nodeName);
  //alert($('#inp'));
  inp.addEvent('click',function(){
    alert('我被点击了!');
  }).setStyle('backgroundColor' , 'red');
});

4、使用回调函数从支持链式调用的方法获取数据

链式调用很适合于赋值器方法,但对于取值器方法,就不方便了,因为每个方法返回的都是this啊。

不过,变通的方法还是有的,那就是回调函数。

未使用回调函数时

//without callback
window.API = window.API || function(){
  var name = 'JChen';
  this.setName = function(newName){
    name = newName;
    return this;
  };
  this.getName = function(){
    return name;
  };
};
var o = new API();
console.log(o.getName());
console.log(o.setName('Haha').getName());

使用回调函数时

//with callback
window.API2 = window.API2 || function(){
  var name = 'JChen';
  this.setName = function(newName){
    name = newName;
    return this;
  };
  this.getName = function(callback){
    callback.call(this, name);
    return this;
  };
};
var o2 = new API2();
o2.getName(console.log).setName('Hehe').getName(console.log);

在使用回调函数时候callback.call(this, name)在一般情况下是没问题的,但是,这个例子偏偏用到了console.log,那么就有问题了。原因是console的this是指向console而不是winodw。

这个问题也很好解决。如下:

//with callback
window.API2 = window.API2 || function(){
  var name = 'JChen';
  this.setName = function(newName){
    name = newName;
    return this;
  };
  this.getName = function(callback){
    callback.call(this, name);
    return this;
  };
};
var o2 = new API2();
var log = function(para){
  console.log(para);
};
o2.getName(log).setName('Hehe').getName(log);

链式调用这种风格有助于简化代码的编写工作,让代码更加简洁、易读,同时也避免多次重复使用一个对象变量,希望大家可以熟练掌握。

Javascript 相关文章推荐
基于jQuery的淡入淡出可自动切换的幻灯插件打包下载
Sep 15 Javascript
服务器端的JavaScript脚本 Node.js 使用入门
Mar 07 Javascript
web css实现整站样式互相切换
Oct 29 Javascript
JavaScript数组深拷贝和浅拷贝的两种方法
Apr 16 Javascript
JQuery 实现在同一页面锚点链接之间的平滑滚动
Oct 29 Javascript
javascript判断移动端访问设备并解析对应CSS的方法
Feb 05 Javascript
jQuery中使用each处理json数据
Apr 23 Javascript
在JavaScript中处理数组之reverse()方法的使用
Jun 09 Javascript
jQuery使用unlock.js插件实现滑动解锁
Apr 04 jQuery
JavaScript闭包相关知识解析
Oct 19 Javascript
jQuery 隐藏/显示效果函数用法实例分析
May 20 jQuery
如何在vue中使用百度地图添加自定义覆盖物(水波纹)
Nov 03 Javascript
学习JavaScript设计模式(继承)
Nov 26 #Javascript
js图片跟随鼠标移动代码
Nov 26 #Javascript
学习JavaScript设计模式(封装)
Nov 26 #Javascript
JS实现密码框根据焦点的获取与失去控制文字的消失与显示效果
Nov 26 #Javascript
学习JavaScript设计模式(接口)
Nov 26 #Javascript
Jquery中request和request.form和request.querystring的区别
Nov 26 #Javascript
Jquery检验手机号是否符合规则并根据手机号检测结果将提交按钮设为不同状态
Nov 26 #Javascript
You might like
为了这两部电子管收音机,买了6套全新电子管和10粒刻度盘灯泡
2021/03/02 无线电
PHP中Enum(枚举)用法实例详解
2015/12/07 PHP
W3C Group的JavaScript1.8 新特性介绍
2009/05/19 Javascript
JS获取url链接字符串 location.href
2013/12/23 Javascript
jquery实现对联广告的方法
2015/02/05 Javascript
javasript实现密码的隐藏与显示
2015/05/08 Javascript
jquery实现两个图片渐变切换效果的方法
2015/06/25 Javascript
angularJS与bootstrap结合实现动态加载弹出提示内容
2015/10/16 Javascript
JavaScript 判断一个对象{}是否为空对象的简单方法
2016/10/09 Javascript
使用ReactJS实现tab页切换、菜单栏切换、手风琴切换和进度条效果
2016/10/17 Javascript
nodejs入门教程六:express模块用法示例
2017/04/24 NodeJs
深入理解NodeJS 多进程和集群
2018/10/17 NodeJs
React传值 组件传值 之间的关系详解
2019/08/26 Javascript
这15个Vue指令,让你的项目开发爽到爆
2019/10/11 Javascript
js通过循环多张图片实现动画效果
2019/12/19 Javascript
js实现贪吃蛇游戏(简易版)
2020/09/29 Javascript
手把手教你如何编译打包video.js
2020/12/09 Javascript
[44:51]2018DOTA2亚洲邀请赛 4.4 淘汰赛 VP vs Liquid 第二场
2018/04/05 DOTA
利用python写个下载teahour音频的小脚本
2017/05/08 Python
python的变量与赋值详细分析
2017/11/08 Python
详解python里的命名规范
2018/07/16 Python
python使用Plotly绘图工具绘制散点图、线形图
2019/04/02 Python
一行Python代码过滤标点符号等特殊字符
2019/08/12 Python
python程序中的线程操作 concurrent模块使用详解
2019/09/23 Python
python深copy和浅copy区别对比解析
2019/12/26 Python
Python 删除List元素的三种方法remove、pop、del
2020/11/16 Python
Sixt美国租车:高端豪华车型自驾体验
2017/09/02 全球购物
Christys’ Hats官网:英国帽子制造商
2018/11/28 全球购物
应用电子专业学生的自我评价
2013/10/16 职场文书
企业演讲稿范文
2013/12/28 职场文书
清明节扫墓活动方案
2014/03/02 职场文书
师范学院毕业生求职信
2014/06/24 职场文书
清明扫墓感想
2015/08/11 职场文书
Python趣味爬虫之用Python实现智慧校园一键评教
2021/05/28 Python
Python图像处理库PIL详细使用说明
2022/04/06 Python
springboot创建的web项目整合Quartz框架的项目实践
2022/06/21 Java/Android