js模块化

目的：模块相互独立 可重复使用 避免命名冲突和文件依赖
方式：

1. 命名空间

let module = {
  name: 'likang xie',
  sayName() {
    console.log(this.name);
  }
}

2. 立即执行函数+闭包: 函数内部有自己的独立作用域 外部只能访问自己暴露的成员 而不能访问私有变量

let module = (function () {
  let privateName = 'private'; // 私有变量
  let privateFn = function () {}; // 私有函数
  
  // 对外暴露的成员
  return {
    name: 'likang xie', // 公有属性
    sayName() { // 公有方法
      console.log(this.name);
    }
  }
})();

// 外部调用
module.sayName(); // likang xie 

3. commonjs：用于node环境 同步加载模块

// module.js
let name = 'liakng xie';
let sayName = function () {
  console.log(name);
};

module.exports = { name, sayName }

// 或者
exports.sayName = sayName;
// 通过 require 引入依赖
let module = require('./module.js');
module.sayName(); // likang xie

4. module模块：静态加载（在变异时就能确定依赖关系）
   import()返回一个promise对象 是异步加载
   浏览器支持es6

<script type="module">
  import * as fn from './b.js';
</script>

5. amd用于浏览器环境 采用异步方式加载模块

define(['module'], function() {
  let name = 'likang xie';

  function sayName() {
    console.log(name);
  }
  
  return { sayName }
})
// 通过 require 引入依赖
require(['module'], function(mod) {
   mod.sayName(); // likang xie
})

6. webpack打包 思想是一切皆模块css是模块，js是模块，图片是模块。并且提供了一些列模块加载(各种-loader)来编译模块。
7. umd 通用模块

(function (global, factory) {
    typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
    typeof define === 'function' && define.amd ? define(factory) :
    (global.libName = factory());
}(this, (function () { 'use strict';})));