JavaSript模塊規範 - AMD規範與CMD規範介紹[轉]
阿新 • • 發佈:2017-08-24
開始 使用 得到 uid des 擴展 先來 封裝 script
無依賴模塊可以直接使用對象字面量來定義
類似與 CommonJS 方式定義
局部的 require 需要其他特定的 API 來實現。 全局的 require 函數是唯一全局作用域下的變量,像 define一樣。全局的 require 並不是規範要求的,但是如果實現全局的 require函數,那麽其需要具有與局部 require 函數 一樣的以下的限定: 1. 模塊標識視為絕對的,而不是相對的對應另一個模塊標識。 2. 只有在異步情況下,require的回調方式才被用來作為交互操作使用。因為他不可能在同步的情況下通過 require(String) 從頂層加載模塊。 依賴相關的API會開始模塊加載。如果需要有互操作的多個加載器,那麽全局的 reqiure 應該被加載頂層模塊來代替。
amdjs 的API https://github.com/amdjs/amdjs-api/wiki
簡單看了一下RequireJS的實現方式,其 require 實現只不過是將 function 字符串然後提取 require 之後的模塊名,將其放入依賴關系之中。 require方法調用模塊 在require進行調用模塊時,其參數與define類似。
define( id?, deps?, factory ); define也可以接受兩個以上的參數,字符串id為模塊標識,數組deps為模塊依賴:
與nodeJS中一樣需要註意的是,一下方式是錯誤的:
需要這麽做
sea.js 核心特征: 1. 遵循CMD規範,與NodeJS般的書寫模塊代碼。 2. 依賴自動加載,配置清晰簡潔。 兼容 Chrome 3+,Firefox 2+,Safari 3.2+,Opera 10+,IE 5.5+。 seajs.use 用來在頁面中加載一個或者多個模塊
amdjs 的 require 接口文檔 https://github.com/amdjs/amdjs-api/wiki/require
amdjs 的接口文檔 https://github.com/amdjs/amdjs-api/wiki RequireJS官網接口文檔 http://www.requirejs.org/docs/api.html 模塊系統 https://github.com/seajs/seajs/issues/240 前端模塊化開發的價值 https://github.com/seajs/seajs/issues/547 前端模塊化開發那點歷史 https://github.com/seajs/seajs/issues/588 CMD 模塊定義規範 https://github.com/seajs/seajs/issues/242 SeaJS API快速參考 https://github.com/seajs/seajs/issues/266 從 CommonJS 到 Sea.js https://github.com/seajs/seajs/issues/269
JavaScript模塊化開發 - AMD規範 http://www.feeldesignstudio.com/2013/09/javascript-module-pattern-amd
模塊化設計 http://baike.baidu.com/view/189730.htm
模塊化 http://baike.baidu.com/view/182267.htm
原文地址:http://blog.chinaunix.net/uid-26672038-id-4112229.html
JavaSript模塊化
在了解AMD,CMD規範前,還是需要先來簡單地了解下什麽是模塊化,模塊化開發? 模塊化是指在解決某一個復雜問題或者一系列的雜糅問題時,依照一種分類的思維把問題進行系統性的分解以之處理。模塊化是一種處理復雜系統分解為代碼結構更合理,可維護性更高的可管理的模塊的方式。可以想象一個巨大的系統代碼,被整合優化分割成邏輯性很強的模塊時,對於軟件是一種何等意義的存在。對於軟件行業來說:解耦軟件系統的復雜性,使得不管多麽大的系統,也可以將管理,開發,維護變得“有理可循”。 還有一些對於模塊化一些專業的定義為:模塊化是軟件系統的屬性,這個系統被分解為一組高內聚,低耦合的模塊。那麽在理想狀態下我們只需要完成自己部分的核心業務邏輯代碼,其他方面的依賴可以通過直接加載被人已經寫好模塊進行使用即可。 首先,既然是模塊化設計,那麽作為一個模塊化系統所必須的能力: 1. 定義封裝的模塊。 2. 定義新模塊對其他模塊的依賴。 3. 可對其他模塊的引入支持。 好了,思想有了,那麽總要有點什麽來建立一個模塊化的規範制度吧,不然各式各樣的模塊加載方式只會將局攪得更為混亂。那麽在JavaScript中出現了一些非傳統模塊開發方式的規範 CommonJS的模塊規範,AMD(Asynchronous Module Definition),CMD(Common Module Definition)等。AMD 與 RequireJS
AMD
Asynchronous Module Definition,用白話文講就是 異步模塊定義,對於 JSer 來說,異步是再也熟悉不過的詞了,所有的模塊將被異步加載,模塊加載不影響後面語句運行。所有依賴某些模塊的語句均放置在回調函數中。 AMD規範定義了一個自由變量或者說是全局變量 define 的函數。define( id?, dependencies?, factory );
AMD規範 https://github.com/amdjs/amdjs-api/wiki/AMD 第一個參數 id 為字符串類型,表示了模塊標識,為可選參數。若不存在則模塊標識應該默認定義為在加載器中被請求腳本的標識。如果存在,那麽模塊標識必須為頂層的或者一個絕對的標識。 第二個參數,dependencies ,是一個當前模塊依賴的,已被模塊定義的模塊標識的數組字面量。 第三個參數,factory,是一個需要進行實例化的函數或者一個對象。 創建模塊標識為 alpha 的模塊,依賴於 require, export,和標識為 beta 的模塊
- define("alpha", [ "require", "exports", "beta" ], function( require, exports, beta ){
- export.verb = function(){
- return beta.verb();
- // or:
- return require("beta").verb();
- }
- });
一個返回對象字面量的異步模塊
- define(["alpha"], function( alpha ){
- return {
- verb : function(){
- return alpha.verb() + 1 ;
- }
- }
- });
無依賴模塊可以直接使用對象字面量來定義
- define( {
- add : function( x, y ){
- return x + y ;
- }
- } );
類似與 CommonJS 方式定義
- define( function( require, exports, module){
- var a = require(‘a‘),
- b = require(‘b‘);
- exports.action = function(){};
- } );
require();
require API 介紹 https://github.com/amdjs/amdjs-api/wiki/require 在 AMD 規範中的 require 函數與一般的 CommonJS中的 require 不同。由於動態檢測依賴關系使加載異步,對於基於回調的 require 需求強烈。局部 與 全局 的require
局部的 require 需要在AMD模式中的 define 工廠函數中傳入 require。- define( [‘require‘], function( require ){
- // ...
- } );
- or:
- define( function( require, exports, module ){
- // ...
- } );
局部的 require 需要其他特定的 API 來實現。 全局的 require 函數是唯一全局作用域下的變量,像 define一樣。全局的 require 並不是規範要求的,但是如果實現全局的 require函數,那麽其需要具有與局部 require 函數 一樣的以下的限定: 1. 模塊標識視為絕對的,而不是相對的對應另一個模塊標識。 2. 只有在異步情況下,require的回調方式才被用來作為交互操作使用。因為他不可能在同步的情況下通過 require(String) 從頂層加載模塊。 依賴相關的API會開始模塊加載。如果需要有互操作的多個加載器,那麽全局的 reqiure 應該被加載頂層模塊來代替。
- require(String)
- define( function( require ){
- var a = require(‘a‘); // 加載模塊a
- } );
- require(Array, Function)
- define( function( require ){
- require( [‘a‘, ‘b‘], function( a,b ){ // 加載模塊a b 使用
- // 依賴 a b 模塊的運行代碼
- } );
- } );
- require.toUrl( Url )
- define( function( require ){
- var temp = require.toUrl(‘./temp/a.html‘); // 加載頁面
- } );
amdjs 的API https://github.com/amdjs/amdjs-api/wiki
RequireJS
官網 http://www.requirejs.org/ API http://www.requirejs.org/docs/api.html RequireJS 是一個前端的模塊化管理的工具庫,遵循AMD規範,它的作者就是AMD規範的創始人 James Burke。所以說RequireJS是對AMD規範的闡述一點也不為過。 RequireJS 的基本思想為:通過一個函數來將所有所需要的或者說所依賴的模塊實現裝載進來,然後返回一個新的函數(模塊),我們所有的關於新模塊的業務代碼都在這個函數內部操作,其內部也可無限制的使用已經加載進來的以來的模塊。- <script data-main=‘scripts/main‘ src=‘scripts/require.js‘></script>
- define({
- method1: function(){},
- method2: function(){}
- });
- define(function(){
- return{
- method1: function(){},
- method2: function(){}
- }
- });
- define([ ‘module1‘, ‘module2‘ ], function(m1, m2){
- ...
- });
- define( function( require ){
- var m1 = require( ‘module1‘ ),
- m2 = require( ‘module2‘ );
- ...
- });
簡單看了一下RequireJS的實現方式,其 require 實現只不過是將 function 字符串然後提取 require 之後的模塊名,將其放入依賴關系之中。 require方法調用模塊 在require進行調用模塊時,其參數與define類似。
- require( [‘foo‘, ‘bar‘], function( foo, bar ){
- foo.func();
- bar.func();
- } );
- define( function( require ){
- var m1 = require( ‘module1‘ ),
- m2 = require( ‘module2‘ );
- ...
- });
CMD 與 seaJS
CMD
在CMD中,一個模塊就是一個文件,格式為: define( factory ); 全局函數define,用來定義模塊。 參數 factory 可以是一個函數,也可以為對象或者字符串。 當 factory 為對象、字符串時,表示模塊的接口就是該對象、字符串。 定義JSON數據模塊:- define({ "foo": "bar" });
- define(‘this is {{data}}.‘);
- define( function(require, exports, module) {
- // 模塊代碼
- });
define( id?, deps?, factory ); define也可以接受兩個以上的參數,字符串id為模塊標識,數組deps為模塊依賴:
- define( ‘module‘, [‘module1‘, ‘module2‘], function( require, exports, module ){
- // 模塊代碼
- } );
- define(function( require, exports ){
- var a = require(‘./a‘);
- a.doSomething();
- });
- define( function(require, exports, module) {
- require.async(‘.a‘, function(a){
- a.doSomething();
- });
- });
- define(function( require, exports ){
- exports.foo = ‘bar‘; // 向外提供的屬性
- exports.do = function(){}; // 向外提供的方法
- });
- define(function( require, exports ){
- return{
- foo : ‘bar‘, // 向外提供的屬性
- do : function(){} // 向外提供的方法
- }
- });
- define({
- foo : ‘bar‘, // 向外提供的屬性
- do : function(){} // 向外提供的方法
- });
與nodeJS中一樣需要註意的是,一下方式是錯誤的:
- define(function( require, exports ){
- exports = {
- foo : ‘bar‘, // 向外提供的屬性
- do : function(){} // 向外提供的方法
- }
- });
需要這麽做
- define(function( require, exports, module ){
- module.exports = {
- foo : ‘bar‘, // 向外提供的屬性
- do : function(){} // 向外提供的方法
- }
- });
seaJS
官網 http://seajs.org/docs/ API快速參考 https://github.com/seajs/seajs/issues/266sea.js 核心特征: 1. 遵循CMD規範,與NodeJS般的書寫模塊代碼。 2. 依賴自動加載,配置清晰簡潔。 兼容 Chrome 3+,Firefox 2+,Safari 3.2+,Opera 10+,IE 5.5+。 seajs.use 用來在頁面中加載一個或者多個模塊
- // 加載一個模塊
- seajs.use(‘./a‘);
- // 加載模塊,加載完成時執行回調
- seajs.use(‘./a‘,function(a){
- a.doSomething();
- });
- // 加載多個模塊執行回調
- seajs.use([‘./a‘,‘./b‘],function(a , b){
- a.doSomething();
- b.doSomething();
- });
AMD 與 CMD 區別到底在哪裏?
看了以上 AMD,requireJS 與 CMD, seaJS的簡單介紹會有點感覺模糊,總感覺較為相似。因為像 requireJS 其並不是只是純粹的AMD固有思想,其也是有CMD規範的思想,只不過是推薦 AMD規範方式而已, seaJS也是一樣。 下面是玉伯對於 AMD 與 CMD 區別的解釋: AMD 是 RequireJS 在推廣過程中對模塊定義的規範化產出。 CMD 是 SeaJS 在推廣過程中對模塊定義的規範化產出。 類似的還有 CommonJS Modules/2.0 規範,是 BravoJS 在推廣過程中對模塊定義的規範化產出還有不少?? 這些規範的目的都是為了 JavaScript 的模塊化開發,特別是在瀏覽器端的。 目前這些規範的實現都能達成瀏覽器端模塊化開發的目的。 區別: 1. 對於依賴的模塊,AMD 是提前執行,CMD 是延遲執行。不過 RequireJS 從 2.0 開始,也改成可以延遲執行(根據寫法不同,處理方式不同)。CMD 推崇 as lazy as possible. 2. CMD 推崇依賴就近,AMD 推崇依賴前置。看代碼:- // CMD
- define(function(require, exports, module) {
- var a = require(‘./a‘)
- a.doSomething()
- // 此處略去 100 行
- var b = require(‘./b‘) // 依賴可以就近書寫
- b.doSomething()
- // ...
- })
- // AMD 默認推薦的是
- define([‘./a‘, ‘./b‘], function(a, b) { // 依賴必須一開始就寫好
- a.doSomething()
- // 此處略去 100 行
- b.doSomething()
- // ...
- })
總結
本文主要是介紹了一下 AMD CMD的規範,順便簡單的講述了一下 requireJS 與 seaJS。講的較為籠統,下面的擴展閱讀可以更好的幫助你理解模塊化以及各個規範。 擴展閱讀: AMD規範文檔 https://github.com/amdjs/amdjs-api/wiki/AMDamdjs 的 require 接口文檔 https://github.com/amdjs/amdjs-api/wiki/require
amdjs 的接口文檔 https://github.com/amdjs/amdjs-api/wiki RequireJS官網接口文檔 http://www.requirejs.org/docs/api.html 模塊系統 https://github.com/seajs/seajs/issues/240 前端模塊化開發的價值 https://github.com/seajs/seajs/issues/547 前端模塊化開發那點歷史 https://github.com/seajs/seajs/issues/588 CMD 模塊定義規範 https://github.com/seajs/seajs/issues/242 SeaJS API快速參考 https://github.com/seajs/seajs/issues/266 從 CommonJS 到 Sea.js https://github.com/seajs/seajs/issues/269
RequireJS和AMD規範 http://javascript.ruanyifeng.com/tool/requirejs.html
CommonJS規範 http://javascript.ruanyifeng.com/nodejs/commonjs.html Javascript模塊化編程 http://www.ruanyifeng.com/blog/2012/10/javascript_module.html Javascript模塊化編程 http://www.ruanyifeng.com/blog/2012/10/asynchronous_module_definition.html知乎 AMD 和 CMD 的區別有哪些? http://www.zhihu.com/question/20351507
JavaScript模塊化開發 - CommonJS規範 http://www.feeldesignstudio.com/2013/09/javascript-module-pattern-commonjsJavaScript模塊化開發 - AMD規範 http://www.feeldesignstudio.com/2013/09/javascript-module-pattern-amd
模塊化設計 http://baike.baidu.com/view/189730.htm
模塊化 http://baike.baidu.com/view/182267.htm
JavaSript模塊規範 - AMD規範與CMD規範介紹[轉]