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>