1.  <!DOCTYPE html>
  2.  <html>
  3.      <head>
  4.          <meta charset="UTF-8">
  5.          <title>javascript高级语法8-链式调用</title>
  6.      </head>
  7.      <body>
  8.          <div id="box"></div>
  9.          <script type="text/javascript">
  10.              function demo1(){
  11.              (function(){
  12.                  //创建一个cat类
  13.                  function Cat(name){
  14.                      this.name = name;
  15.                      this.run = function(){
  16.                          document.write(this.name+" start run"+"<br/>")
  17.                      }
  18.                      this.stopRun = function(){
  19.                          document.write(this.name+" stop run"+"<br/>")
  20.                      }
  21.                      this.sing = function(){
  22.                          document.write(this.name+" start singing"+"<br/>")
  23.                      }
  24.                      this.stopSing = function(){
  25.                          document.write(this.name+" stop sing"+"<br/>")
  26.                      }
  27.                  }
  28.                  //测试
  29.                  var c = new Cat("maomi");
  30.                  c.run();
  31.                  c.sing();
  32.                  c.stopRun();
  33.                  c.stopSing();
  34.              })()}
  35.  
  36.              function demo2(){
  37.              (function(){
  38.                  //创建一个cat类
  39.                  function Cat(name){
  40.                      this.name = name;
  41.                      this.run = function(){
  42.                          document.write(this.name+" start run"+"<br/>")
  43.                          return this;
  44.                      }
  45.                      this.stopRun = function(){
  46.                          document.write(this.name+" stop run"+"<br/>")
  47.                          return this;
  48.                      }
  49.                      this.sing = function(){
  50.                          document.write(this.name+" start singing"+"<br/>")
  51.                          return this;
  52.                      }
  53.                      this.stopSing = function(){
  54.                          document.write(this.name+" stop sing"+"<br/>")
  55.                          return this;
  56.                      }
  57.                  }
  58.                  //测试
  59.                  var c = new Cat("lili");
  60.                  c.run().sing().stopRun().stopSing();
  61.  
  62.              })()
  63.              }
  64.  
  65.              //为了给类（Function类）扩展函数，定义一个它的静态函数
  66.              Function.prototype.method = function(name,fn){
  67.                  this.prototype[name] = fn;
  68.                  return this;
  69.              };
  70.              (function(){
  71.                  //模仿jquery链式调用
  72.                  function _$(els){};
  73.                  //准备方法
  74.                  _$.onready = function(fn){
  75.                      //按需求把对象（_$）注册到window上
  76.                      window.$ = function(){
  77.                          return new _$(arguments);
  78.                      }
  79.                      fn();
  80.                  }
  81.                  //链式的对象增加jquery库提供的操作函数。
  82.                  _$.method("addEvent",function(type,fn){
  83.                      fn();
  84.                  }).method("getEvent",function(fn,e){
  85.                      fn();
  86.                  }).method("addClass",function(className,fn){
  87.                      fn();
  88.                  }).method("removeClass",function(className,fn){
  89.                      fn();
  90.                  }).method("replaceClass",function(oldClass,newClass){
  91.                      fn();
  92.                  }).method("getStyle",function(el,fn){
  93.                      fn();
  94.                  }).method("setStyle",function(el,fn){
  95.                      fn();
  96.                  }).method("load",function(url,fn){
  97.                      fn();
  98.                  })    
  99.  
  100.                  //开始使用
  101.                  _$.onready(function(){
  102.                      $("#box").addEvent("click",function(){
  103.                          alert("click event")
  104.                      })
  105.                  })
  106.              })()
  107.          </script>
  108.      </body>
  109.  </html>

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

  1. JavaScript中的链式调用

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

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

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

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

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

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

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

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

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

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

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

  7. JavaScript实现链式调用

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

  8. 如何写 JS 的链式调用 ---》JS 设计模式《----方法的链式调用

    1.以$ 函数为例.通常返回一个HTML元素或一个元素集合. 代码如下: function $(){ var elements = []; ;i<arguments.length;i++){ v ...

  9. JavaScript链式调用

    1.什么是链式调用? 这个很容易理解,例如 $('text').setStyle('color', 'red').show(); 一般的函数调用和链式调用的区别:链式调用完方法后,return thi ...

随机推荐

  1. PHP 实现简单搜索功能

    方案:问答搜索 1. 搜索结果列表,高亮显示搜索关键词内容 2. 用户输入内容,点击搜索        2.1 获取用户的搜索内容:        2.2 调用分词服务,获取对搜索内容的分词:     ...

  2. ASP.NET Core 中的应用程序启动 Startup

      ASP.NET Core 应用使用Startup类来作为启动类.   Startup类中包含了ConfigureServices方法,Configure方法,IConfiguration,IHos ...

  3. Android Camera的使用（一） 读书笔记

    原文地址 https://blog.csdn.net/junzia/article/details/52301199 拍照步骤1.添加权限2.开启相机时check一下是否有摄像头3.对预览大小.照片大 ...

  4. Win7/Win8/Win8.1下配置apache+php运行缓慢问题解决方法

    将以下内容复制另存为 xxx.reg,双击导入后重启机器! Windows Registry Editor Version 5.00 [HKEY_LOCAL_MACHINE\SYSTEM\Curren ...

  5. Hibernate 之HQL数据查询

    1. HQL简介 HQL是面向对象的查询语言,与SQL查询语言相比,虽然在语法上类似,都是运行时进行解析,但HQL并不像SQL那样操作的是数据表,列等数据库对象,HQL所操作的对象是类,对象,属性等. ...

  6. SSH小项目整合的简单记录

    第一步.导入sprint4.struts2和hibernate4的jar包 struts2的jar包 commons-fileupload-1.3.3.jar commons-io-2.5.jar c ...

  7. sharepoint 版本信息查看

    #检查版本:# PowerShell script to display SharePoint products from the registry. Param( # decide on wheth ...

  8. Redis数据库结构与读写原理

    此文已由作者赵计刚薪授权网易云社区发布. 欢迎访问网易云社区,了解更多网易技术产品运营经验. 1.数据库结构 每一个redis服务器内部的数据结构都是一个redisDb[],该数组的大小可以在redi ...

  9. C博客的第1次作业--分支，顺序结构

    1.本章学习总结 1.1 思维导图 1.2本章学习体会,代码量学习体会 1.2.1学习体会 初步了解什么是C语言,明白了这门语言的基本运行功能.了解了关于c语言结构上,语法上的基本知识.下一步要进一步 ...

  10. oracle根据四位年周取当周周一的日期函数

    create or replace function FUNC_GET_DATE_BY_WEEK( theYearWeek IN VARCHAR2)return date is normalDate ...