SeaJS入門教學系列之SeaJS介紹（一）_Seajs

前言
SeaJS是遵循CommonJS規格的JavaScript模組載入框架，可以實作JavaScript的模組化開發與載入機制。與jQuery等JavaScript框架不同，SeaJS不會擴充封裝語言特性，而只是實作JavaScript的模組化及按模組載入。 SeaJS的主要目的是讓JavaScript開發模組化並且可以輕鬆愉悅進行加載，將前端工程師從繁重的JavaScript檔案及物件依賴處理中解放出來，可以專注於程式碼本身的邏輯。 SeaJS可以與jQuery這類框架完美整合。使用SeaJS可以提高JavaScript程式碼的可讀性和清晰度，解決目前JavaScript程式設計中普遍存在的依賴關係混亂和程式碼糾纏等問題，方便程式碼的編寫和維護。
SeaJS的作者是淘寶前端工程師玉伯。
SeaJS本身遵循KISS（Keep It Simple, Stupid）理念進行開發，本身僅有個位數的API，因此學習起來毫無壓力。在學習SeaJS的過程中，處處能感受到KISS原則的精髓－僅做一件事，做好一件事。
本文首先透過一個例子直觀對比傳統JavaScript編程和使用SeaJS的模組化JavaScript編程，然後詳細討論SeaJS的使用方法，最後給出一些與SeaJS相關的資料。

傳統模式 vs SeaJS模組化
假設我們現在正在開發一個Web應用TinyApp，我們決定在TinyApp中使用jQuery框架。 TinyApp的首頁會用到module1.js，module1.js依賴module2.js和module3.js，同時module3.js依賴module4.js。
傳統開發
使用傳統的開發方法，各個js文件代碼如下：

複製代碼 程式碼如下:

//module1.js
var module1 = {
    run: function() {
       run: function() {
       run: function() {
      module2.run(), module3.run()));
    }
}

//module2.js
var module2 = {
    js
var module2 = {
    js
        return ['module2'];
    }
}

//module3.js    }
}

//module4.js
var module4 = {
  
        return ['module4'];
    }

}

此時index.html需要引用module1.js及其所有下層依賴（注意順序）：

此時index.html需要引用module1.js及其所有下層相依性（注意順序）：

複製程式碼

程式碼如下:



   
   
   
   
   
   
   


   

p>
    <script><BR>        $('.content').html(module1.run());</script>