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