本文實例講述了ES6知識點整理之模塊化的應用。分享給大家供大家參考，具體如下：
目前瀏覽器還不能完全支持模塊化，需要引入很多編譯環境，下面在nodejs中來模擬ES6中的模塊化
nodejs中針對模塊化演示的配置
npm install --save babel-cli babel-preset-node6./node_modules/.bin/babel-node.js --presets node6 ./your_script.js
{
"presets": [
"node6"
]
}
添加了這個文件，無需在運行時添加–presets參數
導出變量的三種模式
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
異步導出模塊的測試
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);
多模塊分別導出
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
對象的導出
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
導出函數模塊
func 模塊
export function Log(str) {
console.log(str);
}
index 模塊
Log("I am log"); // I am log
重命名默認模塊
rename 模塊：
export default "rename";
index 模塊：
import {default as nr} from './rename';
console.log(nr); // rename
默認模塊和其他模塊一起導出的方式
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 default var name = ‘Joh'; 這樣是不對的import * 導出全部模塊，這樣非常不好，不利于優化{} 導入的不是默認模塊，默認模塊不需要帶{}更多關于JavaScript相關內容可查看本站專題：《javascript面向對象入門教程》、《JavaScript切換特效與技巧總結》、《JavaScript查找算法技巧總結》、《JavaScript錯誤與調試技巧總結》、《JavaScript數據結構與算法技巧總結》、《JavaScript遍歷算法與技巧總結》及《JavaScript數學運算用法總結》
希望本文所述對大家JavaScript程序設計有所幫助。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
