尚学堂requireJs课程---2、模块
一、总结
一句话总结：
# 将代码以及使用放到独立的闭包中去，并且赋值给了变量，便于外部访问
# return出了函数和变量（放在一个json对象中）
# 百度的webuploader应该就是这么搞的，require.js的最基础原理也是这个
# 搞那么复杂就是为了解决一个作用域的问题
// 模块! var module = (function(){ var Demo = { } var hello = "hello"; function userInfo(){ var name = "iwen"; var age = 20; console.log(name); } return { userInfo:userInfo, hello:hello } })(); console.log(module.hello); module.userInfo();
1、js中通过对象实现变量不至于直接挂载到全局（缺点是外部可以修改，不符合开闭原则）？
用对象来定义变量
var infoObj = { name:"iwen", age:20, sex:"男" } // 不至于直接挂载到全局 console.log(infoObj.age); infoObj.age = 30; console.log(infoObj.age);
2、js作用域独立实例（外部不能修改，问题是外部无法使用）？
将代码以及使用放到独立的闭包中去
(function(){ function userInfo(){ var name = "iwen"; var age = 20; return { name:name, age:age } } console.log(userInfo().age); var info = userInfo() console.log(info.name); })();
3、js模块实例（在js作用域独立的基础上赋值给变量，便于外部访问）？
# 将代码以及使用放到独立的闭包中去，并且赋值给了变量，便于外部访问
# return出了函数和变量（放在一个json对象中）
# 百度的webuploader应该就是这么搞的，require.js的最基础原理也是这个
# 搞那么复杂就是为了解决一个作用域的问题
// 模块! var module = (function(){ var Demo = { } var hello = "hello"; function userInfo(){ var name = "iwen"; var age = 20; console.log(name); } return { userInfo:userInfo, hello:hello } })(); console.log(module.hello); module.userInfo();
二、内容在总结中
1 <!DOCTYPE html> 2 <html lang="en" dir="ltr"> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 </head> 7 <body> 8 9 <script type="text/javascript"> 10 /* 11 模块 12 设计模式规范： 13 开闭原则：对扩展开放，对修改关闭 14 */ 15 16 // var infoObj = { 17 // name:"iwen", 18 // age:20, 19 // sex:"男" 20 // } 21 // // 不至于直接挂载到全局 22 // console.log(infoObj.age); 23 // infoObj.age = 30; 24 // console.log(infoObj.age); 25 26 // 作用域独立 27 // (function(){ 28 // function userInfo(){ 29 // var name = "iwen"; 30 // var age = 20; 31 // return { 32 // name:name, 33 // age:age 34 // } 35 // } 36 // console.log(userInfo().age); 37 // var info = userInfo() 38 // console.log(info.name); 39 // })(); 40 41 // 模块! 42 var module = (function(){ 43 44 var Demo = { 45 46 } 47 var hello = "hello"; 48 49 function userInfo(){ 50 var name = "iwen"; 51 var age = 20; 52 console.log(name); 53 } 54 55 return { 56 userInfo:userInfo, 57 hello:hello 58 } 59 60 })(); 61 console.log(module.hello); 62 module.userInfo(); 63 64 65 66 </script> 67 68 </body> 69 </html>