如何改造現(xiàn)有文件為 CMD 模塊

如何改造現(xiàn)有文件為 CMD 模塊

經(jīng)過(guò)一段考察，我們終于要在項(xiàng)目中引入模塊機(jī)制和 Sea.js 了，那么如何將現(xiàn)有的文件改造成 CMD 模塊就成了重要的問(wèn)題。下面針對(duì)一些典型場(chǎng)景來(lái)說(shuō)明包裝的方式。

首先還是請(qǐng)大家詳細(xì)了解下 CMD 模塊定義規(guī)范，只要洞悉事物的定義和本質(zhì)，一切問(wèn)題可迎刃而解。

改造主流模塊

這里指的是 jQuery、Moment、Backbone、underscore 等業(yè)界主流模塊，這些模塊一般都有對(duì) AMD 和 CommonJS 的支持代碼，例如 jQuery 源文件的最后幾行：

if ( typeof module === "object" && module && typeof module.exports === "object" ) {    module.exports = jQuery;
} else {    window.jQuery = window.$ = jQuery;    if ( typeof define === "function" && define.amd ) {
        define( "jquery", [], function () { return jQuery; } );
    }
}

還有 Backbone 里：

var Backbone;if (typeof exports !== 'undefined') {
  Backbone = exports;
} else {
  Backbone = root.Backbone = {};
}

對(duì)于有這些兼容代碼的，只需要去掉 define.amd 的支持，或是直接包裝上 define 就可以了。

define(function(require, exports, module) {  // code here ...});

如果沒(méi)有模塊化的兼容代碼，有時(shí)候需要手動(dòng)引入依賴，以及暴露對(duì)應(yīng)的接口。

define(function(require, exports, module) {  var $ = require('$');  // code here ...
  module.exports = Placeholders;
});

可以參考 cmdjs/gallery 里的 Gruntfile 對(duì)這些主流模塊的代碼替換方式。

現(xiàn)有的 JS 文件

對(duì)于一些現(xiàn)有的普通 JS 文件，相對(duì)簡(jiǎn)單的多，參考 CMD 的書寫規(guī)范，把那些暴露到全局命名空間的接口用 CMD 的方式進(jìn)行改造就可以了。

比如現(xiàn)有文件 util.js 。

window.util = window.util || {};util.addClass = function() {  window.css();
};util.queryString = function() {};

改為：

define(function(require, exports, module) {  // 引入依賴
  var css = require('css');  util.addClass = function() {
    css();
  };  util.queryString = function() {};  // 暴露對(duì)應(yīng)接口
  module.exports = util;
});

這里不啰嗦，就是基本的 CMD 書寫規(guī)范。實(shí)際的改造過(guò)程中，情況可以比上面的例子要復(fù)雜一些，具體情況具體解決就行。

改造 jQuery 插件

這也是一個(gè)經(jīng)常遇到的問(wèn)題，我們推薦以下的包裝方式：

// jquery-plugin-abcdefine(function(require, exports, module) {  var $ = require('$');  // 插件的代碼
  $.fn.abc = function() {};
});

這樣的改造方式實(shí)際上是強(qiáng)化了原有的 $ 對(duì)象（而不是重新包裝出一個(gè)新的 $），在實(shí)際調(diào)用時(shí)，可以用下面的方式：

seajs.use(['$', 'jquery-plugin-abc'], function($) {  // $ 有了 jquery-plugin-abc 所提供的插件功能
  $.abc();
});

更多 jQuery 插件的包裝，可以參考 cmdjs/jquery 里的做法。

工具

除了手動(dòng)的方式修改代碼外，我們推薦使用 Grunt 來(lái)進(jìn)行統(tǒng)一的改造，官方也通過(guò) Grunt 改造了很多主流模塊和 jQuery 插件，具體的操作手冊(cè)見 引入 CMD 模塊指南 。你可以在 cmdjs/gallery 和 cmdjs/jquery 中找到具體的 Gruntfile ，從而借鑒到您的項(xiàng)目中去。所有打包好的模塊可以在 spmjs.org 中找到。

小結(jié)

上面提供的是原有代碼包裝為 CMD 書寫規(guī)范 的方法，在具體上線前，可能還需要打包為具名模塊（包含 ID 的模塊）。關(guān)于構(gòu)建方面的進(jìn)一步知識(shí)可以參考 構(gòu)建工具 。

這里提到的包裝方式都比較典型和簡(jiǎn)單，具體的實(shí)踐可能千差萬(wàn)別。您在項(xiàng)目中有什么探索、實(shí)踐和問(wèn)題，歡迎來(lái)這里分享和提問(wèn)。