`
zccst
  • 浏览: 3322543 次
  • 性别: 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,首先需要从官方网站或者其他可靠的源获取最新版本的Seajs文件。下载完成后,将`seajs`文件放置在项目的公共目录下,通常是`js`或`lib`目录。确保这个位置能让所有需要使用Seajs的页面都能访问...

    seajs手册,教程

    本手册将详细阐述Seajs的核心概念、使用方法以及如何通过它来构建高效的前端应用。 1. **模块化编程**:Seajs基于CommonJS规范,引入了模块化编程的概念,允许开发者将复杂的JavaScript代码拆分为可重用的模块,...

    CMD规范之seajs

    CMD规范之Seajs Seajs是一款轻量级的前端模块加载器,它遵循CommonJS规范,使得JavaScript在浏览器端也能实现模块化的开发。这个规范主要包含模块定义、模块加载和模块化开发的思想,大大提高了代码的可维护性和...

    seajs-5分钟上手

    Seajs是中国开源社区推出的一款浏览器端的模块加载器,它借鉴了CommonJS的规范,但针对浏览器环境进行了优化,使得JavaScript在浏览器端也能实现模块化的开发。本教程将带你快速了解并掌握Seajs的使用,让你在5分钟...

    seajs js 模块加载器

    CommonJS 是一种在服务器端JavaScript环境中广泛使用的模块规范,而SeaJS 则将其理念带到了浏览器端。通过SeaJS,开发者可以将大型项目分解为多个独立的模块,每个模块都有自己的作用域,避免了全局变量污染,同时也...

    seajs官方小实例

    Seajs 是一个用于浏览器端的模块加载器,它遵循 CommonJS 规范,让 JavaScript 开发者能够在浏览器环境中实现模块化开发,提高代码的可维护性和复用性。Seajs 的核心理念是通过模块化解决 JavaScript 开发中的依赖...

    seajs-2.3.0.zip

    Seajs是中国开源社区非常受欢迎的一款JavaScript模块加载器,它的出现为Web开发引入了CommonJS规范,使得前端开发更加模块化,便于代码管理和维护。Seajs 2.3.0是该库的一个稳定版本,提供了丰富的功能和优化。 一...

    seajs_2.3.0以及学习文档

    Seajs 是一个轻量级的前端模块加载器,它的出现是为了在浏览器端实现 CommonJS 规范,使得 JavaScript 的组织和开发变得更加模块化。Seajs 版本 2.3.0 是其稳定的一个版本,提供了更完善的特性和优化。 在...

    seajs源码阅读

    Seajs是一款轻量级的JavaScript模块加载器,它遵循CommonJS规范,使得在浏览器端也能实现模块化的开发。通过阅读Seajs的源码,我们可以深入理解JavaScript模块化的工作原理,以及如何实现一个模块加载器。 在开始...

    seajs入门完整案例,适合新手学习

    Seajs 是一个基于浏览器的模块加载器,它遵循 CommonJS 规范,使得在浏览器环境中可以实现模块化开发。这个“seajs入门完整案例”针对初学者提供了学习资源,帮助他们快速掌握Seajs的基本用法和特性。 1. **模块化...

    seajs-2.2.3

    Seajs的核心功能在于它的模块加载机制,它支持 CMD (Common Module Definition) 规范,这是一种在浏览器环境中实现模块化的标准。CMD 强调异步加载,允许脚本按需加载,避免了阻塞页面渲染。通过 `seajs.use()` 方法...

    SeaJS与RequireJS区别

    **SeaJS 和 RequireJS 是两种广泛使用的 JavaScript 模块加载器和依赖管理工具,它们的主要目的是解决 JavaScript 在浏览器端的异步加载和模块化问题。** **SeaJS** SeaJS 是一个轻量级的模块加载器,由中国淘宝...

    seajs源代码

    Seajs是一款轻量级的JavaScript模块加载器,它遵循CommonJS规范,旨在解决浏览器环境中的模块化问题。在深入理解seajs源代码之前,我们首先需要了解模块化的基本概念和CommonJS规范。 模块化是软件开发中的一种组织...

    seajs-2.2.0源码

    Seajs是中国著名的前端模块加载器,它借鉴了CommonJS的规范,使得JavaScript在浏览器环境中也能实现模块化的开发。本文将深入解析Seajs 2.2.0版本的源码,探讨其核心机制、设计理念以及如何使用它来组织和管理前端...

    前端开源库-grunt-react-seajs

    而SeaJS则是一款遵循CommonJS规范的前端模块加载器,它让JavaScript模块化变得简单,尤其在浏览器环境里。 Grunt是一个基于Node.js的任务自动化构建工具,它可以帮助开发者执行一系列预定义的任务,如编译、测试、...

    seaJS框架简介和完整例子

    SeaJS的核心理念是遵循 CommonJS 规范,提供浏览器环境下的模块化解决方案。在CommonJS中,每个文件被视为一个模块,通过`require`方法来导入其他模块,`exports`或`module.exports`用于导出模块内容。然而,由于...

    seajs相关模板

    Seajs的设计理念是基于CMD(Common Module Definition)规范,它鼓励开发者采用异步加载的方式组织代码,使得JavaScript的模块化更加符合Web的特性。 ## Seajs简介 Seajs的核心思想是将JavaScript代码按照模块进行...

    前端项目-seajs.zip

    Seajs的核心理念是遵循CommonJS规范,它允许开发者在浏览器环境中实现模块化编程。CommonJS是一种服务器端的JavaScript模块化标准,而Seajs则将其移植到了浏览器环境,使得前端开发者也能享受到模块化的便利。通过...

    seajs 使用文档

    ### seajs 使用文档 #### Sea.js简介 Sea.js 是一款专为前端开发设计的轻量级模块加载器,它遵循 CMD(Common Module Definition)模块定义规范。与 AMD(Asynchronous Module Definition)规范相比,CMD 规范更加...

    knockout seajs .net中实战应用

    通过使用seajs.use()方法,可以按需加载依赖,确保代码的按序执行。Sea.js还支持CMD(Common Module Definition)规范,使得代码更易于维护和扩展。 结合使用Knockout和Sea.js,可以构建出高效的前端应用。例如,你...

Global site tag (gtag.js) - Google Analytics