JS模塊化

模塊化的好處：1.避免命名衝突

                          2.更好的分離，按需加載

                          3.更高的複用性

                          4.高可維護性

    <script type="text/javascript" src="module1.js"></script>
    <script type="text/javascript" src="module2.js"></script>
    <script type="text/javascript" src="module3.js"></script>
    <script type="text/javascript" src="module4.js"></script>

 

問題：               1.引入文件過多

                          2.依賴模糊

                          3.難以維護

1.閉包IIFE模式

var loadingRender = (function (window,$) {
var a = 1;
    return {
        init: function () {
        }
    }
})(window,jQuery)
loadingRender.init()

好處：模塊內變量不受外界干擾；外面沒法修改內部變量；只暴漏一個初始化的接口

2.服務器端commonJS使用方法

## Node.js模塊化教程生成webpack文件 npm init
1. 下載安裝node.js
2. 建立項目結構
  ```
  |-modules
    |-module1.js
    |-module2.js
    |-module3.js
  |-app.js
  |-package.json
    {
      "name": "commonJS-node", //姓名不能中文，和大寫
      "version": "1.0.0"
    }
  ```
3. 下載第三方模塊
  * npm install uniq --save
4. 模塊化編碼

/*暴露一個對象*/
module.exports = {
    msg:'module',
    foo(){
        console.log(this.msg)
    }
};

/*暴露一個函數*/
module.exports = function () {
  console.log('module2')
}

/*exports對象暴露出去*/
exports.foo = function () {
  console.log('module3')
}
exports.arr = [1,2,3,4,5,6,1,2,3,1,2];

調用

/*第三方模塊引用*/
let uniq = require('uniq');
/*自定義模塊引用*/
let module1 = require('./modules/module');
let module2 = require('./modules/module2');
let module3 = require('./modules/module3');
/*執行方法*/
module1.foo();
module2();
module3.foo();
let ary = uniq(module3.arr);
console.log(ary)

5. 經過node運行app.js
  * 命令: node app.js
  * 工具: 右鍵-->運行

3.在瀏覽器中使用commonjs## Browserify模塊化使用教程1. 建立項目結構

 ```
 |-js
 |-dist //打包生成文件的目錄
 |-src //源碼所在的目錄
 |-module1.js
 |-module2.js
 |-module3.js
 |-app.js //應用主源文件
 |-index.html
 |-package.json
 {
 "name": "browserify-test",
 "version": "1.0.0"
 }
 ```
2. 下載browserify
 * 全局: npm install browserify -g
 * 局部: npm install browserify --save-dev dev開發環境依賴 save注入依賴
3. 定義模塊代碼
 * module1.js
 ```
 module.exports = {
 foo() {
 console.log('moudle1 foo()')
 }
 }
 ```
 * module2.js
 ```
 module.exports = function () {
 console.log('module2()')
 }
 ```
 * module3.js
 ```
 exports.foo = function () {
 console.log('module3 foo()')
 }
 
 exports.bar = function () {
 console.log('module3 bar()')
 }
 ```
 * app.js (應用的主js)
 ```
 //引用模塊
 let module1 = require('./module1')
 let module2 = require('./module2')
 let module3 = require('./module3')
 
 let uniq = require('uniq')
 
 //使用模塊
 module1.foo()
 module2()
 module3.foo()
 module3.bar()
 
 console.log(uniq([1, 3, 1, 4, 3]))
 ```
* 打包處理js:
 * browserify js/src/app.js -o js/dist/bundle.js* 頁面使用引入: <script type="text/javascript" src="js/dist/bundle.js"></script> ；4.ES6模塊