前端模块化
前端模块规范有三种：CommonJs,AMD和CMD
首先了解下模块定义：
模块就是实现特定功能的文件，把几个函数放在一个文件里就构成了一个模块。
模块写成一个对象，模块成员都封装在对象里，通过调用对象属性，访问使用模块成员。但同时也暴露了模块成员，外部可以修改模块内部状态。外部无法访问内部私有变量。
CommonJs是服务器端，而AMD和CMD则是浏览器环境
异同点：
AMD ： RequireJS 在推广过程中对模块定义的规范化产出，提前执行（异步加载：依赖先执行）+延迟执行
CMD ： SeaJS 在推广过程中对模块定义的规范化产出，延迟执行（运行到需加载，根据顺序执行）
最近主要学seajs，所以了解了下，做下笔记：
CMD（翻译Common Module Definition通用模块定义）有个浏览器的实现SeaJS，SeaJS要解决的问题和requireJS一样
在 CMD 规范中，一个模块就是一个文件。代码的书写格式如下
define(function(require, exports, module) {
//require是可以把其他模块导入进来的一个参数;
//exports是可以把模块内的一些属性和方法导出的;
//module 是一个对象，上面存储了与当前模块相关联的一些属性和方法
});先写个简单例子：
// 定义模块
myModule.js define(function(require, exports, module) {
var $ = require('jquery.js')
$('div').addClass('active');
exports.data = 1;
});
// 加载模块
seajs.use(['myModule.js'], function(my){
var star= my.data;
console.log(star);
});接下来是sea.js的使用：
1 .引入sea.js的库
2. 定义模块
- define
3.调用模块
-exports
-sea.js.use
4.依赖模块
-require
以下是我最近做的一个例子：前提引入所需文件--sea.js,jquery.js，这些官方文档可以下载
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script src="sea-modules/seajs/seajs/2.2.0/sea.js"></script>
<link rel="stylesheet" href="./hello.css">
<script>
seajs.config({
//设置路径
// paths: {
// '1.01.1': './sea-modules/jquery/jquery/1.10.1/'
// },
// 设置别名，方便调用
alias: {
'jquery': './sea-modules/jquery/jquery/1.10.1/jquery'
}
});
seajs.use(['./head'], function (header) {
new header()
});
</script>
</head>
<body>
</body>
</html>这里的path是设置路径，方便跨目录调用。可以省略掉，和alias写到一起。
接下来是head模块
define(function(require, exports, module) {
// 别名配置，配置之后可在模块中使用require调用 require('jquery');
// alias
var $ = require('jquery')
function header(){
this.render()
}
header.prototype.render = function(){
$('<h1 style="display:none;">Hello SeaJS !</h1>' +
'<div class="show"></div>')
.appendTo('body').fadeIn(0)
}
return header
});
当然也可以加载多个模块：
用来在页面中加载一个或多个模块。
seajs.use(id, callback?)
// 加载一个模块
seajs.use('./a');
// 加载一个模块，在加载完成时，执行回调
seajs.use('./a', function(a) {
a.doSomething();
});
// 加载多个模块，在加载完成时，执行回调
seajs.use(['./a', './b'], function(a, b) {
a.doSomething();
b.doSomething();
}); 相关推荐
binglingnew 2020-02-09
人生百态 2020-02-02
binglingnew 2012-10-03
binglingnew 2019-12-03
earthhour 2019-06-30
拾光璇旅 2020-09-17
CristianoJason 2020-06-28
kuankeTech 2020-06-28
FEvivi 2020-06-16
isHooky 2020-05-15
breakpoints 2020-05-15
云之高水之远 2020-03-26
HeliumLau 2020-02-15
zhufu 2020-02-10
First00 2020-02-02
AndroidJava 2013-05-31
FEvivi 2019-12-22
bowean 2019-12-01