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模块