seaJS簡介和完整實例
阿新 • • 發佈：2017-10-23
化工 area 初始化 完成 har 自動 end href out
2、seajs.use([‘a‘,‘b‘],function(a,b){...}); //用來在頁面中加載一個或多個模塊。
3、define(function(require, exports, module){...}); //用來定義模塊。Sea.js 推崇一個模塊一個文件，遵循統一的寫法：
4、require(function(require){var a = require("xModule"); ... }); //require 用來獲取指定模塊的接口。
5、require.async, //用來在模塊內部異步加載一個或多個模塊。 例如：
什麽是 seaJS ？
和requireJS相似的，seaJS 也是用JavaScript編寫的JS框架，主要功能是可以按不同的先後依賴關系對 JavaScript 等文件的進行加載工作，可簡單理解為JS文件的加載器，它非常適合在瀏覽器中使用，它可以確保所依賴的JS文件加載完成之後再加載當前的JS文件，這在大量使用JS文件的項目中可確保各個JS文件的先後加載順序，確保避免了以前因某些原因某個文件加載慢而導致其它加載快的文件需要依賴其某些功能而出現某函數或某變量找不到的問題，這點非常有用，也是 seaJS （遵守CMD） 的主要價值所在吧；但和 requireJS （遵守AMD規範）有所區別。
快速簡要知識點：
1、seajs.config({...}); //用來對 Sea.js 進行配置。2、seajs.use([‘a‘,‘b‘],function(a,b){...}); //用來在頁面中加載一個或多個模塊。
3、define(function(require, exports, module){...}); //用來定義模塊。Sea.js 推崇一個模塊一個文件，遵循統一的寫法：
4、require(function(require){var a = require("xModule"); ... }); //require 用來獲取指定模塊的接口。
5、require.async, //用來在模塊內部異步加載一個或多個模塊。 例如：
define(function(require){
require.async([‘aModule‘,‘bModule‘],function(a,b){ // 異步加載多個模塊，在加載完成時，執行回調
a.func();
b.func();
})
});
6、exports, //用來在模塊內部對外提供接口。 例如：
define(function(require, exports){
exports.varName01 = ‘varValue‘; // 對外提供 varName01 屬性
exports.funName01 = function(p1,p2){ //
7、module.exports, 與 exports 類似，用來在模塊內部對外提供接口。例如：
define(function(require, exports, module) {
module.exports = { // 對外提供接口
name: ‘a‘,
doSomething: function() {...};
};
});
以上 7 個接口是最常用的，要牢記於心。
好了，簡要介紹就到這。下面看一個實際例子：
這個例子的設計要求是 hellowMain.js 文件依賴 hellow.js, jQuery作為備用加載到項目中，只有等依賴文件加載完了，才進行業務的JS代碼初始化工作；
首先看例子文件目錄結構：
//file of folder structure
//-----------------------------------------------------
//seaJS對項目的目錄一般格式如下，如userExample01下的結構
userExample01
|-----sea-modules
| |--sea.js 等框架JS文件
|-----app
| |----*.html 頁面html文件
|-----static
| |---hellow
| |---*.js/*.css
//-----------------------------------------------------
1、HTML 文件 index.html 註意看 seaJS 加載方式之一，見 script 標簽，以及配置和調用方式；
<!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" />
</head>
<body>
<h4>seaJS 例子 example 01</h4>
<div id="div01" class="div01">
<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/sea.js"></script>
<script type="text/javascript">
// 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‘
,vars:{
‘locale‘:‘zh-cn‘ //本例未啟用,在模塊中可用格式{key},即{locale}表示變量
}
});
//加載入口模塊，加載完成後調用模塊的方法
seajs.use([‘jQuery1.11‘,‘../static/hellow/hellowMain.js‘],function($,hm){
hm.initEvent();
});
//seajs.use([‘jQuery1.11‘,‘../static/hellow/hellowMain.js‘]);
</script>
</body>
</html>
2、頁面樣式文件 hellow.css
@charset "utf-8";
*{font-family:"微軟雅黑","microsoft Yahei",verdana;}
pre{margin:0px;padding:2px 0px;font-size:13px;font-family:verdana;}
.div01{
border:1px solid red;
width:600px;
min-height:100px;
padding:10px;
box-sizing:border-box;
}
.span01{
border:1px solid blue;
display:inline-block;
}
.div02{
border:1px dotted #666;
min-height:60px;
font-size:20px;
margin:20px 0px 0px 0px;
}
.alignRight{
text-align:right;
font-size:30px;
animation:myplay01 2s linear 2s infinite normal;
}
@keyframes myplay01 {
0% {
background: white;
transform: rotate(0deg);
transform:translate(0,0);
}
100% {
background: #CCC;
transform: rotate(30deg);
transform:translate(0px,100px)
}
}
.text01{
line-height:20px;
font-size:13px;
font-family:verdana;
}
3、業務文件之一，hellow.js 註意語法看看模塊是怎麽寫的，推薦註意文件各個註釋說明和書寫格式，方便養成良好習慣和代碼規範
define(function(require, exports, module){
//1，define intenal variable area//變量定義區
var moduleName = "hellow module";
var version = "1.0.0";
//2，define intenal funciton area//函數定義區
var getObj = function(id){
return document.getElementById(id+"");
};
exports.alert = function(a){
alert(a);
};
exports.initEvent = function(){
var myObj = getObj(‘div01‘);
myObj.onmouseover = function(){
myObj.style = "border:3px solid blue;"
};
myObj.onmouseout = function(){
myObj.style = "border:1px solid red;"
};
var myObj2 = getObj(‘div02‘);
myObj2.onmouseover = function(){
myObj2.className = "div02 alignRight";
};
myObj2.onmouseout = function(){
myObj2.className = "div02";
};
};
//3，export this module API for outside other module
//暴露本模塊API給外部其它模塊使用
module.exports = exports;
//4，auto run initEvent function when module loaded finish
//啟用時在加載完將自動運行某方法
//exports.initEvent();
});
4、業務文件之一，主模塊 hellowMain.js 註意語法看看模塊是怎麽寫的，推薦註意文件各個註釋說明和書寫格式，方便養成良好習慣和代碼規範
// This is app main module JS file
define(function(require, exports, module){
//1,define intenal variable area//變量定義區
var moduleName = "hellow module";
var version = "1.0.0";
//2,load each dependency
var workjs = require("hellow");
//3,define intenal funciton area//函數定義區
exports.loadTip = function(refConId){
var tipMsg = "module is loaded finish.";
if(undefined === refConId || null === refConId || "" === refConId+""){
alert(tipMsg);
}else{
document.getElementById(refConId+"").innerHTML = tipMsg;
}
};
exports.initEvent = function(){
workjs.initEvent();
exports.loadTip();
};
//4,export this module API for outside other module
//暴露本模塊API給外部其它模塊使用
module.exports = exports;
//5,auto run initEvent function when module loaded finish
//啟用時在加載完將自動運行某方法
//exports.initEvent();
});
註意：對應的 seaJS 和 jquery 各個版本文件這裏沒有給出，到對應的網上或官網下載放到對應目錄，註意修改文件名對應即可，參見對應地方的註釋；
本例雖然簡單，但是基本包含了實際大部分 seaJS 知識點，註釋也非常清楚，同時註意文件的組織結構，seaJS的配置的定義，調用關系，模塊的寫法，模塊內部的寫法，依賴文件的加載和調用，以及模塊如何自動運行某個函數等等。
seaJS簡介和完整實例