Javascript模塊化機制實現(xiàn)原理詳解
1. 概述
js發(fā)展初期暴露了其缺陷：缺乏模塊，后來提出了commonJS規(guī)范來規(guī)范其模塊的規(guī)范。作為JavaScript新手，發(fā)現(xiàn)對于其JavaScript的模塊機制，不是很理解。我查閱了一些資料整理了JavaScript CommonJS的原理和機制。
2. JavaScript
2.1 無后端的項目
這類項目不能使用CommonJS的模塊規(guī)范，這是我起初所犯的錯誤。在沒有es6被大多數(shù)瀏覽器支持的時候，js文件充斥著var和function，由此引來了命名沖突和污染，使得JavaScript代碼很復(fù)雜。es6的class概念出現(xiàn)有效規(guī)范了JavaScript的模塊化規(guī)范。由于這類項目只能通過script標(biāo)簽引入，我們在這里講一下script標(biāo)簽的相關(guān)知識。
每當(dāng)瀏覽器解析到<script>標(biāo)簽（無論內(nèi)嵌還是外鏈）時，瀏覽器會優(yōu)先下載、解析并執(zhí)行該標(biāo)簽中的javaScript代碼，而阻塞了其后所有頁面內(nèi)容的下載和渲染。根據(jù)上述對<script>標(biāo)簽特性的描述，我們知道，在該示例中，當(dāng)瀏覽器解析到<script>標(biāo)簽時，瀏覽器會停止解析其后的內(nèi)容，而優(yōu)先下載腳本文件，并執(zhí)行其中的代碼，這意味著，其后的test.css樣式文件和<body>標(biāo)簽都無法被加載，由于<body>標(biāo)簽無法被加載，那么頁面自然就無法渲染了。因此傳統(tǒng)做法是假定point.js文件：
//定義類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='http://www.aoyou183.cn/bcjs/point.js'></script><script src='http://www.aoyou183.cn/bcjs/index.js'></script>
這樣就可以在index.js使用point類了。
總結(jié)下來：
js類庫必須在header中引入，保證對之后script引入的js文件的支持，畢竟script標(biāo)簽的執(zhí)行順序是順序執(zhí)行，script標(biāo)簽引入順序和實際引入順序相同。
自定義的script標(biāo)簽引入的js文件，要放在body的尾部，保證DOM元素渲染結(jié)束。
每個js文件盡量是es6 class對象，避免作用域和命名域的沖突。
2.2 后端 服務(wù)器 NodeJS
模塊引用的實例如下：require方法
const math = require('math');
模塊的定義：
上下文提供了exports對象用于導(dǎo)出當(dāng)前模塊方法和變量，并且它是唯一的導(dǎo)出出口。在模塊中，還存在一個module對象，他代表模塊自身，exports是module對象的屬性。導(dǎo)出方式：
// math.jsexports.add = function () { };module.exports.add = function () { };
2.3 后端 es6的module
ES6模塊不是對象，而是通過export命令顯式指定輸出的代碼，輸入時也采用靜態(tài)命令的形式。
由于ES6模塊是編譯時加載，使得靜態(tài)分析成為可能。有了它，就能進一步拓寬JavaScript的語法，比如引入宏（macro）和類型檢驗（type system）這些只能靠靜態(tài)分析實現(xiàn)的功能。
除了靜態(tài)加載帶來的各種好處，ES6模塊還有以下好處：
不再需要UMD模塊格式了，將來服務(wù)器和瀏覽器都會支持ES6模塊格式。目前，通過各種工具庫，其實已經(jīng)做到了這一點。
將來瀏覽器的新API就能用模塊格式提供，不再必要做成全局變量或者navigator對象的屬性。
不再需要對象作為命名空間（比如Math對象），未來這些功能可以通過模塊提供。
瀏覽器使用ES6模塊的語法如下：
導(dǎo)出對象和變量：
var firstName = ’XXX’;var lastName = ’YYY’;export {firstName, lastName};Point.js// 導(dǎo)出類對象export default class Point extends circle {}
引入module
import Point from 'Point';
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章：
1. Kotlin + Flow 實現(xiàn)Android 應(yīng)用初始化任務(wù)啟動庫2. 基于javascript處理二進制圖片流過程詳解3. Gitlab CI-CD自動化部署SpringBoot項目的方法步驟4. ajax請求添加自定義header參數(shù)代碼5. 使用python 計算百分位數(shù)實現(xiàn)數(shù)據(jù)分箱代碼6. ASP基礎(chǔ)知識VBScript基本元素講解7. ASP中解決“對象關(guān)閉時,不允許操作?！钡脑幃悊栴}……8. ASP刪除img標(biāo)簽的style屬性只保留src的正則函數(shù)9. 教你如何寫出可維護的JS代碼10. 使用Python和百度語音識別生成視頻字幕的實現(xiàn)
網(wǎng)公網(wǎng)安備