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