js子產品化開發----sea.js

提供簡單、極緻的子產品化開發體驗-seajs

SeaJS是一個遵循CommonJS規範的JavaScript子產品加載架構，可以實作JavaScript的子產品化開發及加載機制。與jQuery等JavaScript架構不同，SeaJS不會擴充封裝語言特性，而隻是實作JavaScript的子產品化及按子產品加載。SeaJS的主要目的是令JavaScript開發子產品化并可以輕松愉悅進行加載，将前端工程師從繁重的JavaScript檔案及對象依賴進行中解放出來，可以專注于代碼本身的邏輯。SeaJS可以與jQuery這類架構完美內建。使用SeaJS可以提高JavaScript代碼的可讀性和清晰度，解決目前JavaScript程式設計中普遍存在的依賴關系混亂和代碼糾纏等問題，友善代碼的編寫和維護。SeaJS的作者是前淘寶UED,現支付寶前端工程師玉伯。SeaJS本身遵循KISS（Keep It Simple, Stupid）理念進行開發，其本身僅有個位數的API，是以學習起來毫無壓力。在學習SeaJS的過程中，處處能感受到KISS原則的精髓——僅做一件事，做好一件事。

為什麼使用 SeaJS

SeaJS 追求簡單、自然的代碼書寫群組織方式，具有以下核心特性：

• 簡單友好的子產品定義規範：SeaJS 遵循AMD規範，可以像Node.js一般書寫子產品代碼。
• 自然直覺的代碼組織方式：依賴的自動加載、配置的簡潔清晰，可以讓我們更多地享受編碼的樂趣。SeaJS 還提供常用插件，非常有助于開發調試和性能優化，并具有豐富的可擴充接口。

  相容性

  SeaJS 具備完善的測試用例，相容所有主流浏覽器：Chrome 3+ ?

  　　Firefox 2+ ?

  　　Safari 3.2+ ?

  　　Opera 10+ ?

  　　IE 5.5+ ?SeaJS 可運作在 Mobile 端，包括 Hybrid 模式的 App 上。理論上，SeaJS 可以運作在任何浏覽器引擎上。

  下載下傳

  官網位址：http://seajs.org/docs/

  使用

  使用 SeaJS，可以規範子產品的書寫格式、能自動處理子產品的依賴，還非常有助于代碼組織、開發調試和性能優化。SeaJS 期待能給你提供簡單、極緻的子產品化開發體驗。SeaJS 遵循MIT 協定，無論個人還是公司，都可以免費自由使用。

接下來上我參考妙趣課堂寫的seajs代碼示例： 首先是html檔案中，先引入sea.js檔案，在使用seajs.use來使用你封裝好的js子產品（本例中是main.js），seajs.config是用來一些簡單的配置，具體的可參考官網文檔。

<script src="../sea-modules/seajs/seajs/2.2.0/sea.js"></script>
<script>

  // Set configuration
  seajs.config({
    base: "../sea-modules/",
    alias: {
      "jquery": "jquery/jquery/1.10.1/jquery.js"
    }
  });

    seajs.use("examples/first/1.0.0/main",function(ex){
      ex.alerts();//ex中存的有main.js中的公開對象
 }); //彈出“這是要alert出來的值”);
</script>
           

下面是main.js代碼

define(function(require, exports, module) {
 	var var1 = "這是要alert出來的值"; //私有變量，沒有通過接口返出去的其他子產品不能通路
 	var var2 = require('./drag.js').a; //這裡就是main.js子產品調用drag.js的方式：var2的值等于目前子產品所依賴的drag.js對外接口中屬性a的值

 	function alerts() {
 		alert(var2);
 	}
 	exports.alerts = alerts; //将需要公開的方法存入exports接口中
 });
           

下面是drag.js代碼

define({"a":"這裡是屬性a的值"});
           

最後打開html檔案，會彈出“這裡是屬性a的值”