作者:zccst
先温习一下define定义:
define(function(require, exports, module){
});
为什么要有约定和构建工具
CMD模块的构建过程
1,提取操作,用来提取模块的标识 id 和依赖 dependencies。假设模块代码为:
a.js
define(function(require, exports) {
var b = require('./b');
})
经过提取操作后,a.js 的源码会转换成临时文件:
define('xxx/1.0.0/a', ['./b'], function(require, exports) {
var b = require('./b');
})
2,压缩操作。经过上面的提取操作后,构建工具就可以调用任何 JS 压缩工具来进行压缩了,require 参数也可以被压缩成任意字符。
下面说明为什么需要预先提取这两个信息
1,为什么要提取 id
默认情况下,书写 CMD 模块时,不需要手写 id:
a.js
define(function(require, exports) {
...
});
b.js
define(function(require, exports) {
...
});
上面两个模块,如果直接合并,会变成:
a+b.js
define(function(require, exports) {
...
});
define(function(require, exports) {
...
});
这会导致无法区分 define 对应哪个模块。因此在合并前,我们需要通过工具将 id 提取出来。
a+b.js:
define('a', function(require, exports) {
...
});
define('b', function(require, exports) {
...
});
此外,即便不合并,保持一个文件一个模块,如果压缩时不提取 id,那么在 IE6-9 下也有可能会出现问题。这是实现上的困难,具体请看源码。如果要确保上线后在 IE 下没问题,请务必要手写或通过工具提取 id。
2,为什么要提取依赖数组 dependencies
为了保证压缩工具可以随意压缩代码,构建工具在提取 id 字符串时,同时也会提取 dependencies 数组。提取过后的代码变成:
define('xxx/1.0.0/a', ['./b', './c'], function(require, exports) {
var b = require('./b');
var c = require('./c');
});
这样,Sea.js 就不需要通过 factory.toString() 和正则匹配的方式来获取依赖,直接从第二个参数中就可以拿到依赖数组。
这意味着,提取过 id 和 dependencies 的模块代码,就可以用任何压缩工具压缩了。
用普通压缩工具如何压缩 CMD 模块
由于各种原因,暂时无法使用 Sea.js 配套的构建工具来压缩时,需要注意以下几点:
1, 如果项目需要支持 IE,请手写 id,即定义模块时,需要人肉写上第一个参数,比如:
define('a', function(require, exports) {
...
});
如果项目对性能有要求,上线后需要合并文件,也请确保手工写上 id 参数。
2, 压缩时,不要压缩 require 参数,目前 UglifyJS 支持通过参数来指定保留名字:
$ uglifyjs --reserved-names require -o test-min.js test.js
或者自己写工具来保证 id 和 dependencies 的预先提取。
如果您觉得本文的内容对您的学习有所帮助,您可以微信:
分享到:
相关推荐
seajs下载,包含自己总结的用法和规范
seajs常见配置解析和常见插件的使用。sea.js,seajs-css.js,seajs-debug.js,seajs-preload.js,seajs-log.js等
SeaJS是一个遵循CommonJS规范的JavaScript模块加载框架,可以实现JavaScript的模块化开发及加载机制。与jQuery等JavaScript框架不同,SeaJS不会扩展封装语言特性,而只是实现JavaScript的模块化及按模块加载。
前言SeaJS是一个遵循CommonJS规范的JavaScript模块加载框架,可以实现JavaScript的模块化开发及加载机制。与jQuery等JavaScript框架不同,SeaJS不会扩展封装语言特性,而只是实现JavaScript的模块化及按模块加载。...
SeaJS是一个遵循CommonJS规范的JavaScript模块加载框架,可以实现JavaScript的模块化开发及加载机制。
有了 define 等模块定义规范的实现,我们可以开发出很多模块。但光有一堆模块不管用,我们还得让它们能跑起来。在 SeaJS 里,要启动模块系统很简单: [removed][removed] [removed] seajs.use('./main'); [removed]...
主要介绍了SeaJS 与 RequireJS 的差异对比,本文主要对CMD规范和AMD规范的弊端做了对比,并做出了一个总结,需要的朋友可以参考下
SeaJS 是一个遵循 CommonJS 规范的模块加载框架,可用来轻松愉悦地加载任意 JavaScript 模块
SeaJS 是一个遵循 CommonJS 规范的模块加载框架,可用来轻松愉悦地加载任意 JavaScript 模块
Seajs,一个Web模块加载框架,追求简单、自然的代码书写和组织方式,:Sea.js 遵循 CMD 规范,模块化JS代码。依赖的自动加载、配置的简洁清晰,可以让程序员更多地专注编码。 2.Seajs优缺点 优点: 1).提高可...
现在js的module规范里面,很大一部分都是遵循AMD规范,但是还有很多一部分在使用seajs的CMD规范,以及阿里系的KISSY的module规范(我们对其简称KMD)。 那么,其实我们可以用遵循AMD规范的module,然后把它适配到能...
SeaJS是一个遵循 CommonJS 规范的模块加载框架,可用来轻松愉悦地加载任意JavaScript模块和css模块样式。SeaJS接口和方法也非常少,SeaJS 就两个核心:模块定义和模块的加载及依赖关系。本文将详细介绍模块的依赖...
SeaJS是一个遵循CommonJS规范的JavaScript模块加载框架,可以实现JavaScript的模块化开发及加载机制。使用SeaJS可以提高JavaScript代码的可读性和清晰度,解决目前JavaScript编程中普遍存在的依赖关系混乱和代码...
SeaJS 是一个遵循 CommonJS 规范的模块加载框架,可用来轻松愉悦地加载任意 JavaScript 模块
SeaJS 是一个遵循 CommonJS 规范的模块加载框架,可用来轻松愉悦地加载任意 JavaScript 模块
SeaJS 是一个遵循 CommonJS 规范的模块加载框架,可用来轻松愉悦地加载任意 JavaScript 模块
SeaJS 是由玉伯开发的一个遵循 CommonJS 规范的模块加载框架,可用来轻松愉悦地加载任意 JavaScript 模块和css模块样式。SeaJS非常小巧,小巧在于压缩和gzip后体积只有4K,而且接口和方法也非常少,SeaJS 就两个核心...
Seajs,一个Web模块加载框架,追求简单、自然的代码书写和组织方式,:Sea.js 遵循 CMD 规范,模块化JS代码。依赖的自动加载、配置的简洁清晰,可以让程序员更多地专注编码。 2.优缺点 优点:1).提高可维护性。2)....
提供各类插件用于前端开发,例如JSLint代码检验,优化,concat合并文件插件,uglify压缩工具,与CMD规范(一种js模块化开发的规范提议)配合的grunt-cmd-concat,这里主要是用于配合seajs,将多个文件合并压缩 ##使用环境##...
seajs实现了JavaScript 的 模块开发及按模块...使用define函数来进行定义一个模块,根据 CMD (Common Module Definition)模块定义规范。一个文件就是一个模块。所以一个js文件中只有一个define,即一个文件是一个模块