文档章节

javascript设计模式 第6章 链式调用

Q_z
 Q_z
发布于 2014/12/25 23:49
字数 1043
阅读 915
收藏 58

链式调用是一种语法招数。
作用:能让你通过重用一个初始化操作来达到用少量代码表达复杂操作的目的、。

这种技术包含两个部分:
 1.一个创建代表html元素的对象的工厂。以及一批对这个html元素执行某些操作的方法。
 通过例子对比:之前和之后的代码,对链式调用的概念的初步认识。
  之前:

  addevent($('example'),"click",function(){

   setstyle(this,"color",'green');

   show(this);

  })

  执行链式调用:

   $(".example").addevent("click",function(){
    $(this).setstyle('color','green').show();
   })

 6.1调用链的结构

  function $(){

   var elements = [];

   for(var i=0;len = arguments.length,i<lengt;++i){

    var element = arguments[i];

    if(typeof element ==="string"){

     element = document.getElementById(element);

    }

    if(arguments,length===1){

     return element;

    }

    element.push(element);

   }

    return elements;

  }

  
 ---------改造--------------------
  步骤:
   1.把这个函数改造为一个构造器,把那些元素作为数组保存在一个实例属性中。
   2.让所有定义在构造器函数的prototype属性所指对象中的方法都返回用以调用方法的那个实例的引用,那么他就具有了链式调用的能力。
   3. 首页需要把$函数改为一个工厂方法。他负责创建支持链式调用的对象。
   4.这个函数应该能接受元素数组形式的参数,以便我们能够使用与原来一样的公有接口

   (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);

     }

    }

    window.$ = function(){

     return new _$(arguments);

    }

   })()

 ---------------深入改造- 摩擦摩擦 似魔鬼步伐,一步、两步------------------
 
 所有对象都会继承其原型对象的属性的方法。我们可以让定义在原型对象中那几个方法都返回用以调用方法的实例对象的引用。这些就可以对那些方法进行链式调用了。
 实例:把_$这个私有构造函数的prototype对象中添加方法。以便实现链式调用:

  (function(){
   function _$(els){
   }
   _$.prototype = {
    each:function(fn){
     for(var i=0,length = this.elements.length;i<len;++i){
      fn.call(this,this.elements[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","block");
     })
     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);
      });
      return this;
     }
    };
    window.$ = function(){
     return new _$(argments);
    }
   }
  })()


 -------------------类分析----------在这光滑地上摩擦----------
  1.该类的每一个方法的最后一行都是以return this 结束
  2.这将会用以调用方法的对象传给调用连上的下一个方法。

 ---------测试用例------------------妈的等了好久,虽然还有好多我不懂的,但是还是想试试,内心默默的激动-------

 $(window).addEvent('load',function(){

  $("test-1","test-2").show().setstyle('color','red').addevent("click",function(e){

   $(this).setstyle('color','green');

  })

 })

 -----------fuck ~O^O~  这种方式确实在使用jquery的时候用到--------淡淡的忧伤--,好好学习啊~o~

--------------------------------新章节继续,雅蠛蝶(6.2 设计一个支持方法调用的javascript库)-------------------------------------------------------------有木有吓尿了感觉,紧张-----------------------
 常见的大多数javascript库的特性
  1.事件,添加和删除事件监听器,对事件对象进行规范化出
  2.dom:类名管理;样式管理
  3.ajax:对xmlhttprequest进行规范发处理


 6.3 使用回调从支持链式调用的方法获取数据 -------------》(说实在的感觉很实用)
  一个章节总是需要描述的用法和使用场景:
   下面见:zzzZZZ
    1。链式调用很适合赋值器方法,但是对于取值方法,我们希望返回的是数据不是this.
    2.所有需要变通的犯法:使用回调技术来返回所要的数据。(fuck,确实牛逼啊,森森的佩服啊, *@_@*
    3.通过例子掩饰总方法
     api1类使用普通的取值器(中断了调用链),

     window.api = window.api || function(){
      var name ="hello word";
      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("meow").getname());

     高级模式------>回调方式

window.api1= window.api2 || function(){

      var name = "hello word"

      this.setname  =  function(newname){

       name = newname;

       retrun this;

      }

      //重要的步骤

      this.getname = function(callback){

       callback.call(this,name);

       return this;

      }

     }


-------------------------------end 23:40--- 有点疲惫----- (-_-)ZZZ 睡著了啦~~ -------------------------


 

© 著作权归作者所有

Q_z

Q_z

粉丝 18
博文 17
码字总数 14466
作品 0
成都
程序员
私信 提问
《JavaScript设计模式与开发实践》原则篇(2)—— 最少知识原则

最少知识原则(LKP)说的是一个软件实体应当尽可能少地与其他实体发生相互作用。这 里的软件实体是一个广义的概念,不仅包括对象,还包括系统、类、模块、函数、变量等。 单一职责原则指导我们...

嗨呀豆豆呢
2018/12/30
0
0
《JavaScript设计模式与开发实践》最全知识点汇总大全

系列文章: 《JavaScript设计模式与开发实践》基础篇(1)—— this、call 和 apply 《JavaScript设计模式与开发实践》基础篇(2)—— 闭包和高阶函数 《JavaScript设计模式与开发实践》模式...

嗨呀豆豆呢
01/04
0
0
《JavaScript 模式》知识点小抄本(下)

介绍 最近开始给自己每周订个学习任务,学习结果反馈为一篇文章的输出,做好学习记录。 这一周(02.25-03.03)我定的目标是《JavaScript 模式》的第七章学习一遍,学习结果的反馈就是本篇文章啦...

pingan8787
03/04
0
0
《JavaScript设计模式与开发实践》模式篇(12)—— 装饰者模式

在传统的面向对象语言中,给对象添加功能常常使用继承的方式,但是继承的方式并不灵活, 还会带来许多问题:一方面会导致超类和子类之间存在强耦合性,当超类改变时,子类也会随之 改变;另一方...

嗨呀豆豆呢
2018/12/25
0
0
Javascript策略模式理解以及应用

最近一直在看Javascript设计模式,想通过写文章来增加自己对策略模式的理解,同时记录自己学习的经历。希望大家看完之后觉得有收获可以帮忙点个赞表示支持。 策略模式的定义 策略模式的定义是...

arzh
2018/12/18
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Redox OS 发布 0.5 版

Redox OS 是一个几乎完全以 Rust 语言编写的通用操作系统及周围生态(例如文件系统、显示服务器及 Rust 版本的 libc)。其遵循微内核架构,在一定程度上兼容于 POSIX。 该项目于日前发布了 ...

linuxCool
33分钟前
0
0
更新上传git/gitee项目时出现密码配置错误(incorrect username or password)的解决办法

1.输入【git remote add origin git地址】 命令时出现incorrect username or password的错误,这是因为之前弹出输入账户和密码时输错了,而且会一直默认错误的账户和密码,因此需要把之前输入...

west_coast
40分钟前
0
0
Jenkins基础入门-1-Jenkins简单介绍和环境安装

如果在做自动化测试的朋友,应该熟悉Jenkins,或者至少使用过。如果一个人没有使用过Jenkins或者hudson,hudson是Jenkins的前身,他还说自己做过自动化测试,只能说,他只不过是在做半自动化...

shzwork
41分钟前
0
0
linux上解压版安装jdk,tomcat

需要的安装包 1.vmware12 2.centos7版本 3.安装完成后需要xshell来连接远程虚拟机,虚拟机保证要联网,网络畅通。 4.xftp用来向linux传输文件用,一般来说xshell和xftp配套使用 5.对应的压缩...

architect刘源源
今天
26
0
使用 spring 的 IOC 解决程序耦合

工厂模式解耦 在实际开发中我们可以把三层的对象都使用配置文件配置起来,当启动服务器应用加载的时候,让一个类中的方法通过读取配置文件,把这些对象创建出来并存起来。在接下来的使用的时...

骚年锦时
今天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部