1.Seajs簡(jiǎn)介
 
Seajs，一個(gè)Web模塊加載框架，追求簡(jiǎn)單、自然的代碼書寫和組織方式，：Sea.js 遵循 CMD 規(guī)范，模塊化JS代碼。依賴的自動(dòng)加載、配置的簡(jiǎn)潔清晰，可以讓程序員更多地專注編碼。
 
2.Seajs優(yōu)缺點(diǎn)
 
優(yōu)點(diǎn)：
1).提高可維護(hù)性。
2).模塊化編程。
3).動(dòng)態(tài)加載，前端性能優(yōu)化
 
缺點(diǎn)：
1).學(xué)習(xí)文檔偏少且混亂，會(huì)更改團(tuán)隊(duì)使用JS的編寫習(xí)慣，必須使用模塊化編程。
2).不太適合團(tuán)隊(duì)目前的情況，多JS文件但少改動(dòng)，動(dòng)態(tài)加載優(yōu)勢(shì)和模塊化優(yōu)勢(shì)不明顯。
3). 需要配套使用SPM工具，JS的打包和管理工具。
 
2.什么是CMD 和AMD ？
 
異步模塊定義（AMD）是Asynchronous Module Definition的縮寫，是 RequireJS 在推廣過程中對(duì)模塊定義的規(guī)范化產(chǎn)出。
通用模塊定義（CMD）是Common Module Definition的縮寫，是SeaJS 在推廣過程中對(duì)模塊定義的規(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就是如此簡(jiǎn)單，快來深入學(xué)習(xí)吧！

由來：

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

特點(diǎn)：

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

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

傳統(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>

通過兩個(gè)簡(jiǎn)單的實(shí)例能夠看出使用SeaJS之后代碼的模塊化非常清晰，并且在HTML頁(yè)面中僅僅引用一個(gè)./sea.js文件并且僅僅調(diào)用init即可，具體init后面實(shí)現(xiàn)的邏輯對(duì)用戶是透明的。

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

最新評(píng)論