1、什么是链式调用

这个很容易理解,例如:

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

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

  1. function Dog(){
  2. this.run= function(){
  3. alert("The dog is running....");
  4. return this;//返回当前对象 Dog
  5. };
  6. this.eat= function(){
  7. alert("After running the dog is eatting....");
  8. return this;//返回当前对象 Dog
  9. };
  10. this.sleep= function(){
  11. alert("After eatting the dog is running....");
  12. return this;//返回当前对象 Dog
  13. };
  14. }
  15. //一般的调用方式;
  16. /* var dog1 =new Dog();
  17. dog1.run();
  18. dog1.eat();
  19. dog1.sleep();*/
  20. var dog2 = new Dog();
  21. dog2.run().eat().sleep();

2、分解链式调用

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

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

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

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

创建一般的$函数:

  1. function $(){
  2. var elements = [];
  3. for(var i= 0,len=arguments.length; i<len; i++){
  4. var element = arguments[i];
  5. if(typeof element==='string'){
  6. element = document.getElementById(element);
  7. }
  8. if(arguments.length==1){
  9. return element;
  10. }
  11. elements.push(element);
  12. }
  13. return elements;
  14. }

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

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

改造后如下:

  1. (function(){
  2. function _$(els){
  3. this.elements = [];//把那些元素作为数组保存在一个实例属性中,
  4. for(var i= 0, len=els.length; i<len; i++){
  5. var element = els[i];
  6. if(typeof element==='string'){
  7. element = document.getElementById(element);
  8. }
  9. this.elements.push(element);
  10. }
  11. }
  12. _$.prototype = {
  13. each: function(fn){
  14. for(var i= 0,len=this.elements.length; i<len; i++){
  15. fn.call(this, this.elements[i]);
  16. }
  17. return this; //在每个方法的最后return this;
  18. },
  19. setStyle: function(prop, val){
  20. this.each(function(el){
  21. el.style[prop] = val;
  22. });
  23. return this; //在每个方法的最后return this;
  24. },
  25. show: function(){
  26. var that = this;
  27. this.each(function(el){
  28. that.setStyle('display', 'block');
  29. });
  30. return this; //在每个方法的最后return this;
  31. },
  32. addEvent: function(type, fn){
  33. var add = function(el){
  34. if(window.addEventListener){
  35. el.addEventListener(type, fn, false);
  36. }else if(window.attachEvent){
  37. el.addEvent('on'+type, fn);
  38. }
  39. };
  40. this.each(function(el){
  41. add(el);
  42. });
  43. return this; //在每个方法的最后return this;
  44. }
  45. }
  46. window.$ = function(){
  47. return new _$(arguments);
  48. }
  49. })();

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

3、模拟jquery底层链式编程

  1. // 块级作用域
  2. //特点1 程序启动的时候 里面的代码直接执行了
  3. //特点2 内部的成员变量 外部无法去访问 (除了不加var修饰的变量)
  4. (function(window , undefined){
  5. // $ 最常用的对象 返回给外界 大型程序开发 一般使用'_'作为私用的对象(规范)
  6. function _$(arguments){
  7. //实现代码...这里仅实现ID选择器
  8. // 正则表达式匹配id选择器
  9. var idselector = /#\w+/ ;
  10. this.dom ; // 此属性 接受所得到的元素
  11. // 如果匹配成功 则接受dom元素 arguments[0] = '#inp'
  12. if(idselector.test(arguments[0])){
  13. this.dom = document.getElementById(arguments[0].substring(1));
  14. } else {
  15. throw new Error(' arguments is error !');
  16. }
  17. };
  18. // 在Function类上扩展一个可以实现链式编程的方法
  19. Function.prototype.method = function(methodName , fn){
  20. this.prototype[methodName] = fn ;
  21. return this ; //链式编程的关键
  22. }
  23. // 在_$的原型对象上 加一些公共的方法
  24. _$.prototype = {
  25. constructor : _$ ,
  26. addEvent:function(type,fn){
  27. // 给你的得到的元素 注册事件
  28. if(window.addEventListener){// FF
  29. this.dom.addEventListener(type , fn);
  30. } else if (window.attachEvent){// IE
  31. this.dom.attachEvent('on'+type , fn);
  32. }
  33. return this ;
  34. },
  35. setStyle:function(prop , val){
  36. this.dom.style[prop] = val ;
  37. return this ;
  38. }
  39. };
  40. // window 上先注册一个全局变量 与外界产生关系
  41. window.$ = _$ ;
  42. // 写一个准备的方法
  43. _$.onReady = function(fn){
  44. // 1 实例化出来_$对象 真正的注册到window上
  45. window.$ = function(){
  46. return new _$(arguments);
  47. };
  48. // 2 执行传入进来的代码
  49. fn();
  50. // 3 实现链式编程
  51. _$.method('addEvent',function(){
  52. // nothing to do
  53. }).method('setStyle',function(){
  54. // nothing to do
  55. });
  56. };
  57. })(window); // 程序的入口 window传入作用域中
  58. $.onReady(function(){
  59. var inp = $('#inp');
  60. //alert(inp.dom.nodeName);
  61. //alert($('#inp'));
  62. inp.addEvent('click',function(){
  63. alert('我被点击了!');
  64. }).setStyle('backgroundColor' , 'red');
  65. });

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

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

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

未使用回调函数时

  1. //without callback
  2. window.API = window.API || function(){
  3. var name = 'JChen';
  4. this.setName = function(newName){
  5. name = newName;
  6. return this;
  7. };
  8. this.getName = function(){
  9. return name;
  10. };
  11. };
  12. var o = new API();
  13. console.log(o.getName());
  14. console.log(o.setName('Haha').getName());

使用回调函数时

  1. //with callback
  2. window.API2 = window.API2 || function(){
  3. var name = 'JChen';
  4. this.setName = function(newName){
  5. name = newName;
  6. return this;
  7. };
  8. this.getName = function(callback){
  9. callback.call(this, name);
  10. return this;
  11. };
  12. };
  13. var o2 = new API2();
  14. o2.getName(console.log).setName('Hehe').getName(console.log);

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

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

  1. //with callback
  2. window.API2 = window.API2 || function(){
  3. var name = 'JChen';
  4. this.setName = function(newName){
  5. name = newName;
  6. return this;
  7. };
  8. this.getName = function(callback){
  9. callback.call(this, name);
  10. return this;
  11. };
  12. };
  13. var o2 = new API2();
  14. var log = function(para){
  15. console.log(para);
  16. };
  17. o2.getName(log).setName('Hehe').getName(log);

5、总结

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

版权声明:本文为小平果原创文章,转载请注明:http://blog.csdn.net/i10630226

JavaScript设计模式 Item 5 --链式调用的更多相关文章

  1. JavaScript设计模式——方法的链式调用

    方法的链式调用: (function() { //私有类 function _$ (els) { this.elements = []; for(var i = 0, len = els.length ...

  2. 关于JavaScript中的setTimeout()链式调用和setInterval()探索

    http://www.cnblogs.com/Wenwang/archive/2012/01/06/2314283.html http://www.cnblogs.com/yangjunhua/arc ...

  3. JavaScript实现链式调用

    学习Jquery的时候,我们通常会看到链式调用的写法 $(window).addEvent('load', function(){ $('test').show().setStyle('color', ...

  4. JavaScript设计模式-8.链式调用

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  5. 《javascript设计模式》笔记之第六章:方法的链式调用

    这一章要实现的就是jQuery的那种链式调用,例子: $(this).setStyle('color', 'green').show(); 一:调用链的结构: 首先我们来看一下最简单的$()函数的实现 ...

  6. JavaScript中的链式调用

    链模式 链模式是一种链式调用的方式,准确来说不属于通常定义的设计模式范畴,但链式调用是一种非常有用的代码构建技巧. 描述 链式调用在JavaScript语言中很常见,如jQuery.Promise等, ...

  7. 简谈 JavaScript、Java 中链式方法调用大致实现原理

    相信,在 JavaScript .C# 中都见过不少链式方法调用,那么,其中实现该类链式调用原理,大家有没有仔细思考过?其中 JavaScript 类库:jQuery 中就存在大量例子,而在 C# 中 ...

  8. javascript学习(10)——[知识储备]链式调用

    上次我们简单的说了下单例的用法,这个也是在我们java中比较常见的设计模式. 今天简单说下链式调用,可能有很多人并没有听过链式调用,但是其实只要我简单的说下的话,你肯定基本上都在用,大家熟知的jQue ...

  9. js原生设计模式——2面向对象编程之js原生的链式调用

    技巧点:对象方法中返回当前对象就可以链式调用了,即方法中写return this; <!DOCTYPE html><html lang="en"><h ...

随机推荐

  1. Android开发技巧——实现可复用的ActionSheet菜单

    在上一篇<Android开发技巧--使用Dialog实现仿QQ的ActionSheet菜单>中,讲了这种菜单的实现过程,接下来将把它改成一个可复用的控件库. 本文原创,转载请注明出处: h ...

  2. 写一个python的服务监控程序

    写一个python的服务监控程序 前言: Redhat下安装Python2.7 rhel6.4自带的是2.6, 发现有的机器是python2.4. 到python网站下载源代码,解压到Redhat上, ...

  3. C语言之可变参实现scanf函数

    既然有printf函数可变参实现,那就一定有scanf函数的可变参实现.废话不多说,源码奉上: 本源码不过多分析,如要明白原理,请翻本博客以往的文章看说明. 欢迎关注新浪微博:http://weibo ...

  4. https认证

    HTTPS认证 说明 1. HTTPS协议的站点信息更加安全,同时可降低网站被劫持的风险,如网站同时存在HTTP和HTTPS站点,可使用本工具进行认证,便于百度搜索识别网站HTTP与HTTPS之间的对 ...

  5. iframe局部刷新的二种实现方法

    需求描述: 当页面有一部分是不变的或整个页面的图片很多时,可以考虑使用局部刷新,以提高整体的下载速度与用户体验.   1,iframe实现局部刷新的方法一 复制代码代码示例: <script t ...

  6. Java 理论与实践: 并发集合类

    Java 理论与实践: 并发集合类 DougLea的 util.concurrent 包除了包含许多其他有用的并发构造块之外,还包含了一些主要集合类型 List 和 Map 的高性能的.线程安全的实现 ...

  7. Memocache 详细的工作机制

    memcached集群 2013-04-26 13:56:37|  分类: memcached |  标签:集群  memcached  |举报|字号 订阅     集群架构方面的问题 memcach ...

  8. Odoo 学习 【二】Environment 概览

    Environment 参考链接: http://odoo-new-api-guide-line.readthedocs.io/en/latest/environment.html#environme ...

  9. POSTGRESQL 并发控制

    http://meidayhxp.blog.163.com/blog/static/117608156201210243837491/ 这个内容是官方Doc中的一章,具体是那一版的,还未确认. 第九章 ...

  10. Floyd 算法求多源最短路径

    Floyd算法: Floyd算法用来找出每对顶点之间的最短距离,它对图的要求是,既可以是无向图也可以是有向图,边权可以为负,但是不能存在负环(可根据最小环的正负来判定). 基本算法: Floyd算法基 ...