您的位置：首页 > Web前端 > JavaScript

SeaJS模块化基础

2015-10-17 13:45 639 查看

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
测试SEA.JS
<input type="button" value="按钮" id="btn" />
<script src="js/sea.js"></script>
<script>
seajs.config({
base : './js/',		//基础路径
alias : {
'jquery' : 'jquery-2.0.3.min.js'	//别名配置（注意路径是建立在基础路径base之上的）
}
})
//加载一个模块，加载完毕执行回调，回调函数的参数可以理解为js模块文件中的对外接口exports
//也可以加载多个模块seajs.use(['main1.js','main2.js'],function(a,b){...})
seajs.use('main.js',function(obj){
obj.a();
obj.b();
alert(obj.name);
})
</script>
</body>
</html>

//main.js文件
define(function(require,exports,module){
//引入配置文件中的jquery
require('jquery');
//引入common.js文件（common模块）
var common = require('common.js');
exports.a = function(){
alert("我是a方法");
}
exports.b = function(){
//执行common模块中的方法
common.init();
}
$('#btn').on('click',function(){
alert("因为加载了jquery模块，所以可以执行");
})
//对外属性，也可以通过return语句直接返回接口，甚至简化为define({name:"Jack",age:"19"})
module.exports = {
name : "Jack",
age : "19"
}
})

//common.js文件
define(function(require,exports,module){
exports.init = function(){
alert("我是common模块中的方法");
}
})

文档结构：
index.html

js -- jquery.2.0.3.min.js

--main.js

--common.js

AMD（异步模块定义）和CMD（通用模块定义）的区别：

1、对于依赖的模块，AMD是提前执行，CMD是延迟执行

2、CMD推崇依赖就近，AMD推崇依赖前置

3、AMD是RequireJS在推广过程中对模块定义的规范化产出，CMD是SeaJS在推广过程中对模块定义的规范化产出

更多关于AMD和CMD的规范介绍

http://blog.chinaunix.net/uid-26672038-id-4112229.html

SeaJS官方文档

http://seajs.org/docs/#docs

API

https://github.com/seajs/seajs/issues/266

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航