ES6知識點整理之模塊化的應(yīng)用詳解
本文實例講述了ES6知識點整理之模塊化的應(yīng)用。分享給大家供大家參考,具體如下:
目前瀏覽器還不能完全支持模塊化,需要引入很多編譯環(huán)境,下面在nodejs中來模擬ES6中的模塊化
nodejs中針對模塊化演示的配置
- 環(huán)境的安裝:$
npm install --save babel-cli babel-preset-node6
- 運行:$
./node_modules/.bin/babel-node.js --presets node6 ./your_script.js
- 添加.babelrc文件, 編輯如下
{ "presets": [ "node6" ] }
添加了這個文件,無需在運行時添加–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é)
更多關(guān)于JavaScript相關(guān)內(nèi)容可查看本站專題:《javascript面向?qū)ο笕腴T教程》、《JavaScript切換特效與技巧總結(jié)》、《JavaScript查找算法技巧總結(jié)》、《JavaScript錯誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運算用法總結(jié)》
希望本文所述對大家JavaScript程序設(shè)計有所幫助。
- ES6中module模塊化開發(fā)實例淺析
- ES6模塊化的import和export用法方法總結(jié)
- ES6新特性:使用export和import實現(xiàn)模塊化詳解
- ES6使用export和import實現(xiàn)模塊化的方法
- ES6新特性之模塊Module用法詳解
- 詳談commonjs模塊與es6模塊的區(qū)別
- ES6與CommonJS中的模塊處理的區(qū)別
- ES6新特性之解構(gòu)、參數(shù)、模塊和記號用法示例
- 如何讓node運行es6模塊文件及其原理詳解
- 詳解CommonJS和ES6模塊循環(huán)加載處理的區(qū)別
- NodeJS模塊與ES6模塊系統(tǒng)語法及注意點詳解
相關(guān)文章
如何通過Proxy實現(xiàn)JSBridge模塊化封裝
這篇文章主要介紹了如何通過Proxy實現(xiàn)JSBridge模塊化封裝,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-10-10