閱讀(6.7k) 書簽贊(0) 我要糾錯

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

2018-11-06 18:34 更新

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

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

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

改造主流模塊

這里指的是 jQuery、Moment、Backbone、underscore 等業(yè)界主流模塊，這些模塊一般都有對 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 = {};
}

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

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

如果沒有模塊化的兼容代碼，有時候需要手動引入依賴，以及暴露對應的接口。

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

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

現(xiàn)有的 JS 文件

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

比如現(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() {};  // 暴露對應接口
  module.exports = util;
});

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

改造 jQuery 插件

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

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

這樣的改造方式實際上是強化了原有的 $ 對象（而不是重新包裝出一個新的 $），在實際調用時，可以用下面的方式：

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

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

工具

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