您好,登錄后才能下訂單哦!
本篇內(nèi)容介紹了“Javascript模塊化機(jī)制原理是什么”的有關(guān)知識(shí),在實(shí)際案例的操作過(guò)程中,不少人都會(huì)遇到這樣的困境,接下來(lái)就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧!希望大家仔細(xì)閱讀,能夠?qū)W有所成!
1. 概述
js發(fā)展初期暴露了其缺陷:缺乏模塊,后來(lái)提出了commonJS規(guī)范來(lái)規(guī)范其模塊的規(guī)范。作為JavaScript新手,發(fā)現(xiàn)對(duì)于其JavaScript的模塊機(jī)制,不是很理解。我查閱了一些資料整理了JavaScript CommonJS的原理和機(jī)制。
2. JavaScript
2.1 無(wú)后端的項(xiàng)目
這類(lèi)項(xiàng)目不能使用CommonJS的模塊規(guī)范,這是我起初所犯的錯(cuò)誤。在沒(méi)有es6被大多數(shù)瀏覽器支持的時(shí)候,js文件充斥著var和function,由此引來(lái)了命名沖突和污染,使得JavaScript代碼很復(fù)雜。es6的class概念出現(xiàn)有效規(guī)范了JavaScript的模塊化規(guī)范。由于這類(lèi)項(xiàng)目只能通過(guò)script標(biāo)簽引入,我們?cè)谶@里講一下script標(biāo)簽的相關(guān)知識(shí)。
每當(dāng)瀏覽器解析到<script>標(biāo)簽(無(wú)論內(nèi)嵌還是外鏈)時(shí),瀏覽器會(huì)優(yōu)先下載、解析并執(zhí)行該標(biāo)簽中的javaScript代碼,而阻塞了其后所有頁(yè)面內(nèi)容的下載和渲染。根據(jù)上述對(duì)<script>標(biāo)簽特性的描述,我們知道,在該示例中,當(dāng)瀏覽器解析到<script>標(biāo)簽時(shí),瀏覽器會(huì)停止解析其后的內(nèi)容,而優(yōu)先下載腳本文件,并執(zhí)行其中的代碼,這意味著,其后的test.css樣式文件和<body>標(biāo)簽都無(wú)法被加載,由于<body>標(biāo)簽無(wú)法被加載,那么頁(yè)面自然就無(wú)法渲染了。因此傳統(tǒng)做法是
假定point.js文件:
//定義類(lèi) class Point { constructor(x, y) { this.x = x; this.y = y; } toString() { return '(' + this.x + ', ' + this.y + ')'; } }
則在index.js中引入point.js,這需要在index.html中body的尾部
<script src="point.js"></script>
<script src="index.js"></script>
這樣就可以在index.js使用point類(lèi)了。
總結(jié)下來(lái):
js類(lèi)庫(kù)必須在header中引入,保證對(duì)之后script引入的js文件的支持,畢竟script標(biāo)簽的執(zhí)行順序是順序執(zhí)行,script標(biāo)簽引入順序和實(shí)際引入順序相同。
自定義的script標(biāo)簽引入的js文件,要放在body的尾部,保證DOM元素渲染結(jié)束。
每個(gè)js文件盡量是es6 class對(duì)象,避免作用域和命名域的沖突。
2.2 后端 服務(wù)器 NodeJS
模塊引用的實(shí)例如下:require方法
const math = require("math");
模塊的定義:
上下文提供了exports對(duì)象用于導(dǎo)出當(dāng)前模塊方法和變量,并且它是唯一的導(dǎo)出出口。在模塊中,還存在一個(gè)module對(duì)象,他代表模塊自身,exports是module對(duì)象的屬性。導(dǎo)出方式:
// math.js exports.add = function () { }; module.exports.add = function () { };
2.3 后端 es6的module
ES6模塊不是對(duì)象,而是通過(guò)export命令顯式指定輸出的代碼,輸入時(shí)也采用靜態(tài)命令的形式。
由于ES6模塊是編譯時(shí)加載,使得靜態(tài)分析成為可能。有了它,就能進(jìn)一步拓寬JavaScript的語(yǔ)法,比如引入宏(macro)和類(lèi)型檢驗(yàn)(type system)這些只能靠靜態(tài)分析實(shí)現(xiàn)的功能。
除了靜態(tài)加載帶來(lái)的各種好處,ES6模塊還有以下好處:
不再需要UMD模塊格式了,將來(lái)服務(wù)器和瀏覽器都會(huì)支持ES6模塊格式。目前,通過(guò)各種工具庫(kù),其實(shí)已經(jīng)做到了這一點(diǎn)。
將來(lái)瀏覽器的新API就能用模塊格式提供,不再必要做成全局變量或者navigator對(duì)象的屬性。
不再需要對(duì)象作為命名空間(比如Math對(duì)象),未來(lái)這些功能可以通過(guò)模塊提供。
瀏覽器使用ES6模塊的語(yǔ)法如下:
導(dǎo)出對(duì)象和變量:
var firstName = 'XXX'; var lastName = 'YYY'; export {firstName, lastName}; Point.js // 導(dǎo)出類(lèi)對(duì)象 export default class Point extends circle { }
引入module
import Point from "Point";
“Javascript模塊化機(jī)制原理是什么”的內(nèi)容就介紹到這里了,感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注億速云網(wǎng)站,小編將為大家輸出更多高質(zhì)量的實(shí)用文章!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。