[js] 设计模式 The Module Pattern (模块模式)
#
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title></title> 7 </head> 8 9 <body> 10 <script> 11 var outer = '外部参数。'; 12 var testModule = (function(x) { 13 //cba:'boom'+x;//error 14 var variable = '私有变量与' + x; 15 var myPrivateMethod1 = function(foo) { 16 console.log('私有方法1'); 17 console.log(foo); 18 }; 19 20 function myPrivateMethod2(foo) { 21 console.log('私有方法2'); 22 console.log(foo); 23 }; 24 var myPrivateMethod3 = function(foo) { 25 console.log('私有方法3'); 26 console.log(foo); 27 }; 28 29 function myPrivateMethod4(foo) { 30 console.log('私有方法4'); 31 console.log(foo); 32 }; 33 console.log('导入混入写法'); 34 return { 35 inner: '内部属性。', 36 first: function(n) { 37 console.log("内部方法first"); 38 variable = '内部函数可导入:' + variable + this.inner + n + x; 39 return variable; 40 }, 41 second: function(m) { 42 console.log("内部方法second"); 43 console.log("现在私有变量的值：" + variable); 44 console.log(m); 45 //console.log(inner);//error 46 this.inner = '改变内部属性。'; 47 variable = '改变私有变量。'; 48 myPrivateMethod1('私有方法1的参数'); 49 myPrivateMethod2('私有方法2的参数'); 50 }, 51 third: myPrivateMethod3 52 //third: myPrivateMethod4 //一样可行 53 }; 54 // console.log('导出写法'); 55 // var exports = {}; 56 // exports.inner = '内部属性。'; 57 // exports.first = function(n) { 58 // console.log("内部方法first"); 59 // variable = '内部函数可导入:' + variable + this.inner + n + x; 60 // return variable; 61 // }; 62 // exports.second = function(m) { 63 // console.log("内部方法second"); 64 // console.log("现在私有变量的值：" + variable); 65 // console.log(m); 66 // this.inner = '改变内部属性。'; 67 // variable = '改变私有变量。'; 68 // myPrivateMethod1('私有方法1的参数'); 69 // myPrivateMethod2('私有方法2的参数'); 70 // }; 71 // exports.third = myPrivateMethod3; 72 // return exports; 73 })(outer); 74 //var outer = 110;//error，变量的创建要在使用前 75 console.warn(testModule.inner); 76 testModule.first('first内部参数1。'); 77 testModule.second('second内部参数1。'); 78 console.warn(testModule.inner); 79 var returnv = testModule.first('first内部参数2。'); 80 console.warn(returnv); 81 //myPrivateMethod1('外部试试1');//error 82 //myPrivateMethod2('外部试试2');//error 83 testModule.third('third内部参数1。'); 84 </script> 85 </body> 86 87 </html>
