javascript 模塊化機制

whlong 發(fā)布于2019-08-01 15:54 / 3093人閱讀

摘要：作為新手，發(fā)現(xiàn)對于其的模塊機制，不是很理解。的概念出現(xiàn)有效規(guī)范了的模塊化規(guī)范。不再需要對象作為命名空間比如對象，未來這些功能可以通過模塊提供。瀏覽器使用模塊的語法如下導出對象和變量導出類對象引入加載機制詳見引用資料高靜的并行加載與順序執(zhí)行

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代碼很復雜。es6的class概念出現(xiàn)有效規(guī)范了JavaScript的模塊化規(guī)范。由于這類項目只能通過script標簽引入，我們在這里講一下script標簽的相關知識。
每當瀏覽器解析到

這樣就可以在index.js使用point類了。
總結(jié)下來：

js類庫必須在header中引入，保證對之后script引入的js文件的支持，畢竟script標簽的執(zhí)行順序是順序執(zhí)行，script標簽引入順序和實際引入順序相同。

自定義的script標簽引入的js文件，要放在body的尾部，保證DOM元素渲染結(jié)束。

每個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命令顯式指定輸出的代碼，輸入時也采用靜態(tài)命令的形式。
由于ES6模塊是編譯時加載，使得靜態(tài)分析成為可能。有了它，就能進一步拓寬JavaScript的語法，比如引入宏（macro）和類型檢驗（type system）這些只能靠靜態(tài)分析實現(xiàn)的功能。

除了靜態(tài)加載帶來的各種好處，ES6模塊還有以下好處：

不再需要UMD模塊格式了，將來服務器和瀏覽器都會支持ES6模塊格式。目前，通過各種工具庫，其實已經(jīng)做到了這一點。

將來瀏覽器的新API就能用模塊格式提供，不再必要做成全局變量或者navigator對象的屬性。

不再需要對象作為命名空間（比如Math對象），未來這些功能可以通過模塊提供。

瀏覽器使用ES6模塊的語法如下：

導出對象和變量：

variables.js

var firstName = "XXX";
var lastName = "YYY";
export {firstName, lastName};

Point.js

// 導出類對象
export default class Point extends circle {

}

引入module

import Point from "Point";

加載機制詳見：es6 module

引用資料：
高靜：js的并行加載與順序執(zhí)行

云服務器 GPU云服務器異步模塊加載機制-amd javascript機制 JavaScript異步機制 javascript模塊化

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/50195.html

javascript 模塊化機制

摘要：作為新手，發(fā)現(xiàn)對于其的模塊機制，不是很理解。的概念出現(xiàn)有效規(guī)范了的模塊化規(guī)范。不再需要對象作為命名空間比如對象，未來這些功能可以通過模塊提供。瀏覽器使用模塊的語法如下導出對象和變量導出類對象引入加載機制詳見引用資料高靜的并行加載與順序執(zhí)行 1. 概述 js發(fā)展初期暴露了其缺陷：缺乏模塊，后來提出了commonJS規(guī)范來規(guī)范其模塊的規(guī)范。作為JavaScript新手，發(fā)現(xiàn)對于其JavaS...

cikenerd 2019-08-21 14:43 評論0 收藏0
Node.js入門：模塊機制

摘要：模塊載入策略的模塊分為兩類，一類為原生核心模塊，一類為文件模塊。最后傳入對象的，方法，，文件名，目錄名作為實參并執(zhí)行。在這個主文件中，可以通過方法去引入其余的模塊。以上所描述的模塊載入機制均定義在中。 CommonJS規(guī)范? 早在Netscape誕生不久后，JavaScript就一直在探索本地編程的路，Rhino是其代表產(chǎn)物。無奈那時服務端JavaScript走的路均是參考眾多服務器端...

alanoddsoff 2019-08-23 13:48 評論0 收藏0
Node.js入門：模塊機制

摘要：模塊載入策略的模塊分為兩類，一類為原生核心模塊，一類為文件模塊。最后傳入對象的，方法，，文件名，目錄名作為實參并執(zhí)行。在這個主文件中，可以通過方法去引入其余的模塊。以上所描述的模塊載入機制均定義在中。 CommonJS規(guī)范? 早在Netscape誕生不久后，JavaScript就一直在探索本地編程的路，Rhino是其代表產(chǎn)物。無奈那時服務端JavaScript走的路均是參考眾多服務器端...

everfight 2019-07-25 14:33 評論0 收藏0
node核心特性理解

摘要：概述本文主要介紹了我對的一些核心特性的理解，包括架構(gòu)特點機制核心模塊與簡單應用。在此期間，主線程繼續(xù)執(zhí)行其他任務。延續(xù)了瀏覽器端單線程，只用一個主線程執(zhí)行，不斷循環(huán)遍歷事件隊列，執(zhí)行事件。原文地址在我的博客，轉(zhuǎn)載請注明來源，謝謝！ node是在前端領域經(jīng)常看到的詞。node對于前端的重要性已經(jīng)不言而喻，掌握node也是作為合格的前端工程師一項基本功了。知道node、知道后端的一些東西...

huangjinnan 2019-08-21 17:03 評論0 收藏0