如何改造现有文件为 CMD 模块.pdfVIP

如何改造现有⽂件为 CMD 模块 如何改造现有⽂件为 CMD 模块 经过⼀段考察，我们终于要在项⽬中引⼊模块机制和 Sea.j s 了，那么如何将现有 ⽂ 件改造成 CMD 模块就成了重要 问题。下⾯针对⼀些典型场景来说明包装 ⽅式。 ⾸先还是请⼤家详细了解下 CMD 模块定义规范，只要洞悉事物 定义和本质，⼀切 问题可迎刃⽽解。 改造主流模块 这⾥指 是 j Query 、Moment 、Backbone 、underscore 等业界主流模块，这些模块⼀般 都有对 AMD 和 CommonJS ⽀持代码，例如 j Query 源⽂件 最后⼏⾏： if ( typeof module === object module typeof module.exports } else { window .jQuery = window .$ = jQuery; if ( typeof defi define( jquery, [], function () { return jQuery; } ); } } 还有 Backbone ⾥： v r B ckbone;if (typeof exports !== undefined) { B ckbone = exports; } else { B ckbone = root.B ckbone = {}; } 对于有这些兼容代码 ，只需要去掉 define .amd ⽀持，或是直接包装上 define 就 可以了。 define(function(require, exports, module) { // code here ...}); 如果没有模块化 兼容代码，有时候需要⼿动引⼊依赖，以及暴露对应 接⼜。 define(function(require, exports, module) { v r $ = require($); module.exports = Pl ceholders; }); 可以参考 cmdj s/gallery ⾥ Gruntfile 对这些主流模块 代码替换⽅式。 现有的 JS ⽂件 对于⼀些现有 普通 JS ⽂件，相对简单 多，参考 CMD 书写规范，把那些暴露到 全局命名空间 接⼜⽤ CMD ⽅式进⾏改造就可以了。 ⽐如现有⽂件 util.js 。 window .util = window .util || {};util. ddCl ss = function() { wind };util.queryString = function() {}; 改为： define(function(require, exports, module) { // 引⼊依赖 v r css = require(css); util. ddCl ss = function() { css(); }; util.queryString = function() {}; // 暴露对应接⼝ module.exports = util; }); 这⾥不啰嗦，就是基本 CMD 书写规范。实际 改造过程中，情况可以⽐上⾯ 例 ⼦要复杂⼀些，具体情况具体解决就⾏。 改造 j Query 插件 这也是⼀个经常遇到 问题，我们推荐以下 包装⽅式： // jquery-plugin- bcdefine(function(require, exports, module) { v $.fn. bc = function() {}; }); 这样 改造⽅式实际上是强化了原有 对象 （⽽不是重新包装出⼀个新 ），在 实际调⽤时，可以⽤下⾯ ⽅式： se js.use([$, jquery-plugin- bc], function($) { // $ 有了 jque $. bc(); }); 更多 j Query 插件 包装，可以参考 cmdj s/jquery ⾥ 做法。 ⼯具 除了⼿动 ⽅式修改代码外，我们推荐使⽤ Grunt 来进⾏统⼀ 改造，官⽅也通过 Grunt 改造了很多主流模块和 j Query 插件，具体 操作⼿册见 引⼊ CMD 模块指南 。 你可以在 cmdj s/gallery 和 cmdj s/jquery 中找到具