尚学堂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>