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>
时间： 2024-10-22 23:36:06