理解ES2015(ES6)的Module

Jinkey 发布于2019-08-21 14:52 / 597人阅读

摘要：模块输出的是被输出值的拷贝，也就是说，一旦输出一个值，模块内部的变化就影响不到这个值。因此，模块是动态引用，并且不会缓存值，模块里面的变量绑定其所在的模块。模块的继承注意命令会忽略模块的方法循环引用

语法

注意：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);
}

注意

export *命令会忽略模块的default方法

循环引用

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

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

GPU云服务器云服务器 es6module ES6 es6-系列 ES6入门

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/88044.html

ES6 走马观花（ECMAScript2015 新特性）

摘要：字面上是生成器的意思，在里是迭代器生成器，用于生成一个迭代器对象。当执行的时候，并不执行函数体，而是返回一个迭代器。迭代器具有方法，每次调用方法，函数就执行到语句的地方。也有观点极力反对，认为隐藏了本身原型链的语言特性，使其更难理解。本文为 ES6 系列的第一篇。旨在给新同学一些指引，带大家走近 ES6 新特性。简要介绍：什么是 ES6 它有哪些明星特性它可以运行在哪些环境 ...

wangzy2019 2019-08-21 10:40 评论0 收藏0
前端模块化详解(完整版)

摘要：二模块化规范概述应用由模块组成，采用模块规范。模块化语法命令用于规定模块的对外接口，命令用于输入其他模块提供的功能。前言在JavaScript发展初期就是为了实现简单的页面交互逻辑，寥寥数语即可；如今CPU、浏览器性能得到了极大的提升，很多页面逻辑迁移到了客户端（表单验证等），随着web2.0时代的到来，Ajax技术得到广泛应用，jQuery等前端库层出不穷，前端代码日益膨胀，此时...

Sanchi 2019-08-02 13:56 评论0 收藏0
前端模块化详解(完整版)

摘要：二模块化规范概述应用由模块组成，采用模块规范。模块化语法命令用于规定模块的对外接口，命令用于输入其他模块提供的功能。前言在JavaScript发展初期就是为了实现简单的页面交互逻辑，寥寥数语即可；如今CPU、浏览器性能得到了极大的提升，很多页面逻辑迁移到了客户端（表单验证等），随着web2.0时代的到来，Ajax技术得到广泛应用，jQuery等前端库层出不穷，前端代码日益膨胀，此时...

Pines_Cheng 2019-08-23 14:12 评论0 收藏0
npm + webpack + es6 初体验

摘要：当然，我们需要先下载配置下载和配置下载下载的加载器下载完了，要去进行配置，配置完的文件如下可以看到，和之前的相比，增加了一个的配置。准备下载Node.js和npm 一个命令行工具（我的是git bash）。不是必须的，用自带的命令行也可以。创建一个文件夹，作为根目录，比如 npm-webpack-es6 这时，你将看到一个空文件夹开始命令行打开至根目录键入 npm i...

seasonley 2019-08-20 11:10 评论0 收藏0
require，import区别

摘要：，区别遵循的模块化规范不一样模块化规范即为提供一种模块编写模块依赖和模块运行的方案。出现的时间不同相关的规范由于野生性质，在年前后出生。作为的规范，一直沿用至今。这其实要感谢原来项目名叫做，后更名为这个神一般的项目。 require，import区别遵循的模块化规范不一样模块化规范：即为 JavaScript 提供一种模块编写、模块依赖和模块运行的方案。谁让最初的 JavaScri...

Rango 2019-08-20 18:30 评论0 收藏0