1.Seajs簡介
 
Seajs，一個Web模塊加載框架，追求簡單、自然的代碼書寫和組織方式，：Sea.js 遵循 CMD 規(guī)范，模塊化JS代碼。依賴的自動加載、配置的簡潔清晰，可以讓程序員更多地專注編碼。
 
2.Seajs優(yōu)缺點
 
優(yōu)點：
1).提高可維護性。
2).模塊化編程。
3).動態(tài)加載，前端性能優(yōu)化
 
缺點：
1).學(xué)習(xí)文檔偏少且混亂，會更改團隊使用JS的編寫習(xí)慣，必須使用模塊化編程。
2).不太適合團隊目前的情況，多JS文件但少改動，動態(tài)加載優(yōu)勢和模塊化優(yōu)勢不明顯。
3). 需要配套使用SPM工具，JS的打包和管理工具。
 
2.什么是CMD 和AMD ？
 
異步模塊定義（AMD）是Asynchronous Module Definition的縮寫，是 RequireJS 在推廣過程中對模塊定義的規(guī)范化產(chǎn)出。
通用模塊定義（CMD）是Common Module Definition的縮寫，是SeaJS 在推廣過程中對模塊定義的規(guī)范化產(chǎn)出。
RequireJS 和 SeaJS 都是模塊化框架的代表，AMD和CMD，是他們各自定義模塊化的方式，大同小異，主要是代碼風(fēng)格和API不同。
 
3.Seajs如何使用？

一段代碼教新手一目了然，快速上手！
 
 代碼如下:<script src="../js/examples-master/sea-modules/seajs/seajs/2.1.1/sea.js"></script>

<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>

代碼如下:

//init.js
define(function(require,exports,module){
var $ = require('jquery');
return $;
});

Seajs就是如此簡單，快來深入學(xué)習(xí)吧！

由來：

在軟件開發(fā)過程中，模塊化編程思想已經(jīng)習(xí)以為常了，模塊化編程不僅僅給開發(fā)團隊帶來效率方面上的好處，還能夠讓開發(fā)的項目或者產(chǎn)品維護成本大大降低。
那么，在WEB開發(fā)過程中JS腳本語言已經(jīng)不可或缺了，通過JS腳本語言能夠帶來更加舒適的人機交互和用戶體驗。但是，JS腳本的使用過程中也會有出現(xiàn)引用依賴的混亂，那么JS腳本語言的模塊化思想勢必會得到大家廣泛的認可，在這樣的一個背景下，淘寶前端工程師玉伯帶來了SeaJS腳本語言，讓模塊化編程思想進入到JS腳本的世界里。

特點：

SeaJS是一個遵循CommonJS規(guī)范的JavaScript模塊加載框架，可以實現(xiàn)JavaScript的模塊化開發(fā)及加載機制。與jQuery等JavaScript框架不同，SeaJS不會擴展封裝語言特性，而只是實現(xiàn)JavaScript的模塊化及按模塊加載。SeaJS的主要目的是令JavaScript開發(fā)模塊化并可以輕松愉悅進行加載，將前端工程師從繁重的JavaScript文件及對象依賴處理中解放出來，可以專注于代碼本身的邏輯。SeaJS可以與jQuery這類框架完美集成。使用SeaJS可以提高JavaScript代碼的可讀性和清晰度，解決目前JavaScript編程中普遍存在的依賴關(guān)系混亂和代碼糾纏等問題，方便代碼的編寫和維護。
SeaJS本身遵循KISS（Keep It Simple, Stupid）理念進行開發(fā)，其本身僅有個位數(shù)的API，因此學(xué)習(xí)起來毫無壓力。在學(xué)習(xí)SeaJS的過程中，處處能感受到KISS原則的精髓——僅做一件事，做好一件事。

優(yōu)勢：從一個例子中來看SeaJS優(yōu)勢，

傳統(tǒng)模式：

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之后：

//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文件并且僅僅調(diào)用init即可，具體init后面實現(xiàn)的邏輯對用戶是透明的。

通過這篇博客能夠?qū)eaJS腳本語言有所了解，后面文章介紹利用SeaJS編寫模塊。

最新評論