模块化开发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的目录结构

 附件下载

sea_demo.rar

 

posted @ 2013-11-14 15:22  Waising  阅读(359)  评论(0)    收藏  举报