关键词:
1. 在接触规范之前,我们用模块化来封装代码大多为如下:
;(function (形参模块名, 依赖项, 依赖项) {
// 通过 形参模块名 修改模块
window.模块名 = 形参模块名
})(window.模块名 || {}, 依赖项, 依赖项)
-
分号是什么作用?
答:为了防止前面的代码没有添加分号造成语法解析错误,也可能会是 "!", "+" 等
-
为什么要将代码放入一个自执行函数中
答:为了避免全局命名空间污染,核心就是利用函数的私有作用域
-
为什么将依赖项作为参数传进来
答:为了减少作用域查找机制
2. 常见的 JavaScript 模块化规范
规范其实就是这些库在推广的过程中逐渐形成的一套规则。
所谓的规范也就是:
定义了模块的书写格式
以及模块之间的交互规则
Node 环境
CommonJS
浏览器环境
AMD
RequireJS
CMD Common Module Definition
CMD 就是 SeaJS 这个模块加载器在推广的过程中定义的一个模块规范
ECMAScript
ECMAScript 6
CMD、AMD、CommonJS 都是社区制定出来的模块规范,他们的目的都是为了解决 JavaScript 没有模块化系统的问题。 他们都有如何定义模块成员,以及模块成员之间如何进行通信交互的规则。
1.SeaJS基本介绍
-
在SeaJS中,一个js脚本文件就是一个模块
模块具有两个特性:
1. 模块要有一个私有作用域:避免全局命名空间污染 2. 模块可以向外导出内部成员,供别的模块加载和使用
所以:只要使用了SeaJS,那所有的js文件都通过define函数去定义该模块,并且将所有的模块代码写到 define 定义的回调函数中
define 方法的回调函数中分别传递三个固定参数:
1. require: 2. exports 3. module
-
每一个模块中有一个require函数可以用来加载指定模块,需要接收一个模块路径
1. 加载指定模块并且执行该模块中的代码 2. 得到该模块中的暴露的接口对象:module.exports
-
模块的作用域和导出
模块天生就是一个私有作用域,在该模块内部定义的所有成员
如果模块内部的成员想要被外部所访问:
必须通过使用 module.exports(exports) 对象向外暴露
require 函数加载模块的时候,会自动拿到模块内部的 module.exports 对象
2.SeaJS详细介绍
1. 使用
index.html
<script src="./js/sea.js"></script>
<script>
seajs.use('./js/main');
</script>
main.js
define(function (require, exports, module) {
var moduleA = require('add.js')
console.log(moduleA.add(10,20))
})
add.js
define(function (require, exports, module) {
//隐性:var exports = module.exports
function add(a, b){
return +a + +b;
}
module.exports.add = add;
//隐性:return module.exports
})
exports 和 module.exports 的区别:以下事例只能用module.exports
define(function (require, exports, module) {
//隐性:var exports = module.exports
module.exports= function(){
}
//隐性:return module.exports
})
2. 配置(多放在入口文件中)
seajs.config({
// 别名配置
alias: {
'es5-safe': 'gallery/es5-safe/0.9.3/es5-safe',
'json': 'gallery/json/1.0.2/json',
'jquery': 'jquery/jquery/1.10.1/jquery'
},
// 路径配置
paths: {
'gallery': 'https://a.alipayobjects.com/gallery'
},
// Sea.js 的基础路径
base: 'http://example.com/path/to/base/',
});
3. API 详解
-
seajs.use
加载模块,启动模块系统。
加载一个模块 seajs.use('id') 加载一个模块,在加载完成时,执行回调 seajs.use('id', callback) 加载多个模块,加载完成时,执行回调 seajs.use(['id1','id2',...],callback) **注意**: 在调用 seajs.use 之前,需要先引入 sea.js 文件 seajs.use 与 DOM ready 事件没有任何关系。如果某些操作要确保在 DOM ready 后执行,需要使用 jquery 等类库来保证 seajs.use 理论上只用于加载启动,不应该出现在 define 中的模块代码里
-
define(factory)
define 是一个全局函数,用来定义模块。
define 接受 factory 参数,factory 可以是一个函数,也可以是一个对象或字符串。 factory 为对象、字符串时,表示模块的接口就是该对象、字符串。 factory 是一个对象时 define({}) factory 是一个字符串时 define('hello') factory 是一个函数时 define(function(require, exports, module){})
-
require
require 用来加载一个 js 文件模块, require 用来获取指定模块的接口对象 module.exports。
require 在加载和执行的时候,js 会按照同步的方式和执行。
使用注意:
正确拼写 模块 factory 构造方法的第一个参数 必须 命名为 require 不要修改 不要重命名 require 函数,或在任何作用域中给 require 重新赋值 使用字符串直接量 require 的参数值 必须 是字符串直接量
Tips: 把 require 看做是语法关键字就好啦
-
模块标识
模块标识是一个字符串,用来标识模块。
模块标识可以不包含文件后缀名,比如 .js seajs 推荐不加 .js 文件模块后缀 模块标识可以是 相对 或 顶级 标识
相对标识
相对标识以 . 开头,永远相对于当前模块所处的路径来解析。
顶级标识
顶级标识不以 . 或 / 开始,会相对模块系统的基础路径(base路径,默认是 sea.js 文件所属的路径)。 可以手动配置 base 路径。 seajs.config({ base: './js' })
普通路径
除了相对和顶级标识之外的标识都是普通路径。 普通路径的解析规则,会相对当前页面解析。
// 假设当前页面是 http://example.com/path/to/page/index.html // 绝对路径是普通路径: require.resolve('http://cdn.com/js/a'); // => http://cdn.com/js/a.js // 根路径是普通路径: require.resolve('/js/b'); // => http://example.com/js/b.js // use 中的相对路径始终是普通路径: seajs.use('./c'); // => 加载的是 http://example.com/path/to/page/c.js seajs.use('../d'); // => 加载的是 http://example.com/path/to/d.js
Tips:
顶级标识始终相对 base 基础路径解析。
如果不设置,base 路径默认就是 sea.js 库文件所属的路径 可以通过 seajs.config({ base: '基础路径' }) 来配置基础路径 绝对路径和根路径始终相对当前页面解析。 相对标识永远相对于当前文件 seajs.use 中的相对路径始终相对当前页面来解析。
-
module
module 是一个对象,上面存储了与当前模块相关联的一些属性和方法。
module.id 模块的唯一标识,可以通过 define 方法的第一个参数来指定,默认为该模块文件的绝对路径 module.uri 模块的绝对路径 module.dependencies dependencies 是一个数组,表示当前模块的依赖 module.exports 当前模块对外提供的接口对象 相当于每个模块内部最终都执行了这么一句话:return module.exports
模块与模块之间的通信接口
-
exports
exports 仅仅是 module.exports 的一个引用。 也就是说修改了 exports 就相当于修改了 module.exports。
但是一旦在 factory 内部给 exports 重新赋值,并不会改变 module.exports 的值。 因此给 exports 赋值是无效的。
exports 和 module.exports 的区别:
每个模块内部对外到处的接口对象始终都是 module.exports 可以通过修改 module.exports 或给它赋值改变模块接口对象 exports 是 module.exports 的一个引用,就好比在每一个模块定义最开始的地方写了这么一句代码:var exports = module.exports 关于这俩哥们儿的区别请分析一下代码: var module = { exports: {} } function changeExports (exports, module) { // var exports = module.exports exports.foo = 'bar' // 这里赋值拿不到,不要使用使用 // exports = function () {} return module.exports } changeExports(module.exports, module)
那为啥要有 exports ?
为了开发体验,API更友好,使用 exports 的时候,可以少写一个点儿。
如果你实在分不清楚 exports 和 module.exports 之间的区别,就只记得 module.exports 就可以了。
4. 如何将一个普通的模块文件改造为兼容 CMD 规范的模块
if (typeof define === "function" && define.cmd) {
// 有 Sea.js 等 CMD 模块加载器存在
define(function (require, exports, module) {
// 使用 module.exports 向外暴露接口对象
})
}
js模块化的两种规范amd和cmd
AMD规范在这里:https://github.com/amdjs/amdjs-api/wiki/AMDCMD规范在这里:https://github.com/seajs/seajs/issues/242AMD是RequireJS在推广过程中对模块定义的规范化产出。CMD是SeaJS在推广过程中对模块定义的规范化产出。区别:1.对于依赖的模块,AMD... 查看详情
cmd规范学习笔记——基于seajs实现
CMD(CommonModuleDefinition):该规范明确了模块的书写格式和基本交互规则。通常一个模块就是一个JS文件。通过define关键字来定义模块,最基本的格式为:define(factory);//这里的define是一个全局函数,factory可以是函数或者合法的值。一... 查看详情
cmd和seajs
...个浏览器的实现SeaJS,SeaJS和requireJS一样,都是javascript的模块化解决方案。本文将详细介绍CMD和seaJS CMD 在Sea.js中,所有JavaScript模块都遵循CMD(CommonM 查看详情
cmd和seajs
...个浏览器的实现SeaJS,SeaJS和requireJS一样,都是javascript的模块化解决方案。本文将详细介绍CMD和seaJS CMD 在Sea.js中,所有JavaScript模块都遵循CMD(CommonM 查看详情
javascript模块化编程之require.js与sea.js
个人倾向于require.jsAMD是RequireJS在推广过程中对模块定义的规范化产出。CMD是SeaJS在推广过程中对模块定义的规范化产出。类似的还有CommonJSModules/2.0规范,是BravoJS在推广过程中对模块定义的规范化产出。还有不少??AMD即AsynchronousMo... 查看详情
js模块化
AMD规范在这里:https://github.com/amdjs/amdjs-api/wiki/AMDCMD规范在这里:https://github.com/seajs/seajs/issues/242AMD是RequireJS在推广过程中对模块定义的规范化产出。CMD是SeaJS在推广过程中对模块定义的规范化产出。类似的还有CommonJSModules/2.0规范... 查看详情
seajs使用说明(代码片段)
...aScript模块都遵循CMD(CommonModuleDefinition)模块定义规范。该规范明确了模块的基本书写格式和基本交互规则。在CMD规范中,一个模块就是一个文件。代码的书写格式如下 查看详情
模块化开发---seajs入门学习
SeaJS是一个基于CMD模块定义规范实现一个模块系统加载器 [CMD规范](https://github.com/cmdjs/specification/blob/master/draft/module.md)9、seaJs启动函数的回调函数官网:http://seajs.org/docs/github:https://github.com/seajs/seajs如何选择一个技术产品栈 查看详情
前端模块化:cmd规范
1概述CMD(CommonModuleDefinition)是国内大牛玉伯在开发SeaJS的时候提出来的,属于CommonJS的一种规范,根据浏览器的异步环境做了自己的实现。它和AMD很相似,尽量保持简单,并与CommonJS和Node.js的Modules规范保持了很大的兼容性... 查看详情
amd规范与cmd规范概要(代码片段)
...突和文件依赖,是前端开发过程中的两个经典问题。通过模块化开发来解决。AMD规范在这里:https://github.com/amdjs/amdjs-api/wiki/AMDCMD规范在这里:https://github.com/seajs/seajs/issues/242AMD是RequireJS在推广过程中对模块定义的规范化产出。CMD... 查看详情
模块(cmdamd)(代码片段)
...载(前置读取并加载))是RequireJS在推广过程中对模块定义的规范化产出。https://github.com/amdjs/amdjs-api/wiki/AMD CMD (cmd提前读取后加载)是SeaJS在推广过程中对模块定义的规范化产出。https://github.com/seaj 查看详情
amd和cmd的区别
AMD规范在这里:https://github.com/amdjs/amdjs-api/wiki/AMDCMD规范在这里:https://github.com/seajs/seajs/issues/242AMD是RequireJS在推广过程中对模块定义的规范化产出。CMD是SeaJS在推广过程中对模块定义的规范化产出。类似的还有CommonJSModules/2.0规范... 查看详情
js模块规范
...模块,但是在我们一贯的node模块中,我们采用的是CommonJS规范,使用require引入模块,使用module.exports导出接口。node的module遵循CommonJS规范,requirejs遵循AMD,seajs遵循CMD,虽各有不同,但总之还是希望保持较为统一的代码风格。ES6... 查看详情
es6特性之模块modules(代码片段)
...前已经出现了js模块加载的方案,最主要的是CommonJS和AMD规范。commonjs主要应用于服务器,实现同步加载,如nodejs。AMD规范应用于浏览器,如requirejs,为异步加载。同时还有CMD规范,为同步加载方案如seaJS。ES6在语言规格的层面上... 查看详情
模块化编程---cmd(代码片段)
CMD即CommonModuleDefinition通用模块定义,CMD规范是国内发展出来的,就像AMD有个requireJS,CMD有个浏览器的实现SeaJS,SeaJS要解决的问题和requireJS一样,只不过在模块定义方式和模块加载(可以说运行、解析)时机上有所... 查看详情
seajs是什么及sea.js由来,特点以及优势
...简单、自然的代码书写和组织方式,:Sea.js遵循CMD规范,模块化JS代码。依赖的自动加载、配置的简洁清晰,可以让程序员更多地专 查看详情
02.模块化相关规范(代码片段)
1.模块化概述传统开发模式的主要问题命名冲突:指的是多个js文件之间如果存在重名的变量,则会发生变量覆盖问题;文件依赖:指的是js文件之间无法实现相互的引用通过模块化解决上述问题模块化就是把单独的一个功能封装... 查看详情
cmd与amd
...范化产出。还有不少??这些规范的目的都是为了JavaScript的模块化开发,特别是在浏览器端的。目前这些规范的实现都能达成浏览器端模块化开发的目的。区别:1.对于依赖的模块,AMD是提前 查看详情