理解ES2015(ES6)的Module

Jinkey 發(fā)布于2019-08-21 14:52 / 633人閱讀

摘要：模塊輸出的是被輸出值的拷貝，也就是說，一旦輸出一個值，模塊內(nèi)部的變化就影響不到這個值。因此，模塊是動態(tài)引用，并且不會緩存值，模塊里面的變量綁定其所在的模塊。模塊的繼承注意命令會忽略模塊的方法循環(huán)引用

語法

注意：import命令具有提升效果,不管寫在哪一行都會提到模塊頭部首先執(zhí)行

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");
}

注意： 輸出的必須是一個接口（對象或者類或方法），而不能直接是一個變量，如數(shù)字，字符串之類的

支持情況 瀏覽器

截止2016.08.02,所有瀏覽器均還不支持原生模塊化

Node.js

Node.js 6以上

ES2015模塊加載的本質(zhì)

ES6模塊加載的機制，與CommonJS模塊完全不同。CommonJS模塊輸出的是一個值的拷貝，而ES6模塊輸出的是值的引用。

CommonJS模塊輸出的是被輸出值的拷貝，也就是說，一旦輸出一個值，模塊內(nèi)部的變化就影響不到這個值。

ES6模塊的運行機制與CommonJS不一樣，它遇到模塊加載命令import時，不會去執(zhí)行模塊，而是只生成一個動態(tài)的只讀引用。等到真的需要用到時，再到模塊里面去取值，換句話說，ES6的輸入有點像Unix系統(tǒng)的“符號連接”，原始值變了，import輸入的值也會跟著變。因此，ES6模塊是動態(tài)引用，并且不會緩存值，模塊里面的變量綁定其所在的模塊。

模塊的繼承

// circleplus.js

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

注意

export *命令會忽略模塊的default方法

循環(huán)引用

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

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

云服務器 GPU云服務器 es6module ES6 es6-系列 ES6入門

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/88044.html

ES6 走馬觀花（ECMAScript2015 新特性）

摘要：字面上是生成器的意思，在里是迭代器生成器，用于生成一個迭代器對象。當執(zhí)行的時候，并不執(zhí)行函數(shù)體，而是返回一個迭代器。迭代器具有方法，每次調(diào)用方法，函數(shù)就執(zhí)行到語句的地方。也有觀點極力反對，認為隱藏了本身原型鏈的語言特性，使其更難理解。本文為 ES6 系列的第一篇。旨在給新同學一些指引，帶大家走近 ES6 新特性。簡要介紹：什么是 ES6 它有哪些明星特性它可以運行在哪些環(huán)境 ...

wangzy2019 2019-08-21 10:40 評論0 收藏0
前端模塊化詳解(完整版)

摘要：二模塊化規(guī)范概述應用由模塊組成，采用模塊規(guī)范。模塊化語法命令用于規(guī)定模塊的對外接口，命令用于輸入其他模塊提供的功能。前言在JavaScript發(fā)展初期就是為了實現(xiàn)簡單的頁面交互邏輯，寥寥數(shù)語即可；如今CPU、瀏覽器性能得到了極大的提升，很多頁面邏輯遷移到了客戶端（表單驗證等），隨著web2.0時代的到來，Ajax技術(shù)得到廣泛應用，jQuery等前端庫層出不窮，前端代碼日益膨脹，此時...

Sanchi 2019-08-02 13:56 評論0 收藏0
前端模塊化詳解(完整版)

摘要：二模塊化規(guī)范概述應用由模塊組成，采用模塊規(guī)范。模塊化語法命令用于規(guī)定模塊的對外接口，命令用于輸入其他模塊提供的功能。前言在JavaScript發(fā)展初期就是為了實現(xiàn)簡單的頁面交互邏輯，寥寥數(shù)語即可；如今CPU、瀏覽器性能得到了極大的提升，很多頁面邏輯遷移到了客戶端（表單驗證等），隨著web2.0時代的到來，Ajax技術(shù)得到廣泛應用，jQuery等前端庫層出不窮，前端代碼日益膨脹，此時...

Pines_Cheng 2019-08-23 14:12 評論0 收藏0
npm + webpack + es6 初體驗

摘要：當然，我們需要先下載配置下載和配置下載下載的加載器下載完了，要去進行配置，配置完的文件如下可以看到，和之前的相比，增加了一個的配置。準備下載Node.js和npm 一個命令行工具（我的是git bash）。不是必須的，用自帶的命令行也可以。創(chuàng)建一個文件夾，作為根目錄，比如 npm-webpack-es6 這時，你將看到一個空文件夾開始命令行打開至根目錄鍵入 npm i...

seasonley 2019-08-20 11:10 評論0 收藏0
require，import區(qū)別

摘要：，區(qū)別遵循的模塊化規(guī)范不一樣模塊化規(guī)范即為提供一種模塊編寫模塊依賴和模塊運行的方案。出現(xiàn)的時間不同相關的規(guī)范由于野生性質(zhì)，在年前后出生。作為的規(guī)范，一直沿用至今。這其實要感謝原來項目名叫做，后更名為這個神一般的項目。 require，import區(qū)別遵循的模塊化規(guī)范不一樣模塊化規(guī)范：即為 JavaScript 提供一種模塊編寫、模塊依賴和模塊運行的方案。誰讓最初的 JavaScri...

Rango 2019-08-20 18:30 評論0 收藏0