摘要:在中是有這種寫法的,我們稱為語法,就是通過關(guān)鍵詞,引入所要依賴的文件。的語法的用法所有模塊都通過來定義通過引入依賴通過對外提供接口或者通過提供整個接口的語法的模塊功能主要通過兩個關(guān)鍵字來實現(xiàn)和。是用來聲明模塊的默認接口的。
你帶著你的同事聯(lián)調(diào)的時候
????
從古至今,Javascript都沒有自帶的模塊體系,能做的,也就只是將不同作用的代碼寫在不同的JS文件中,然后通過分別引入。這樣做又一個非常致命的問題,那就是我們要定位一個方法變得非常的困難。
一個靈活的模塊體系,能讓你的代碼之間的依賴關(guān)系更加直觀,一個好的模塊式的寫法讓沒個方法都能很快的找到聲明位置所在。
在NODE中是有這種寫法的,我們稱為CMD語法,就是通過require關(guān)鍵詞,引入所要依賴的文件。
當然,隨著前端在WEB開發(fā)中占據(jù)的比重越來越高,客戶端JS的模塊化也尤為重要。其實已經(jīng)有比較成熟的前端框架來實現(xiàn)這個功能,比如RequireJs和Seajs。ES6的出現(xiàn),讓JS實現(xiàn)模塊功能變得更?加簡單。
//requirejs的語法 define(["moudleA"], function(){ function foo(){ doSomething(); } return { foo : foo }; }); //seajs的用法 // 所有模塊都通過 define 來定義 define(function(require, exports, module) { // 通過 require 引入依賴 var $ = require("jquery"); var Spinning = require("./spinning"); // 通過 exports 對外提供接口 exports.doSomething = ... // 或者通過 module.exports 提供整個接口 module.exports = ... });ES6的Module語法
ES6的模塊功能主要通過兩個關(guān)鍵字來實現(xiàn)export和import。
從字面上不難看出,export是輸出,即用來將模塊內(nèi)部的方法暴露出來,而import是輸入,即引入其他模塊的方法,便于在本模塊中調(diào)用其他模塊的方法。
正常來講,我們可以將每個模塊都寫成一個獨立的文件,由于Javascript作用域的問題,每個模塊內(nèi)部的變量及方法都是私有的,即只能內(nèi)部訪問,外部無法訪問。要想使模塊內(nèi)部的方法可以從外部訪問,就必須使用export關(guān)鍵字。
//moduleA.js var moduleA1 = "a"; var moduleA2 = "aa"; function moduleFunc(){ console.log(moduleA2); } export { moduleA1, moduleA2 as moduleA, moduleFunc as module };
如上面的代碼所示,在模塊中聲明了變量和方法,我們只需要將變量名或者方法名,置于export的作用下,就可以被其他模塊使用。
as關(guān)鍵詞可以用來重命名,上面的例子中moduleA就等于moduleA2。
這里需要注意的是,export定義的是對外的接口,接口必須在模塊內(nèi)部被聲明或?qū)崿F(xiàn)過,不然就會報錯。
var a = 1; export a;//不報錯 export b;//報錯
使用export定義了模塊的接口之后,其他模塊就可以通過import命令來引入這個模塊
//moduleB.js import {moduleA1, moduleA} from "./moduleA.js"; import {module as moduleFunc} from "./moduleA.js"; moduleFunc();
如上面的代碼所示,通過import關(guān)鍵字從moduleA.js中引入了moduleA1、moduleA2、moduleFunc()三個變量,這樣在這個模塊中就能使用A模塊中的變量了。
需要注意的是,import關(guān)鍵字有提升效果,也就是無論寫在哪個位置,都和寫在模塊頂部效果一樣。import加載模塊的過程是在編譯階段執(zhí)行的,代碼運行之前就已經(jīng)完成了加載過程。
如果我們需要引入一個模塊中的所有變量,可以用下面的方法
//moduleC.js import * as module from "./moduleA.js"; module.moduleA;//"a" module.moduleFunc();//"aa"
另外,import加載的文件是不會重復(fù)加載的
//moduleD.js import {moduleA1} from "./moduleA.js"; import {moduleA2} from "./moduleA.js"; //等同于 import {moduleA1, moduleA2} from "./moduleA.js";
moduleA.js只會加載一次。
export default是用來聲明模塊的默認接口的。
//hello.js var name = "dahan"; function sayHello(){ console.log("Hello"); } export default sayHello; //person.js import hello from "./hello.js"; hello(); //"Hello"
使用export default聲明的接口,引入的時候不需要使用大括號,也不用指定特定的變量名。
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/91711.html
摘要:前端培訓(xùn)初級階段語法變量值類型運算符語句前端培訓(xùn)初級階段內(nèi)置對象函數(shù)基礎(chǔ)內(nèi)容知識我們會用到。模塊定義加載模塊繼承中的繼承依賴于原型鏈繼承。 前端最基礎(chǔ)的就是 HTML+CSS+Javascript。掌握了這三門技術(shù)就算入門,但也僅僅是入門,現(xiàn)在前端開發(fā)的定義已經(jīng)遠遠不止這些。前端小課堂(HTML/CSS/JS),本著提升技術(shù)水平,打牢基礎(chǔ)知識的中心思想,我們開課啦(每周四)。 該文為前...
摘要:,微軟發(fā)布,同時發(fā)布了,該語言模仿同年發(fā)布的。,公司在瀏覽器對抗中沒落,將提交給國際標準化組織,希望能夠成為國際標準,以此抵抗微軟。同時將標準的設(shè)想定名為和兩類。,尤雨溪發(fā)布項目。,正式發(fā)布,并且更名為。,發(fā)布,模塊系統(tǒng)得到廣泛的使用。 前言 作為程序員,技術(shù)的落實與鞏固是必要的,因此想到寫個系列,名為 why what or how 每篇文章試圖解釋清楚一個問題。 這次的 why w...
摘要:以下簡稱是語言的下一代標準。因為當前版本的是在年發(fā)布的,所以又稱。命令用于規(guī)定模塊的對外接口,命令用于輸入其他模塊提供的功能。需要特別注意的是,命令規(guī)定的是對外的接口,必須與模塊內(nèi)部的變量建立一一對應(yīng)關(guān)系。 ECMAScript 6(以下簡稱ES6)是JavaScript語言的下一代標準。因為當前版本的ES6是在2015年發(fā)布的,所以又稱ECMAScript 2015。 最常用的ES6...
摘要:的主要思想是異步模塊,主邏輯在回調(diào)函數(shù)中執(zhí)行,這和瀏覽器前端所習(xí)慣的開發(fā)方式不謀而合,應(yīng)運而生。是目前開發(fā)中使用率最高的模塊化標準。 原文鏈接: http://yanjiie.me 偶然的一個周末復(fù)習(xí)了一下 JS 的模塊標準,刷新了一下對 JS 模塊化的理解。 從開始 Coding 以來,總會周期性地突發(fā)奇想進行 Code Review。既是對一段時期的代碼進行總結(jié),也是對那一段時光的...
摘要:感謝感謝和在推動模塊化發(fā)展方面做出的貢獻。與引用阮一峰老師的標準參考教程規(guī)范加載模塊是同步的,也就是說,只有加載完成,才能執(zhí)行后面的操作。規(guī)定了新的模塊加載方案。與引用阮一峰老師的入門它們有兩個重大差異。 前言 本篇我們重點介紹以下四種模塊加載規(guī)范: AMD CMD CommonJS ES6 模塊 最后再延伸講下 Babel 的編譯和 webpack 的打包原理。 require....
閱讀 2486·2021-11-15 18:14
閱讀 1711·2021-10-14 09:42
閱讀 3746·2021-10-11 10:58
閱讀 3939·2021-10-09 09:44
閱讀 2410·2021-09-26 09:55
閱讀 2430·2021-09-24 10:38
閱讀 2025·2021-09-04 16:48
閱讀 3268·2021-09-02 15:21