明白ES2015(ES6)的Module

2019年8月31日 180次阅读 来源: caicai

语法

注重：import敕令具有提拔结果,不论写在哪一行都邑提到模块头部起首实行

import

import 模块名 from ‘途径’

// 引入变量 默许称号
import {firstName, lastName, year} from './profile';

// 须要 改名运用 `as` 关键字
import { lastName as surname } from './profile';

// 团体加载模块
import * as circle from './circle';

// 直接输出默许（匿名）要领（或变量），能够取一个要领名字，如customName
import customName from './export-default';
customName();

// 同时输入默许要领和其他变量
import customName, { otherMethod } from './export-default';

export

输出变量

export var firstName = 'Michael';

或

var firstName = 'Michael';
export {firstName};

要领也是一样。
要领还能够直接以function的体式格局输出,叫做模块的团体加载

// test.js
export function foo() {};
export function foo1() {};

引入时能够直接运用

import { foo, foo1 as f } from './test';
foo();
f();

输出时能够运用as重命名变量名

export {
 v1 as streamV1
}

输入默许接口 export default

// export-default.js
export default function () {
  console.log('foo');
}

注重： 输出的必需是一个接口（对象或许类或要领），而不能直接是一个变量，如数字，字符串之类的

支撑状况

浏览器

停止2016.08.02,一切浏览器均还不支撑原生模块化

Node.js

Node.js 6以上

ES2015模块加载的实质

ES6模块加载的机制，与CommonJS模块完整差别。CommonJS模块输出的是一个值的拷贝，而ES6模块输出的是值的援用。

CommonJS模块输出的是被输出值的拷贝，也就是说，一旦输出一个值，模块内部的变化就影响不到这个值。

ES6模块的运行机制与CommonJS不一样，它碰到模块加载敕令import时，不会去实行模块，而是只天生一个动态的只读援用。比及真的须要用到时，再到模块内里去取值，换句话说，ES6的输入有点像Unix体系的“标记衔接”，原始值变了，import输入的值也会随着变。因而，ES6模块是动态援用，而且不会缓存值，模块内里的变量绑定其地点的模块。

模块的继续

// circleplus.js

export * from 'circle';
export var e = 2.71828182846;
export default function(x) {
  return Math.exp(x);
}

注重

  1. export *敕令会疏忽模块的default要领

  2. 轮回援用

// a.js
var b = require('b');

// b.js
var a = require('a');
    原文作者：caicai
    原文地址: https://segmentfault.com/a/1190000007717349
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞