`
zccst
  • 浏览: 3291933 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

seajs使用规范

阅读更多
作者: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下载,包含自己总结的用法和规范

    CMD规范之seajs

    seajs常见配置解析和常见插件的使用。sea.js,seajs-css.js,seajs-debug.js,seajs-preload.js,seajs-log.js等

    seajs代码以及文档,帮助你学习。

    SeaJS是一个遵循CommonJS规范的JavaScript模块加载框架,可以实现JavaScript的模块化开发及加载机制。与jQuery等JavaScript框架不同,SeaJS不会扩展封装语言特性,而只是实现JavaScript的模块化及按模块加载。

    SeaJS入门教程系列之SeaJS介绍(一)

    前言SeaJS是一个遵循CommonJS规范的JavaScript模块加载框架,可以实现JavaScript的模块化开发及加载机制。与jQuery等JavaScript框架不同,SeaJS不会扩展封装语言特性,而只是实现JavaScript的模块化及按模块加载。...

    seajs模块加载框架

    SeaJS是一个遵循CommonJS规范的JavaScript模块加载框架,可以实现JavaScript的模块化开发及加载机制。

    SeaJS中use函数用法实例分析

    有了 define 等模块定义规范的实现,我们可以开发出很多模块。但光有一堆模块不管用,我们还得让它们能跑起来。在 SeaJS 里,要启动模块系统很简单: [removed][removed] [removed] seajs.use('./main'); [removed]...

    SeaJS 与 RequireJS 的差异对比

    主要介绍了SeaJS 与 RequireJS 的差异对比,本文主要对CMD规范和AMD规范的弊端做了对比,并做出了一个总结,需要的朋友可以参考下

    SeaJS(Javascript 模块加载框架)源代码

    SeaJS 是一个遵循 CommonJS 规范的模块加载框架,可用来轻松愉悦地加载任意 JavaScript 模块

    SeaJS(Javascript 模块加载框架) v1.0.2

    SeaJS 是一个遵循 CommonJS 规范的模块加载框架,可用来轻松愉悦地加载任意 JavaScript 模块

    Seajs是什么及sea.js 由来,特点以及优势

    Seajs,一个Web模块加载框架,追求简单、自然的代码书写和组织方式,:Sea.js 遵循 CMD 规范,模块化JS代码。依赖的自动加载、配置的简洁清晰,可以让程序员更多地专注编码。   2.Seajs优缺点   优点: 1).提高可...

    defineadaptation:把按照AMD规范编写的module自动适配到KISSY and seajs的 module定义规范

    现在js的module规范里面,很大一部分都是遵循AMD规范,但是还有很多一部分在使用seajs的CMD规范,以及阿里系的KISSY的module规范(我们对其简称KMD)。 那么,其实我们可以用遵循AMD规范的module,然后把它适配到能...

    seajs学习之模块的依赖加载及模块API的导出

    SeaJS是一个遵循 CommonJS 规范的模块加载框架,可用来轻松愉悦地加载任意JavaScript模块和css模块样式。SeaJS接口和方法也非常少,SeaJS 就两个核心:模块定义和模块的加载及依赖关系。本文将详细介绍模块的依赖...

    JavaScript模块化开发之SeaJS

      SeaJS是一个遵循CommonJS规范的JavaScript模块加载框架,可以实现JavaScript的模块化开发及加载机制。使用SeaJS可以提高JavaScript代码的可读性和清晰度,解决目前JavaScript编程中普遍存在的依赖关系混乱和代码...

    SeaJS(Javascript 模块加载框架) v1.0.2.zip

    SeaJS 是一个遵循 CommonJS 规范的模块加载框架,可用来轻松愉悦地加载任意 JavaScript 模块

    SeaJS(Javascript 模块加载框架) v0.9.0.rar

    SeaJS 是一个遵循 CommonJS 规范的模块加载框架,可用来轻松愉悦地加载任意 JavaScript 模块

    SeaJS(Javascript模块加载框架)v0.9.1免费版

    SeaJS 是一个遵循 CommonJS 规范的模块加载框架,可用来轻松愉悦地加载任意 JavaScript 模块

    seaJs的模块定义和模块加载浅析

    SeaJS 是由玉伯开发的一个遵循 CommonJS 规范的模块加载框架,可用来轻松愉悦地加载任意 JavaScript 模块和css模块样式。SeaJS非常小巧,小巧在于压缩和gzip后体积只有4K,而且接口和方法也非常少,SeaJS 就两个核心...

    Seajs的学习笔记

    Seajs,一个Web模块加载框架,追求简单、自然的代码书写和组织方式,:Sea.js 遵循 CMD 规范,模块化JS代码。依赖的自动加载、配置的简洁清晰,可以让程序员更多地专注编码。 2.优缺点 优点:1).提高可维护性。2)....

    grunt-seajs:grunt build seajs 的演示

    提供各类插件用于前端开发,例如JSLint代码检验,优化,concat合并文件插件,uglify压缩工具,与CMD规范(一种js模块化开发的规范提议)配合的grunt-cmd-concat,这里主要是用于配合seajs,将多个文件合并压缩 ##使用环境##...

    通过seajs实现JavaScript的模块开发及按模块加载

    seajs实现了JavaScript 的 模块开发及按模块...使用define函数来进行定义一个模块,根据 CMD (Common Module Definition)模块定义规范。一个文件就是一个模块。所以一个js文件中只有一个define,即一个文件是一个模块

Global site tag (gtag.js) - Google Analytics