頁面上很多靜態檔案，使瀏覽器等待檔案下載，導致頁面短暫性的的當機，畫面整個卡住，滑鼠連點擊的動作都無法執行，因此許多人會使用動態方式加載靜態檔案，諸如javascript, css, img...等。
針對Javascript, CSS檔案，特別介紹這套SeaJS，有別于之前介紹的NodeJS，兩者都屬於遵從commonJS規範編寫而成，但是SeaJS主要針對前端Javascript , CSS下載時，使用nonblocking的方式，同時可以使用callback來執行接下來要處理的事情。
通常一般頁面處理，讀取靜態檔案方式如下：
<script src="/js/jquery.min.js"></script>
<script src="/js/jquery.easing-1.3.pack.js"></script>
<script src="/js/jquery.mousewheel-3.0.4.pack.js"></script>
<script src="/js/jquery.fancybox-1.3.4.js"></script>
<link rel="stylesheet" href="/js/jquery.fancybox-1.3.4.css"/>
我們看一下官方給予的基本範例，使用SeaJS改寫方式如下。
<script src="http://seajs.com/build/sea.js" data-main="./hello"></script>
主要程式寫在hello.js，內容如下。
define(function(require, exports) {
exports.sayHello = function() {
document.getElementById('out').innerHTML = 'Hello, SeaJS!';
};
});
基本範例連結
如此，就可以產出nonblocking架構，因此頁面可以更快區分出模組化，分區加載所需要的javascript, css檔案，同時利用callback綁定事件，或者執行程序。如果熟悉NodeJS的朋友，可以根據commonJS的規範，開發額外的第三方元件（3rd party library），開發方式幾乎和NodeJS module無異。
官方網站
範例說明（簡單範例）
API說明（使用文檔）
相關文章（相關文章）
Github SeaJS project
SeaJS，是一套簡易使用的加載套件，優點在於nonblocking之後，加快使用者瀏覽頁面感覺，因分模組加載靜態檔案，可以節省時間及頻寬，不需要的檔案可以在第二時間之後進行載入。這邊單純用文字說明，可能還不是很清楚，作者對於此部份有寫一篇文章大家可以參考看看，計算機模組化開發。
結語
SeaJS在目前使用經驗上，可以搭配任何套件，達到有效利用『模組化』的效果，使Javascript Code不會互相污染，盡量使用Object的方式開發，使團隊合作上效果更加顯著。
在使用者感受上，速度也會明顯提昇，同時對於Sever不會產生一次性龐大的reqeust，可以經由不斷地調整，分批下載所需的資料，以節省頻寬。
感謝各位收看！
留言
張貼留言