<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>seaJS</title>
<link rel="stylesheet" href="../static/hellow/hellow.css" />
<style type="text/css">
</style>
</head>
<body>
<h4>seaJS 例子 example 01</h4>
<hr size="1">
<div class="text01">
1,<b>seajs.config</b>({...});
//用来对 Sea.js 进行配置。
<br>
2,<b>seajs.use</b>(['a','b'],function(a,b){...});
//用来在页面中加载一个或多个模块。
<br>
3,<b>define</b>(function(require, exports, module){...});
//用来定义模块。Sea.js 推崇一个模块一个文件,遵循统一的写法:
<br>
4,<b>require</b>(function(require){var a = require("xModule"); ... });
//require 用来获取指定模块的接口。
<br>
5,<b>require.async</b>, //用来在模块内部异步加载一个或多个模块。 例如:
<pre>
define(function(require){
require.async(['aModule','bModule'],function(a,b){ // 异步加载多个模块,在加载完成时,执行回调
a.func();
b.func();
})
});
</pre>
6,<b>exports</b>, //用来在模块内部对外提供接口。 例如:
<pre>
define(function(require, exports){
exports.varName01 = 'varValue'; // 对外提供 varName01 属性
exports.funName01 = function(p1,p2){ // 对外提供 funName01 方法
....
}
});
</pre>
7,<b>module.exports</b>, 与 exports 类似,用来在模块内部对外提供接口。例如:
<pre>
define(function(require, exports, module) {
module.exports = { // 对外提供接口
name: 'a',
doSomething: function() {...};
};
});
</pre>
<b>以上 7 个接口是最常用的,要牢记于心。</b>
</div>
<hr size="1">
<div id="div01" class="div01">
<pre>
//seaJS对项目的目录有点要求,如本例子userExample01下的结构为:
//-------------------------------------------------------------
userExample01
|-----sea-modules
| |--sea.js 等框架JS文件
|-----app
| |----*.html 页面html文件
|-----static
| |---hellow
| |---*.js/*.css
//-------------------------------------------------------------
</pre>
<span id="span01" class="span01">my TEXT 001 seaJS 例子,鼠标移动到上面看看边框变化...</span>
</div>
<br>
<div id="div02" class="div02">my TEXT 002 seaJS 例子,鼠标放到上面等下看</div>
<!--
<script type="text/javascript" src="../sea-modules/test01.js"></script>
-->
<script type="text/javascript" src="../sea-modules/sea.js"></script>
<script type="text/javascript">
/*
//file of folder structure
//-----------------------------------------------------
//seaJS对项目的目录一般格式如下,如userExample01下的结构
userExample01
|-----sea-modules
| |--sea.js 等框架JS文件
|-----app
| |----*.html 页面html文件
|-----static
| |---hellow
| |---*.js/*.css
//-----------------------------------------------------
*/
// seajs 的简单配置
seajs.config({
//all alias path base on this//所有别名基于本路径
base:"../sea-modules/"
//define each self path//定义paths,本例未启用
//,paths:{
// "jQueryPath":"jquery"
//}
//define each alias name here//定义别名
,alias:{ //auto add suffix .js
"jQuery1.9":"jquery/jquery-1.9.1.min"
,"jQuery1.11":"jquery/jquery-1.11.0.min"
,"hellow":"../hellow/hellow"
}
,preload:'jQuery1.11'
});
//加载入口模块
seajs.use(['jQuery1.11','../static/hellow/hellowMain.js'],function($,hm){
hm.initEvent();
});
//seajs.use(['jQuery1.11','../static/hellow/hellowMain.js']);
</script>
</body>
</html>