JavaScript模塊化

wizChen 發(fā)布于2019-08-23 15:08 / 1143人閱讀

摘要：是中提供的模塊化編程的方案，是中新增。所以人們產(chǎn)生了這樣的需求，希望有支持兩種風(fēng)格的通用模式，于是通用模塊規(guī)范誕生了。模塊化對模塊進行導(dǎo)出導(dǎo)入的

AMD、CMD、CommonJs、UMD是ES5中提供的模塊化編程的方案，import/export是ES6中新增。
1.AMD-異步模塊定義
AMD是RequireJS在推廣過程中對模塊定義的規(guī)范化產(chǎn)出，它是一個概念，RequireJS是對這個概念的實現(xiàn)，就好比JavaScript語言是對ECMAScript規(guī)范的實現(xiàn)。AMD是一個組織，RequireJS是在這個組織下自定義的一套腳本語言。
RequireJS：是一個AMD框架，可以異步加載JS文件，按照模塊加載方法，通過define()函數(shù)定義，第一個參數(shù)是一個數(shù)組，里面定義一些需要依賴的包，第二個參數(shù)是一個回調(diào)函數(shù)，通過變量來引用模塊里面的方法，最后通過return來輸出。
是一個依賴前置、異步定義的AMD框架（在參數(shù)里面引入js文件），在定義的同時如果需要用到別的模塊，在最前面定義好即在參數(shù)數(shù)組里面進行引入，在回調(diào)里面加載。
　require([module], callback);

2.CMD---是SeaJS在推廣過程中對模塊定義的規(guī)范化產(chǎn)出，是一個同步模塊定義，是SeaJS的一個標(biāo)準，SeaJS是CMD概念的一個實現(xiàn)，SeaJS是淘寶團隊提供的一個模塊開發(fā)的js框架
通過define()定義，沒有依賴前置，通過require加載jQuery插件，CMD是依賴就近，在什么地方使用到插件就在什么地方require該插件，即用即返，這是一個同步的概念。

3.commonJS規(guī)范---是通過module.exports定義的，在前端瀏覽器里面并不支持module.exports,通過node.js后端使用的。Nodejs端是使用CommonJS規(guī)范的,前端瀏覽器可以利用browserify插件支持commonJS，可以講js文件打包到一個main.js，所以不會出現(xiàn)瀏覽require新模塊的時候，需要異步加載的情況，更不會出現(xiàn)瀏覽器假死。
瀏覽器不兼容CommonJS的根本原因，在于缺少四個Node.js環(huán)境的變量(module、exports、require、global)
輸出方式有2種：默認輸出---module export 和帶有名字的輸出---exports.area。

4.UMD-通用模塊規(guī)范
既然CommonJs和AMD風(fēng)格一樣流行，似乎缺少一個統(tǒng)一的規(guī)范。所以人們產(chǎn)生了這樣的需求，希望有支持兩種風(fēng)格的“通用”模式，于是通用模塊規(guī)范（UMD）誕生了。為了保證通用性，犧牲的易用性，這個模式略難看，但是它兼容了AMD和CommonJS，同時還支持老式的“全局”變量規(guī)范。

5.ES6模塊化---export/import對模塊進行導(dǎo)出導(dǎo)入的

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

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/101571.html

相關(guān)文章

前端性能優(yōu)化（三）——傳統(tǒng) JavaScript 優(yōu)化的誤區(qū)

摘要：二模塊化誤區(qū)加快加載和執(zhí)行的速度，一直是前端優(yōu)化的一個熱點。結(jié)果文件減少，也達到了預(yù)期的效果。避免不必要的延遲。最后再根據(jù)文件的功能類型，來決定是放在頁面的頭部還是尾部。注：本文是純技術(shù)探討文，無圖無笑點，希望您喜歡一.前言軟件行業(yè)極其缺乏前端人才這是圈內(nèi)的共識了，某種程度上講，同等水平前端的工資都要比后端高上不少，而圈內(nèi)的另一項共識則是——網(wǎng)頁是公司的臉面！幾年前，谷歌的一項...

UsherChen 2019-08-14 15:08 評論0 收藏0
JavaScript 模塊演化簡史

摘要：模塊演化簡史從屬于筆者的開發(fā)基礎(chǔ)與工程實踐。首個采樣該設(shè)計模式的界面庫當(dāng)屬，其是創(chuàng)建于年。允許我們定義模塊，并且在顯式地聲明其依賴模塊而由框架完成自動注入。而最后的模塊化規(guī)范定義于年正式發(fā)布，也就是被命名為。 JavaScript 模塊演化簡史從屬于筆者的 Web 開發(fā)基礎(chǔ)與工程實踐。本文主要總結(jié)自 The Evolution of JavaScript Modularity、Nat...

ky0ncheng 2019-08-20 15:37 評論0 收藏0
JavaScript模塊化編程探索

摘要：模塊化編程，已經(jīng)成為一個迫切的需求。隨著網(wǎng)站功能逐漸豐富，網(wǎng)頁中的也變得越來越復(fù)雜和臃腫，原有通過標(biāo)簽來導(dǎo)入一個個的文件這種方式已經(jīng)不能滿足現(xiàn)在互聯(lián)網(wǎng)開發(fā)模式，我們需要團隊協(xié)作模塊復(fù)用單元測試等等一系列復(fù)雜的需求。隨著網(wǎng)站逐漸變成互聯(lián)網(wǎng)應(yīng)用程序，嵌入網(wǎng)頁的Javascript代碼越來越龐大，越來越復(fù)雜。網(wǎng)頁越來越像桌面程序，需要一個團隊分工協(xié)作、進度管理、單元測試等等......開發(fā)...

jayzou 2019-08-20 16:22 評論0 收藏0
JavaScript 是如何工作的：模塊的構(gòu)建以及對應(yīng)的打包工具

摘要：掛機科了次使用這個結(jié)構(gòu)，匿名函數(shù)就有了自己的執(zhí)行環(huán)境或閉包，然后我們立即執(zhí)行。注意，匿名函數(shù)的圓括號是必需的，因為以關(guān)鍵字開頭的語句通常被認為是函數(shù)聲明請記住，中不能使用未命名的函數(shù)聲明。這是專門探索 JavaScript 及其所構(gòu)建的組件的系列文章的第 20 篇。想閱讀更多優(yōu)質(zhì)文章請猛戳GitHub博客,一年百來篇優(yōu)質(zhì)文章等著你！如果你錯過了前面的章節(jié)，可以在這里找到它們： ...

hedzr 2019-08-23 15:15 評論0 收藏0
javascript 模塊化機制

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

cikenerd 2019-08-21 14:43 評論0 收藏0
javascript 模塊化機制

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

whlong 2019-08-01 15:54 評論0 收藏0