【问题】前端模块化

一、关于模块化

1. 发展

1. JS的诞生
   JS最开始只是为了实现简单的页面交互逻辑。
2. 简单命名空间
   使用对象封装，要求定义的最外层的变量不能重复

var boy = {
  name: "James",
  age: 23
};
var girl= {
  name: "Mary",
  age: 21
};
console.log(boy .name); // James
console.log(girl.name); // Mary

3. IIFE 立即调用函数表达式
   著名的JQuery就是的

(function (window) {
  // 变量定义
  var name = "James";
  // 操作方法
  var getName= function () {
    return name;
  }
  // 暴露对象
  window.boy = {
    getName: getName
  }
})(window);

2. 概念

模块化，将某一块功能的 JS 代码独立出来，成为一个单独的整体。

3. 优点

• 避免变量命名冲突和污染。
• 提高复用性。
• 方便维护和管理。

4. 缺点

• 需要引用很多文件，依赖关系与引入顺序强相关。
• 程序复杂了以后，依然难以维护和管理。

三、ES6 中的模块

ES6 引入了模块的概念，使用关键字 import，export，default
模块的语法可以参考 这里。

1. 设计思想

• ES6 模块的设计思想是尽量的静态化，使得编译时就能确定模块的依赖关系，以及输入和输出的变量。
• 这种加载称为“编译时加载”或者静态加载，即 ES6 可以在编译时就完成模块加载，效率要比 CommonJS 模块的加载方式高。
• 由于 ES6 模块是编译时加载，使得静态分析成为可能。有了它，就能进一步拓宽 JavaScript 的语法，比如引入宏（macro）和类型检验（type system）这些只能靠静态分析实现的功能。
• ES6 模块不是对象，而是通过export命令显式指定输出的代码，再通过import命令输入。
• 一个模块就是一个独立的文件。该文件内部的所有变量，外部无法获取。
  如果你希望外部能够读取模块内部的某个变量，就必须使用 export 关键字输出该变量，使用 import 关键字输入该变量。

2. export 命令

 export 命令用于规定模块的对外接口。
 export 命令可以出现在模块的任何位置，只要处于模块顶层就可以。
 export命令规定的是对外的接口，必须与模块内部的变量建立一一对应关系。

直接输出变量

export var name = 'ZhangLiang';
export var age = 65;

直接输出函数

export function sum(x, y) {
  return x + y;
};

整组输出（必须使用大括号）

var name = 'ZhangLiang';
var age = 65;
function sum(x, y) {
  return x + y;
}
export {
  name,
  age,
  sum
}

重命名

var name = 'ZhangLiang';
var age = 65;
function sum(x, y) {
  return x + y;
}
export {
  name as exportName,
  age,
  sum as selfSum
}

3. export default 命令

export default命令用于指定模块的默认输出。显然，一个模块只能有一个默认输出，因此export default命令只能使用一次。 
这时import命令后面，不使用大括号。
其他模块加载该模块时，import命令可以为该匿名函数指定任意名字。 

直接输出变量

// 输出
export default var name = 'ZhangLiang';
// 输入
import customName from './xxx.js';

最后输出变量（不使用大括号）

// 输出
function sum(x, y) {
  return x + y;
}
export default sum;
// 输入
import sum from './xxx.js';

4. import命令

 import 命令用于输入其他模块提供的功能。
 import 命令可以出现在模块的任何位置，只要处于模块顶层就可以。
 import 命令具有提升效果，会提升到整个模块的头部，首先执行。
 import 命令输入的变量都是只读的，因为它的本质是输入接口。

单个输入

import { name } from './xxx.js'
import { age } from './xxx.js'
import { sum } from './xxx.js'

整组输入（必须使用大括号）

import { name, age, sum  } from './xxx.js'

重命名

import { 
  name as importName,
  age,
  sum as selfSum
} from './xxx.js'

5. 模块的整体加载

整体加载，即用星号（*）指定一个对象，所有输出值都加载在这个对象上面。
一般都使用别名转一下。

import * from './xxx.js'

import * as famousPeople from './xxx.js'
console.log('姓名：' + famousPeople.name);
console.log('结果是：' + famousPeople.sum(2, 5));