11.1 在javasacript之前的版本中模块化代码

通过立即执行函数的必包实现模块。

11.2 ES6模块

1、ES6优缺点和思想

• es6结合了commonjs和AMD优点，
  • 与commonjs类似，es6模块语法相对简单，基于文件（一个文件是一个模块）
  • 与AMD类似，ES6支持异步模块加载。
• 浏览器尚未支持ES6，使用需编译，如Babel；
• 思想：
  • 必须显式的使用export导出模块变量，才能在外部访问模块变量。否则，就算是模块内的全局变量，在模块外部也访问不到；这样做的好处是可以避免滥用全局变量而让代码更安全。
• 两个关键字
  • export 导出
  • import 导入

2、导出和导入

导出

//定义时导出
export const message = "hi"; 
export function message (){ };

//导出模块标识符
const body = "hello";
function head (){ };
export { body,head }; //一一罗列导出的变量

//导入
import { body,head } from "example.js"; //一一罗列导入的变量
import * as newModule from "example.js";//导出这个文件所有可导出的变量为一个新模块，并取别名newModule
// 使用 newModule.head();

//默认导出
export default class ninjia(){}
export function getClass(){} //定义默认导出还可以指定导出的名称

//默认导出的导入
import newNinjia from "example.js";//导入默认导出不需要加花括号，可以重命名，直接使用，不需要加newModule.head();

//有默认导出和其他导出的导入 简写","
import newNinjia,{getClass} from 

//导出重命名
export {sayHi as sayHello}; //导出重命名
import {sayHello} from "example.js"; //导入则必须使用重命名导入 无法使用原始变量导入

//导入重命名
//当需要导入的模块名称冲突时，可使用as修改别名，当然，修改后不能使用原名访问
import {greet as sayHello} from "example.js";
import {greet as sayHi} from "example.js";