首页 > 代码库 > JavaScript设计模式-8.链式调用

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

2024-10-28 02:53:02   207人阅读

  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             
 66             //为了给类（Function类）扩展函数，定义一个它的静态函数
 67             Function.prototype.method = function(name,fn){
 68                 this.prototype[name] = fn;
 69                 return this;
 70             };
 71             (function(){
 72                 //模仿jquery链式调用
 73                 function _$(els){};
 74                 //准备方法
 75                 _$.onready = function(fn){
 76                     //按需求把对象（_$）注册到window上
 77                     window.$ = function(){
 78                         return new _$(arguments);
 79                     }
 80                     fn();
 81                 }
 82                 //链式的对象增加jquery库提供的操作函数。
 83                 _$.method("addEvent",function(type,fn){
 84                     fn();
 85                 }).method("getEvent",function(fn,e){
 86                     fn();
 87                 }).method("addClass",function(className,fn){
 88                     fn();
 89                 }).method("removeClass",function(className,fn){
 90                     fn();
 91                 }).method("replaceClass",function(oldClass,newClass){
 92                     fn();
 93                 }).method("getStyle",function(el,fn){
 94                     fn();
 95                 }).method("setStyle",function(el,fn){
 96                     fn();
 97                 }).method("load",function(url,fn){
 98                     fn();
 99                 })    
100                 
101                 //开始使用
102                 _$.onready(function(){
103                     $("#box").addEvent("click",function(){
104                         alert("click event")
105                     })
106                 })
107             })()
108         </script>
109     </body>
110 </html>

 

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


联系
我们