JS模块化规范CMD之SeaJS
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 向外暴露接口对象
})
}
*:first-child {
margin-top: 0 !important;
}
body>*:last-child {
margin-bottom: 0 !important;
}
/* BLOCKS
=============================================================================*/
p, blockquote, ul, ol, dl, table, pre {
margin: 15px 0;
}
/* HEADERS
=============================================================================*/
h1, h2, h3, h4, h5, h6 {
padding: 0;
font-weight: bold;
-webkit-font-smoothing: antialiased;
}
h1 tt, h1 code, h2 tt, h2 code, h3 tt, h3 code, h4 tt, h4 code, h5 tt, h5 code, h6 tt, h6 code {
font-size: inherit;
}
body>h2:first-child, body>h1:first-child, body>h1:first-child+h2, body>h3:first-child, body>h4:first-child, body>h5:first-child, body>h6:first-child {
margin-top: 0;
padding-top: 0;
}
a:first-child h1, a:first-child h2, a:first-child h3, a:first-child h4, a:first-child h5, a:first-child h6 {
margin-top: 0;
padding-top: 0;
}
h1+p, h2+p, h3+p, h4+p, h5+p, h6+p {
margin-top: 10px;
}
/* LINKS
=============================================================================*/
a {
color: #4183C4;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
/* LISTS
=============================================================================*/
ul, ol {
padding-left: 30px;
}
ul li > :first-child,
ol li > :first-child,
ul li ul:first-of-type,
ol li ol:first-of-type,
ul li ol:first-of-type,
ol li ul:first-of-type {
margin-top: 0px;
}
ul ul, ul ol, ol ol, ol ul {
margin-bottom: 0;
}
dl {
padding: 0;
}
dl dt {
font-size: 14px;
font-weight: bold;
font-style: italic;
padding: 0;
margin: 15px 0 5px;
}
dl dt:first-child {
padding: 0;
}
dl dt>:first-child {
margin-top: 0px;
}
dl dt>:last-child {
margin-bottom: 0px;
}
dl dd {
margin: 0 0 15px;
padding: 0 15px;
}
dl dd>:first-child {
margin-top: 0px;
}
dl dd>:last-child {
margin-bottom: 0px;
}
/* CODE
=============================================================================*/
pre, code, tt {
font-size: 12px;
font-family: Consolas, "Liberation Mono", Courier, monospace;
}
code, tt {
margin: 0 0px;
padding: 0px 0px;
white-space: nowrap;
border: 1px solid #eaeaea;
background-color: #f8f8f8;
border-radius: 3px;
}
pre>code {
margin: 0;
padding: 0;
white-space: pre;
border: none;
background: transparent;
}
pre {
background-color: #f8f8f8;
border: 1px solid #ccc;
font-size: 13px;
line-height: 19px;
overflow: auto;
padding: 6px 10px;
border-radius: 3px;
}
pre code, pre tt {
background-color: transparent;
border: none;
}
kbd {
-moz-border-bottom-colors: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
background-color: #DDDDDD;
background-image: linear-gradient(#F1F1F1, #DDDDDD);
background-repeat: repeat-x;
border-color: #DDDDDD #CCCCCC #CCCCCC #DDDDDD;
border-image: none;
border-radius: 2px 2px 2px 2px;
border-style: solid;
border-width: 1px;
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
line-height: 10px;
padding: 1px 4px;
}
/* QUOTES
=============================================================================*/
blockquote {
border-left: 4px solid #DDD;
padding: 0 15px;
color: #777;
}
blockquote>:first-child {
margin-top: 0px;
}
blockquote>:last-child {
margin-bottom: 0px;
}
/* HORIZONTAL RULES
=============================================================================*/
hr {
clear: both;
margin: 15px 0;
height: 0px;
overflow: hidden;
border: none;
background: transparent;
border-bottom: 4px solid #ddd;
padding: 0;
}
.postBody a:link, .postBody a:visited, .postBody a:active ,.postBody a,.postBody a:hover,{
text-decoration: none;
}
a:hover{
cursor: pointer;
}
/* IMAGES
=============================================================================*/
img {
max-width: 100%
}
-->
JS模块化规范CMD之SeaJS的更多相关文章
- js模块化规范—CMD规范
CMD规范说明 专门用于浏览器端, 模块的加载是异步的 ,模块使用时才会加载执行,github地址 CMD基本语法 定义暴露模块 //定义有依赖的模块 define(function(require, ...
- JS模块化开发:使用SeaJs高效构建页面
一.扯淡部分 很久很久以前,也就是刚开始接触前端的那会儿,脑袋里压根没有什么架构.重构.性能这些概念,天真地以为前端===好看的页面,甚至把js都划分到除了用来写一些美美的特效别无它用的阴暗角落里,就 ...
- JS 模块化 - 02 Common JS 模块化规范
1 Common JS 介绍 Common JS 是模块化规范之一.每个文件都是一个作用域,文件里面定义的变量/函数都是私有的,对其他模块不可见.Common JS 规范在 Node 端和浏览器端有不 ...
- JS模块化规范CommonJS,AMD,CMD
模块化是软件系统的属性,这个系统被分解为一组高内聚,低耦合的模块.理想状态下我们只需要完成自己部分的核心业务逻辑代码,其他方面的依赖可以通过直接加载被人已经写好模块进行使用即可.一个模块化系统所必须的 ...
- js模块化规范AMD、CMD、CommonJS...
1. AMD 1.1 什么是AMD? AMD 英文名 Asynchronous Module Definition ,中文名 异步模块定义 .这是一个浏览器模块化开发的规范. 由于浏览器环境执行环境的 ...
- js模块化AMD/CMD
JavaSript模块化 在了解AMD,CMD规范前,还是需要先来简单地了解下什么是模块化,模块化开发? 模块化是指在解决某一个复杂问题或者一系列的杂糅问题时,依照一种分类的思维把问题进行系统 ...
- 2.精通前端系列技术之JS模块化开发-深入学习seaJs(四)
深入学习seajs 配置信息 alias : 别名配置 paths : 路径配置 vars : 变量配置 map : 映射配置 preload : 预加载项 debug : 调试模式 base : 基 ...
- JS 模块化- 04 CMD 规范与 Sea JS
1 CMD 规范介绍 CMD: Common Module Definition, 通用模块定义.与 AMD 规范类似,也是用于浏览器端,异步加载模块,一个文件就是一个模块,当模块使用时才会加载执行. ...
- js模块化规范—概念和模块化进化史以及模块化的问题
模块的概念 一个复杂的项目开发中,会写很多js文件,一个js文件执行某些特定的功能,那么每个js都可以称为一个模块,这就是模块的概念 每个js模块内部数据/实现是私有的, 只是向外部暴露一些接口(方法 ...
随机推荐
- c++11变长参数函数模板
By francis_hao Mar 25,2018 一个最简单的实例大概是这个样子: #include <iostream>using namespace std; /*变长参 ...
- Codeforces Round #385 (Div. 2)A B C 模拟 水 并查集
A. Hongcow Learns the Cyclic Shift time limit per test 2 seconds memory limit per test 256 megabytes ...
- poj1486 Sorting Slides
Sorting Slides Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 4812 Accepted: 1882 De ...
- 线程同步API及它们的属性
头文件:<pthread.h> 编译记得加 -lpthread库 1:互斥锁(mutex) 1.1:互斥锁API 数据类型:pthread_mutex_t // 初始化一个互斥锁 int ...
- python学习(十)元类
python 可以通过`type`函数创建类,也可通过type判断数据类型 import socket from io import StringIO import sys class TypeCla ...
- C ------ static 关键字的作用
首先要理解生存周期与作用域的区别: 生存周期: 变量从定义到销毁的时间范围.存放在全局数据区的变量的生存周期存在于整个程序运行期间,而存放在栈中的数据则随着函数等的作用域结束导致出栈而销毁,除了静态变 ...
- linux 查看登录日志
原文:http://www.cnblogs.com/wangkangluo1/archive/2011/09/23/2185976.html linux查看日志: # cd /var/log # le ...
- 【BZOJ】1355 [Baltic2009]Radio Transmission
[算法]KMP [题解]KMP中n-next[n]得到最小循环节的性质. 考虑一个循环串(最后一个循环节可能残缺),它最长的[后缀=前缀]一定是以第二个循环节为起始位置的后缀. 正着考虑的话假设后缀T ...
- Gmail登录(2017.10)
本文地址:http://www.cnblogs.com/veinyin/p/7646382.html 由于众所周知的原因,我们使用 Gmail 查看邮件时会有些麻烦,有时梯子不够用甚至不能查看. 比 ...
- Hibernate总结之常用API
1. Configuration Configuration是用来读取配置文件,从配置文件中构件SessionFactory的. SessionFactory sessionFactory=new C ...