Seajs是什么及sea.js 由來，特點以及優勢
1.Seajs簡介
Seajs，一個Web模塊加載框架，追求簡單、自然的代碼書寫和組織方式，：Sea.js 遵循 CMD 規范，模塊化JS代碼。依賴的自動加載、配置的簡潔清晰，可以讓程序員更多地專注編碼。
2.Seajs優缺點
優點：
1).提高可維護性。
2).模塊化編程。
3).動態加載，前端性能優化
缺點：
1).學習文檔偏少且混亂，會更改團隊使用JS的編寫習慣，必須使用模塊化編程。
2).不太適合團隊目前的情況，多JS文件但少改動，動態加載優勢和模塊化優勢不明顯。
3). 需要配套使用SPM工具，JS的打包和管理工具。
2.什么是CMD 和AMD ？
異步模塊定義（AMD）是Asynchronous Module Definition的縮寫，是 RequireJS 在推廣過程中對模塊定義的規范化產出。
通用模塊定義（CMD）是Common Module Definition的縮寫，是SeaJS 在推廣過程中對模塊定義的規范化產出。
RequireJS 和 SeaJS 都是模塊化框架的代表，AMD和CMD，是他們各自定義模塊化的方式，大同小異，主要是代碼風格和API不同。
3.Seajs如何使用？
一段代碼教新手一目了然，快速上手！
代碼如下:<script src="../js/examples-master/sea-modules/seajs/seajs/2.1.1/sea.js"></script>
|
1
2
3
4
5
6
7
8
9
10
11
12
|
<script>
//配置js路徑
seajs.config({
alias:{
"jquery"
:
"../examples-master/sea-modules/jquery/jquery/1.10.1/jquery.js"
}
});
//加載模塊
seajs.use(
'../js/seajs/init'
,
function
($){
$(
"#test_div"
).click(
function
(){alert(1);});
});
</script>
|
代碼如下:
|
1
2
3
4
5
|
//init.js
define(
function
(require,exports,module){
var
$ = require(
'jquery'
);
return
$;
});
|
Seajs就是如此簡單，快來深入學習吧！
由來：
在軟件開發過程中，模塊化編程思想已經習以為常了，模塊化編程不僅僅給開發團隊帶來效率方面上的好處，還能夠讓開發的項目或者產品維護成本大大降低。
那么，在WEB開發過程中JS腳本語言已經不可或缺了，通過JS腳本語言能夠帶來更加舒適的人機交互和用戶體驗。但是，JS腳本的使用過程中也會有出現引用依賴的混亂，那么JS腳本語言的模塊化思想勢必會得到大家廣泛的認可，在這樣的一個背景下，淘寶前端工程師玉伯帶來了SeaJS腳本語言，讓模塊化編程思想進入到JS腳本的世界里。
特點：
SeaJS是一個遵循CommonJS規范的JavaScript模塊加載框架，可以實現JavaScript的模塊化開發及加載機制。與jQuery等JavaScript框架不同，SeaJS不會擴展封裝語言特性，而只是實現JavaScript的模塊化及按模塊加載。SeaJS的主要目的是令JavaScript開發模塊化並可以輕松愉悅進行加載，將前端工程師從繁重的JavaScript文件及對象依賴處理中解放出來，可以專注於代碼本身的邏輯。SeaJS可以與jQuery這類框架完美集成。使用SeaJS可以提高JavaScript代碼的可讀性和清晰度，解決目前JavaScript編程中普遍存在的依賴關系混亂和代碼糾纏等問題，方便代碼的編寫和維護。
SeaJS本身遵循KISS（Keep It Simple, Stupid）理念進行開發，其本身僅有個位數的API，因此學習起來毫無壓力。在學習SeaJS的過程中，處處能感受到KISS原則的精髓——僅做一件事，做好一件事。
優勢：從一個例子中來看SeaJS優勢，
傳統模式：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
var
M1={
run:
function
(){
alert(
'M1'
);
M2.run();
}
}
var
M2={
run:
function
(){
alert(
'M2'
);
}
}
<script src=
"./M2.js"
></script>
<script src=
"./M1.js"
></script>
|
使用SeaJS之后：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
|
//init.js
define(
function
(require, exports, module) = {
var
m1=require(
'M1'
);
exports.init=
function
(){
m1.run();
}
});
//M1.js
define(
function
(require,exports,module)={
var
m2=require(
'M2'
);
exports.run=
function
(){
alert(
'M1'
);
m2.run();
}
});
define(
function
(require,exports,module)={
exports.run=
function
(){
alert(
'M2'
);
}
});
<script src=
"./sea.js"
></script>
<script>
seajs.use(
'./init'
,
function
(init) {
init.init();
});
</script>
|
通過兩個簡單的實例能夠看出使用SeaJS之后代碼的模塊化非常清晰，並且在HTML頁面中僅僅引用一個./sea.js文件並且僅僅調用init即可，具體init后面實現的邏輯對用戶是透明的。
轉載：http://www.jb51.net/article/94666.htm