ES6知识点-模块Module

4.5模块Module

4.5.1概念

• ES6 之前，制定了一些模块加载方案，最主要的有 CommonJS 和 AMD 两种。

• CommonJS用于服务器，AMD用于浏览器。

• ES6 在语言标准的层面上，实现了模块功能，成为浏览器和服务器通用的模块解决方案。

• ES6 模块的设计思想是尽量的静态化，使得编译时就能确定模块的依赖关系，以及输入和输出的变量。

  // CommonJS模块
  let { stat, exists, readFile } = require('fs');
  // 等同于
  let _fs = require('fs');
  let stat = _fs.stat, exists = _fs.exists, readfile = _fs.readfile;
  //★结果分析：这种加载称为“运行时加载”，
  //因为只有运行时才能得到这个对象，导致完全没办法在编译时做“静态优化”

• “编译时加载”或者静态加载

  • 即 ES6 可以在编译时就完成模块加载，效率比 CommonJS 模块的加载方式高。
  • 使用整体加载，即用星号（*）指定一个对象，所有输出值都加载在这个对象上面。

• 模块功能主要由两个命令构成：export 和 import。

  • export命令用于规定模块的对外接口
  • import命令用于输入其他模块提供的功能。

4.5.2严格模式

• ES6 的模块自动采用严格模式，不管你有没有在模块头部加上"use strict";。
• 严格模式主要有以下限制:
  • 变量必须声明后再使用；
  • 函数的参数不能有同名属性，否则报错；
  • 不能使用with语句；
  • 不能对只读属性赋值，否则报错；
  • 不能使用前缀0表示八进制数，否则报错；
  • 不能删除不可删除的属性，否则报错；
  • 不能删除变量delete prop，会报错，只能删除属性delete global[prop]；
  • eval不会在它的外层作用域引入变量；
  • eval和arguments不能被重新赋值；
  • arguments不会自动反映函数参数的变化；
  • 不能使用arguments.callee；
  • 不能使用arguments.caller；
  • 禁止this指向全局对象；
  • 不能使用fn.caller和fn.arguments获取函数调用的堆栈；
  • 增加了保留字（比如protected、static和interface）。

4.5.3export 命令

• 一个模块就是一个独立的文件。该文件内部的所有变量，外部无法获取。

• 如果你希望外部能够读取模块内部的某个变量，就必须使用export关键字输出该变量。

• 对外部输出变量的方式：

  //方式一：var 
  export var firstName = 'jack';
  export var lastName = 'huang';
  //方式二：大括号
  var firstName = 'jack';
  var lastName = 'huang';
  export { firstName,lastName }
  //方式三：输出函数或类（class）
  export function addd(x, y) {return x * y;};
  //方式四：可以使用as关键字重命名
  var firstName = 'jack';
  var lastName = 'huang';
  export { firstName as f1, lastName as f2}

4.5.4import 命令

• 其他 JS 文件就可以通过import命令加载这个模块。

• 注意，import命令具有提升效果，会提升到整个模块的头部，首先执行。

• import命令接受一对大括号，里面指定要从其他模块导入的变量名。大括号里面的变量名，必须与被导入模块（main.js）对外接口的名称相同。

• 如果想为输入的变量重新取一个名字，import命令要使用as关键字，将输入的变量重命名。

• import后面的from指定模块文件的位置，可以是相对路径，也可以是绝对路径，.js路径可以省略。

  // a.js
  import {firstName, lastName} from './main.js';
  console.log(firstName)
  
  import {firstName as newName} from './main.js';

4.5.5export default 命令

• 为了给用户提供方便，让他们不用阅读文档就能加载模块，就要用到export default命令，为模块指定默认输出。

• 其他模块加载该模块时，import命令可以为该匿名函数指定任意名字。

  // export-default.js
  export default function () {
    console.log('foo');
  }
  // import-default.js
  import customName from './export-default';
  customName();    // 'foo'
  //★需要注意的是，这时import命令后面，不使用大括号。

• 比较默认输出与正常输出

  // 第一组   默认输出
  export default function crc32() { // 输出
    // ...
  }
  import crc32 from 'crc32'; // 输入
  // 第二组    正常输出
  export function crc32() { // 输出
    // ...
  };
  import {crc32} from 'crc32'; // 输入xport-default';
  customName(); // 'foo'

4.5.6export 与 import 的复合写法

• 如果在一个模块之中，先输入后输出同一个模块，import语句可以与export语句写在一起。

  export { foo, bar } from 'my_module';
  // 等同于
  import { foo, bar } from 'my_module';
  export { foo, boo};

ES6知识点-模块Module

原文：https://www.cnblogs.com/xuzhengguo/p/12088963.html