如何改造現有檔案為 CMD 模組

2022-09-11 17:33:19 字數 1915 閱讀 5146

經過一段考察,我們終於要在專案中引入模組機制和 sea.js 了,那麼如何將現有的檔案改造成 cmd 模組就成了重要的問題。下面針對一些典型場景來說明包裝的方式。

首先還是請大家詳細了解下 cmd 模組定義規範,只要洞悉事物的定義和本質,一切問題可迎刃而解。

這裡指的是 jquery、moment、backbone、underscore 等業界主流模組,這些模組一般都有對 amd 和 commonjs 的支援**,例如 jquery 原始檔的最後幾行:

if ( typeof module === "object" && module && typeof module.exports === "object" )  else  );

}}

還有 backbone 裡:

var backbone;

if (typeof exports !== 'undefined') else ;

}

對於有這些相容**的,只需要去掉 define.amd 的支援,或是直接包裝上define就可以了。

define(function(require, exports, module) );

如果沒有模組化的相容**,有時候需要手動引入依賴,以及暴露對應的介面。

define(function(require, exports, module) );

可以參考 cmdjs/gallery 裡的 gruntfile 對這些主流模組的**替換方式。

對於一些現有的普通 js 檔案,相對簡單的多,參考 cmd 的書寫規範,把那些暴露到全域性命名空間的介面用 cmd 的方式進行改造就可以了。

比如現有檔案util.js

window.util = window.util || {};

util.addclass = function() ;

util.querystring = function() {};

改為:

define(function(require, exports, module) ;

util.querystring = function() {};

// 暴露對應介面

module.exports = util;

});

這裡不囉嗦,就是基本的 cmd 書寫規範。實際的改造過程中,情況可以比上面的例子要複雜一些,具體情況具體解決就行。

// jquery-plugin-abc

define(function(require, exports, module) ;

});

這樣的改造方式實際上是強化了原有的 $ 物件(而不是重新包裝出乙個新的 $),在實際呼叫時,可以用下面的方式:

seajs.use(['$', 'jquery-plugin-abc'], function($) );

更多 jquery 外掛程式的包裝,可以參考 cmdjs/jquery 裡的做法。

除了手動的方式修改**外,我們推薦使用 grunt 來進行統一的改造,官方也通過 grunt 改造了很多主流模組和 jquery 外掛程式,具體的操作手冊見 引入 cmd 模組指南 。你可以在 cmdjs/gallery 和 cmdjs/jquery 中找到具體的 gruntfile ,從而借鑑到您的專案中去。所有打包好的模組可以在 spmjs.org 中找到。

上面提供的是原有**包裝為cmd 書寫規範的方法,在具體上線前,可能還需要打包為具名模組(包含 id 的模組)。關於構建方面的進一步知識可以參考 構建工具 。

這裡提到的包裝方式都比較典型和簡單,具體的實踐可能千差萬別。您在專案中有什麼探索、實踐和問題,歡迎來這裡分享和提問。

如何改造現有檔案為 CMD 模組

參考cmd官方文件 這裡指的是 jquery moment backbone underscore 等業界主流模組,這些模組一般都有對 amd 和 commonjs 的支援 例如 jquery 原始檔的最後幾行 if typeof module object module typeof module...

Python如何使用OS模組呼叫cmd

在os模組中提供了兩種呼叫 cmd 的方法,os.popen 和 os.system os.system cmd 是在執行command命令時需要開啟乙個終端,並且無法儲存command命令的執行結果。os.popen cmd,mode 開啟乙個與command程序之間的管道。返回值是乙個檔案物件,...

中cmd 如何理解CMD檔案中的ALIGN?

在dsp開發過程中,經常要對cmd檔案進行編寫,兩條指令memory和sections的基本用法,想必大家都知道。但是,在sections指令中,經常會碰到如下表達 上圖中的某些資料段,在指定了儲存器和資料空間後,還跟了align 512 這個申明有什麼作用?先從網路查一下align的意思 alig...