腳本之家服務(wù)器常用軟件

快捷導(dǎo)航

ES6知識點(diǎn)整理之模塊化的應(yīng)用詳解

更新時間：2019年04月15日 14:42:22 作者：Johnny丶me

這篇文章主要介紹了ES6知識點(diǎn)整理之模塊化的應(yīng)用,結(jié)合實(shí)例形式分析了基于node.js環(huán)境下模擬ES6模塊化配置與使用相關(guān)操作技巧,需要的朋友可以參考下

本文實(shí)例講述了ES6知識點(diǎn)整理之模塊化的應(yīng)用。分享給大家供大家參考，具體如下：

目前瀏覽器還不能完全支持模塊化，需要引入很多編譯環(huán)境，下面在nodejs中來模擬ES6中的模塊化

nodejs中針對模塊化演示的配置

{
 "presets": [
    "node6"
 ]
}

添加了這個文件，無需在運(yùn)行時添加–presets參數(shù)

導(dǎo)出變量的三種模式

test1模塊：

// 寫法1
export var a = "I am a";
// 寫法2
var b = "I am b";
export ;
// 寫法3
var c = "I am c";
export {c as d} // 將c重名為d, 外部也同樣需要 import d

index 模塊：

import {a, b, d} from './test1';
console.log(a); // I am a
console.log(b); // I am b
console.log(d); // I am c

異步導(dǎo)出模塊的測試

test2模塊：

// 異步寫法
var m = "I am m";
export {m};
setTimeout(()=>{
 m = "I am mm";
},1000);

index模塊

import {m} from './test2';
console.log(m); // I am m
setTimeout(()=>{
 console.log(m); // I am mm
},1500);

多模塊分別導(dǎo)出

test3 模塊

var A = 1111,
 B = 2222,
 C = 3333;
var M = 'M';
export default M;
export {A as A1, B as B1, C as C1};

index 模塊：

import M, {A1, B1, C1} from './multi';
console.log(A1); // 1111
console.log(B1); // 2222
console.log(C1); // 3333
console.log(M); // M

對象的導(dǎo)出

User 模塊：

export class User{
 constructor(name){
  this.name = name;
 }
 get uname() {
  return this.name;
 }
 set uname(name) {
  this.name = name;
 }
}

index 模塊：

import {User} from './User';
var user = new User('Joh');
console.log(user.uname); // Joh
user.uname = 'Lily';
console.log(user.uname); // Lily

導(dǎo)出函數(shù)模塊

func 模塊

export function Log(str) {
 console.log(str);
}

index 模塊

Log("I am log"); // I am log

重命名默認(rèn)模塊

rename 模塊：

export default "rename";

index 模塊：

import {default as nr} from './rename';
console.log(nr); // rename

默認(rèn)模塊和其他模塊一起導(dǎo)出的方式

combine 模塊：

export var a = 1;
export default 111;

方式1：

index 模塊：

import {default as com, a as comA} from './com';
console.log(com); // 111
console.log(comA); // 1

方式2：

index 模塊：

import t, { a as comA} from './com';
console.log(t); // 111 備注這里t可以以任何名稱命名
console.log(comA); // 1

其他注意事項

定義export時必須在頂層定義，其他地方是不能定義的，如函數(shù)內(nèi)部
default后面不能帶var導(dǎo)出，如：export default var name = ‘Joh'; 這樣是不對的
不要import * 導(dǎo)出全部模塊，這樣非常不好，不利于優(yōu)化
{} 導(dǎo)入的不是默認(rèn)模塊，默認(rèn)模塊不需要帶{}
通過default導(dǎo)出的不會再次被修改，如果default導(dǎo)出的是一個數(shù)字變量，即使在其他地方修改了，它也不會被修改，保持原值不變
http://es6.ruanyifeng.com/#docs/module 這里有其他一些注意事項的總結(jié)

希望本文所述對大家JavaScript程序設(shè)計有所幫助。

您可能感興趣的文章:

相關(guān)文章

JS實(shí)現(xiàn)520 表白簡單代碼
本文是小編基于js實(shí)現(xiàn)的520表白代碼，代碼簡單易懂非常不錯，具有一定的參考借鑒價值，需要的朋友參考下吧
2018-05-05
JS隱藏號碼中間4位代碼實(shí)例
這篇文章主要介紹了JS隱藏號碼中間4位，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-04-04
JS應(yīng)用正則表達(dá)式轉(zhuǎn)換大小寫示例
這篇文章主要介紹了JS應(yīng)用正則表達(dá)式轉(zhuǎn)換大小寫，以首字母大寫，其它字母小寫為例，喜歡的朋友可以參考下
2014-09-09
JSON基本語法及與JavaScript的異同實(shí)例分析
這篇文章主要介紹了JSON基本語法及與JavaScript的異同,結(jié)合實(shí)例形式分析了json簡單值、對象、數(shù)組三種類型值使用技巧,需要的朋友可以參考下
2019-01-01
這篇文章主要介紹了javascript sort排序的相關(guān)資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下
2016-07-07