Seajs是什麼及sea.js 由來，特色以及優點

Seajs是什麼及sea.js 由來，特色以及優點

這篇文章主要介紹了Seajs的相關知識和和學習心得,適合剛接觸SeaJS的同窗,須要的朋友能夠參考下，有更好的新手教程或文檔，歡迎推薦、分享

 

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