1. 程式人生 > >JS模組化規範:AMD/CMD/CommonJS

JS模組化規範:AMD/CMD/CommonJS

一、模組化規範的由來

隨著網頁的複雜化,javascript程式碼也相應變得龐大起來,程式碼之間的分工合作就尤為重要了,這時候有了模組,我們就可以只關注自己業務的核心邏輯,其他想要實現的功能直接載入他人的模組便足夠了。考慮到模組的統一,便有了模組規範化。接下來介紹的模組化規範,包含:CommonJS,AMD,CMD。

二、三者的區別

AMD CMD CommonJS
預先載入 延遲載入 同步載入

三、CommonJS

node.js採用了此規範。一個檔案便是一個模組。使用全域性方法require()載入某個模組,示例如下(在b模組中引入模組a):
a.js

b.js
之前在對比三者的區別時有提到過,CommonJS是同步載入的,所以需要載入完成後才能執行後續操作,所以比較適合伺服器端。對於瀏覽器端而言,如果同步載入,網路太差的情況下會產生頁面“假死”現象。因此,只能選用非同步載入。

四、AMD和RequireJS

1.在說明AMD規範之前,我們有必要了解一下RequireJS:簡單來說,RequireJS就是為了管理模組間依賴,並且防止頁面失去響應而誕生的(可以不用理解,熟練使用後就能明白了)。
2.怎麼用:
- 從官網下載最新的版本,然後放在開發目錄中的js資料夾下
- 在主頁面index.html的最後引入這個js
index.html
async進行非同步載入,防止頁面假死,IE不識別這個屬性,所以還加入了defer。data-main是網頁的主模組,require會先載入這個js。
- 編寫主模組main.js
主模組需要採用config()和require()方法。首先需要使用require.config()方法對模組的載入行為進行自定義,它需要寫在main.js的頭部。引數為一個物件,這個物件的path屬性指定各個模組的載入路徑(路徑可以是URL)。shim屬性則用來配置不相容的模組。
config


最後用require方法載入我們的模組,載入時候便使用了AMD規範
require
引數說明:第一個引數是一個Array,其中的成員即需要載入的模組,示例中依賴了jquery,underscore,backbone;第二個引數是回撥函式,當前面的模組載入完成後會執行該函式。
如果我們還依賴其他模組,比方說c.js,則c模組的寫法如下,需要使用到define()方法:
myLib
引數說明同上,在define()方法的最後需要使用return來暴露該模組的介面。

綜上,define()定義模組,require()呼叫模組,二者共同構成了AMD規範,可適應瀏覽器環境,並且能夠按需載入模組。

五、CMD和SeaJs

在第二節中已經說明過,AMD會預先載入依賴的模組,而CMD是延遲載入的,它是在SeaJS推行時候誕生的,所謂延遲載入就是用到的時候才載入。對比一下:
對比

若有不妥之處,請大家指正。

相關推薦

JS模組規範AMD/CMD/CommonJS

一、模組化規範的由來 隨著網頁的複雜化,javascript程式碼也相應變得龐大起來,程式碼之間的分工合作就尤為重要了,這時候有了模組,我們就可以只關注自己業務的核心邏輯,其他想要實現的功能直接載入他人的模組便足夠了。考慮到模組的統一,便有了模組規範化。接下來

js 模組規範commonjsAMD、ES6、CMD

開發中最流行的 commonjs、AMD、ES6、CMD 規範。 參考資料: https://mp.weixin.qq.com/s/MPEhWlS9KiIc9I6Of5GpOQ http://www.ruanyifeng.com/blog/2015/05/commonjs-in-

了解JS模塊規範AMDCMDCommonJS

requirejs 請求 sea pre 發展 區別 script 處理 環境 隨著JS模塊化編程的發展,處理模塊之間的依賴關系成為了維護的關鍵。 AMD,CMD,CommonJS是目前最常用的三種模塊化書寫規範。 CommonJS CommonJS規範是誕生比較

淺析JS模塊規範AMDCMDCommonJS

狀況 順序 淺析 ports params for 上一個 合服 log from:https://www.jianshu.com/p/09ffac7a3b2c 隨著JS模塊化編程的發展,處理模塊之間的依賴關系成為了維護的關鍵。 模

JS模組程式設計之AMD規範(一)

隨著網站逐漸變成"網際網路應用程式",嵌入網頁的Javascript程式碼越來越龐大,越來越複雜。 網頁越來越像桌面程式,需要一個團隊分工協作、進度管理、單元測試等等......開發者不得不使用軟體工程的方法,管理網頁的業務邏輯。 JavaScript模組化程式設

JS模組程式設計之AMD模型實現原理(Requirejs瀏覽器模型,nodejs伺服器模型)

官方引數手冊:https://requirejs.org/docs/api.html     /** * require使用指南! * 第一步:建立一個符合Require CMD模組化的標準目錄結構,去官方檢視! * 第二步:在html檔案中指定主js檔

JS 模組規範

在我們最初寫程式碼的時候,引入JS檔案用script標籤來引入,並且在引入多個JS檔案時,當前檔案所依賴的JS檔案必須放在前面。也就存在一個順序的問題,而且這是由開發者去判斷和把控的。而現在前端專案越來越複雜,難免會出現很多很多script標籤引入JS,這無論對

JS模組方案(2)之CMD 模組(SeaJS)方案

一、 CMD 1、基本介紹 SeaJS 是一個適用於 Web 瀏覽器端的模組載入器。使用 SeaJS,可以更好地組織 JavaScript 程式碼。 2、實現庫:seajs 1.3.1 S

Js模組規範理解

export const obj = { test1: '' } export const test = '' exrpot class Test { constuctor() { } } 或者是下邊的寫法 var name = "name" var age = "age" e

模組開發,AMDCMDCommonjs規範

angular、vue、react三大框架模組管理遵循的規範 webpack打包成一個檔案,一次都載入完,需要哪個就去執行哪個。不像傳統的頁面,引入很多檔案,要一個個按順序載入。 生成的都是閉包,變數隔離,並能避免汙染作用域。 vue,angularx,r

淺析JS模組規範AMDCMD

在瞭解AMD,CMD規範前,我們先來簡單地瞭解下什麼是模組? 簡單的說,一個模組就是實現特定功能的檔案,有了模組,我們就可以更方便地使用別人的程式碼,想要什麼功能,就載入什麼模組。當然,模組開發需要遵循一定的規範,否則各用各的就會亂套了。 目前,常用的JS模組規範

js模組程式設計之徹底弄懂CommonJSAMD/CMD

先回答我:為什麼模組很重要?   答:因為有了模組,我們就可以更方便地使用別人的程式碼,想要什麼功能,就載入什麼模組。但是,這樣做有一個前提,那就是大家必須以同樣的方式編寫模組,否則你有你的寫法,我有我的寫法,豈不是亂了套! 於是下面三個模組規範出來了,這篇文章也出來了(拼出來的 {捂臉笑})。 &

require-js-模組 CMD AMD

模組化的標準有了模組,我們就可以更方便地使用別人的程式碼,想要什麼功能,就載入什麼模組。這樣做有一個前提,那就是大家必須以同樣的方式編寫模組,否則你有你的寫法,我有我的寫法,豈不是亂了套!  CommonJS:是一個模組化的標準,Node.js在使用的模組化標準。適用與後端開發的標準。AMD(As

es6的模組--AMD/CMD/commonJS/ES6

/** * AMC * CMD * CommonJS * ES6模組:總結的 */ /** * AMD的應用的 * script---data-main="vender/main" sr

一覽js模組CommonJS到ES6

本文由雲+社群發表 模組化是指把一個複雜的系統分解到一個一個的模組。 模組化開發的優點: (1)程式碼複用,讓我們更方便地進行程式碼管理、同時也便於後面程式碼的修改和維護。 (2)一個單獨的檔案就是一個模組,是一個單獨的作用域,只向外暴露特定的變數和函式。這樣可以避免汙染全域性變數,減少變數

模組規範之commenJS、AMDCMD、ES6

commenJS(Node.js基於commenJS規範編寫) 理解 每個檔案都可以當作一個模組 在伺服器端(Node):模組的載入是在執行時同步載入的 在瀏覽器端(Browserify):模組需要提前編譯打包處理 基本語法 暴露模組(暴露出

[前端]關於JS模組/AMD/CMD/UMD及CSS的BEM

工作上接觸到的模組化都是比較主流的ESM和commonJS CSS上通用的是BEM 這裡主要是總結給自己看的 ESM(ES6 Module) 一個檔案一個模組 基本是webpack結合vue最常用的東西了 引入import,暴露用export import re

js模組AMDCMD的區別

最近在研究cmd和amd,在網上看到一篇不錯的文章,整理下看看。  在JavaScript發展初期就是為了實現簡單的頁面互動邏輯,寥寥數語即可;如今CPU、瀏覽器效能得到了極大的提升,很多頁面邏輯遷移到了客戶端(表單驗證等),隨著web2.0時代的到來,Ajax技術得到

詳解AMDCommonJS和UMD模組規範

開發的時候,我們經常會把某些功能封裝成可複用的模組。模組封裝了功能,並且對外暴露一個API。隨著Node.js的誕生和發展,JavaScript可以在服務端執行,同時客戶端應用也越來越流行,JavaScript界產生了對優秀和健壯模組系統的需求。在Java

amd cmd commonjs 模塊規範 和 es6 的 module 語法

其他 import 沒有 效果 嵌入 目的 define mon 無法 js的模塊化 在前端開發的原始時期,只要在script標簽中嵌入js代碼就能實現一些基本的交互效果,但是隨著時代的進步。js扮演的角色變得重要起來,js應用的場景頁越來越復雜,。然而,js都沒有類的