模块化开发seajs 配置和简单调用
模块化开发工具 seajs
seajs 提供了简单、极致的模块化开发体验 seajs官网 ：http://seajs.org
下面是seajs的小实例
b.js文件调用 a.js文件中的属性方法
seajs 配置文件
seajs.config({
alias: {
"a":"./js/a",
"b":"./js/b",//seajs.use 方法用
"a1":"./a"//b文件内部用
},
// 文件编码
charset: 'utf-8'
});
a.js文件
define(function(require,exports,module){ //seajs 模块化开发定义
var our = "我们"
exports.our=our;
exports.showA=function(){
alert("我是A");
}
});
b.js文件
define(function(require,exports,module){
var love = "要好好的";
var a = require("a1");//此处用a不起作用 地址相对于当前文档
exports.ol=a.our+love; //a的属性
exports.showB=function(){
alert("我是B");
}
exports.showBA=function(){ //通过b调用a的方法
a.showA();
}
});
html的代码 和 seajs的应用
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 1.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<!--引入seajs文件-->
<script type="text/javascript" src="sea/sea.js" id="sea"></script>
<script type="text/javascript" src="js/config.js"></script>
<script type="text/javascript" src="jquery/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
//$(function(){
seajs.use('b',function(b){
$("div").text(b.ol);
});
// });
//同时引用多个js文件
seajs.use(['a','b'],function(a,b){
a.showA();
b.showB();
b.showBA();
})
</script>
</head>
<body>
<div style="background:#98bf21;height:100px;width:200px;position:absolute;"></div>
</body>
</html>
sea_demo的目录结构
附件下载
