1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <title>JS中Module模式基本和高级用法.htm</title>
5
6 <script src="jquery-1.3.2.min.js" type="text/javascript"></script>
7
8 <script src="js/blogModule.js" type="text/javascript"></script>
9 </head>
10 <body>
11 <span>code：</span>
12 <input type="text" name="txteq" id="eq" />
13 </body>
14 </html>
15
16 <script type="text/javascript" language="javascript">
17 /*----基本用法----*/
18 /*知识点*/
19 /*(jQuery,YAHOO) 函数最后的这种写法是 函数的自执行 函数的参数就是这两个变量*/
20 /*例1*/
21 var Calculator = function(id) {
22 //这里可以声明私有成员
23
24 var eqCtl = document.getElementById(id);
25 return {
26 // 暴露公开的成员
27 add: function(x, y) {
28 var val = x + y;
29 eqCtl.value = val;
30 }
31 };
32 };
33 /*调用*/
34 var id = "eq";
35 var calculator = new Calculator(id);
36 calculator.add(2, 2);
37 /*引用全局变量*/
38 (function($) {
39 // 这里，我们的代码就可以使用全局的jQuery对象了，YAHOO也是一样
40 } (jQuery));
41 /*例2*/
42 var blogModule = (function() {
43 var my = {}, privateName = "博客园";
44
45 function privateAddTopic(data) {
46 //这里是内部处理代码
47 }
48
49
50 my.name = privateName;
51 my.AddTopic = function(data) {
52 privateAddTopic(data);
53 };
54 my.text = "";
55 my.passwold = "";
56 my.email = "";
57
58
59 return my;
60 } ());
61 var data;
62 blogModule.AddTopic(data);
63 var name = blogModule.name;
64 var text = blogModule.text;
65 var passwold = blogModule.passwold;
66 var email = blogModule.email;
67 //==========解释===========================
68 //以上声明了一个全局变量blogModule，
69 //并且带有5个可访问的属性:AddTopic(),name,text...... ,
70 //其他函数都在匿名函数的闭包里
71 //保持私有状态,而且我们也可以很方便的将其他的全局变量传入
72 //========================================
73
74
75 /*----高级用法----*/
76
77 /*例3*/
78 /*----紧耦合扩展----*/
79 var blogModule = (function(my) {
80 var privateName = "博客园";
81 my.AddPhto = function() {
82 //内部处理代码
83
84 alert(privateName);
85 };
86 return my;
87 } (blogModule));
88 /* 例4*/
89 /*----松耦合扩展----*/
90 var blogModule = (function(my) {
91 var privateName = "博客园";
92 my.AddPhto = function() {
93 //内部处理代码
94
95 alert(privateName);
96 };
97 return my;
98 } (blogModule || {}));
99 /*例3 例4对比结论*/
100 //虽然松耦合扩展很牛叉了，但是可能也会存在一些限制，
101 //比如你没办法重写你的一些属性或者函数，也不能在初
102 //始化的时候就是用Module的属性。紧耦合扩展限制了加
103 //载顺序，但是提供了我们重载的机会
104 /*例5*/
105 var blogModule = (function(my) {
106 var oldAddPhtoMethod = my.AddPhto;
107 my.AddPhto = function() {
108 //重载方法 依然可以通过oldAddPhtoMethod调用旧方法
109 };
110 } (blogModule));
111
112 /*克隆与继承*/
113 var blogModule = (function(old) {
114 var my = {},
115 key;
116 for (key in old) {
117 if (old.hasOwnProperty(key)) {
118 my[key] = old[key];
119
120 }
121 }
122 var oldAddPhtoMethod = old.AddPhto;
123 my.AddPhto = function() {
124 alert(typeof my);
125 //克隆以后进行了重写，当然也可以调用旧的方法
126 };
127
128 return my;
129
130 } (blogModule));
131 var myblogmodule =blogModule();
132 myblogmodule.AddPhto();
133
134 </script>
View Code
