随着開發項目不斷膨脹，發現代碼依賴關系變得複雜，維護比較蛋疼，想起seajs有這方面之功效，果斷嘗鮮，用來解決兩個問題：1）命名沖突 2）檔案依賴關系
由于所在BG使用TAF服務，基于C++開發一套WSP web服務架構。下面所講的都是基于該架構下測試驗證。 分成三個階段：開發->改進->建構
第一階段：開發 模闆目錄結構：
--wsp --index.html --doc --js -- sea.js -- jquery_cmd.js -- main.js
第一步：引用的第三方類庫，用require包裝起來，我的項目使用的為jquery庫，包裝成jquery_cmd.js
define(function(require, exports, modules) {
// jquery 源碼
return jQuery;
});
第二步：編寫引入的js，命名為main.js
順帶使用一個AlloyTeam看到的console.log輸出點絢麗
seajs.config({
alias: {
"jquery": "/js/jquery_cmd.js" // 這個路勁寫對（本項目基于架構下面靜态目錄js下）
}
});
define(function(require, exports, module) {
// 引入jquery子產品
var $ = require('jquery');
if (typeof $('h2') !== "undefined") {
var oContent = {
logText: '%c這是一個%c神奇的%c網站%c',
cssStyle: ['color:#a48bf2;', 'color:#ff0000;', 'color:#a0c484;', 'padding:55px 135px;background:url(http://res.imtt.qq.com/actnew/css/head_logo.png) no-repeat center center;line-height:109px;']
};
console.log(oContent['logText'], oContent['cssStyle'][0], oContent['cssStyle'][1], oContent['cssStyle'][2], oContent['cssStyle'][3]);
} else {
console.log('not found');
}
});
第三步：html頁面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>seajs第一個應用</title>
</head>
<body>
<h2>hello world</h2>
<script src="/js/sea.js" id="seajsnode"></script>
<script type="text/javascript">
seajs.use("/js/main");
</script>
</body>
</html> 打開chrome調試器可以看到如下效果：
調試器切換到Network，可以看到延遲加載作用展現
第二階段：項目的進一步優化和改進
項目結構： --wsp --index.html --doc --js -- sea.js -- require.js -- jquery_cmd.js -- main.js -- echarts-map.js -- build -- echarts.js chart -- bar.js
1、如果需要引入jquery插件：
define(function(require) {
var $, jQuery;
$ = jQuery = require('jquery');
// 插件整個代碼
});
2、項目需要引入圖表，這塊需要根據API來實作（該項目使用百度echarts），從官方文檔中發現，echarts沒有直接支援seajs的CMD模式，改為引入一下requireJS支援AMD模式。
導入echarts-map.js和require.js
3、修改index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>requirejs引用echarts圖表</title>
</head>
<body>
<!-- 為Echarts準備一個具備大小（寬高）的Dom -->
<div id="main" style="height:500px;border:1px solid #ccc;padding:10px;"></div>
<script src="/js/require.js" id="requirejsnode"></script> <script type="text/javascript">
require.config({
paths: {
// 這個路徑寫對（該項目基于WSP架構下靜态目錄js下）
'echarts': './js/echarts-map',
'echarts/chart/bar': './js/echarts-map',
'echarts/chart/line': './js/echarts-map',
'echarts/chart/map': './js/echarts-map'
}
});
require([
'echarts',
'echarts/chart/bar',
'echarts/chart/line',
'echarts/chart/map'
], function(ec) {
var domMain = document.getElementById('main');
var myChart = ec.init(domMain);
myChart.setOption({
tooltip: {
trigger: 'axis'
},
legend: {
data: [ '蒸發量', '降水量' ]
},
toolbox: {
show: true,
feature: {
mark: { show: true },
dataView: { show: true, readOnly: false },
magicType: { show: true, type: [ 'line', 'bar' ] },
restore: { show: true },
saveAsImage: { show: true }
}
},
calculable: true,
xAxis: [
{
type: 'category',
data: [ '1月', '2月', '3月' ]
}
],
yAxis: [
{
type: 'value',
splitArea: { show: true }
}
],
series: [
{
name: '蒸發量',
type: 'bar',
data: [ 2.0, 4.9, 7.0 ]
},
{
name: '降水量',
type: 'bar',
data: [ 2.6, 5.9, 9.0 ]
}
]
});
});
</script>
</body>
</html> 最後頁面通路效果如圖：