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