sea.js 學習

開篇：終於學習了sea.js的使用了，由於它是一個模塊加載工具，因此首先要了解javascript的模塊編程，而後對sea.js的瞭解和使用

javascript 模塊編程

爲何要模塊化編程，爲了讓開發人員只須要實現業務邏輯代碼，只要加載別人寫好的模塊化代碼便可。
'簡單的說，模塊化就是實現特定功能的一組方法'

javascript 自己並不支持模塊，可是卻能夠實現「模塊」的效果。
從原始寫法，將函數和變量寫在一塊兒的，便可稱爲模塊，可是這樣會污染全局變量。

對象寫法

var module = new Object({
    _count : 0,
    m1 : function(){
        // 
    },
    m2 : function(){
        //
    }
});

對象寫法的缺點是模塊的方法和變量可能會被重寫。

高級寫法

var module = (function(mod){
    mod.m1 = function(){

    }
    return mod;
})(jquery || {});

sea.js 是什麼？

sea.js 是一款web開發 模塊加載工具
由於sea.js 遵循CMD 模塊定義規範，因此有必要了解下

碎言：很早就看到過AMD 和CMD ，可是每次看到都不太明白，由於當時也沒有用到，因此就沒有認真的去看，估計當時去看，也看不明白，今天終於有機會，把它弄清楚了

AMD 和 CMD

CMD common module definitime 基本模塊定義，一個文件就是一個模塊
AMD asynchronous module definitime 異步模塊定義，它採用異步加載模塊方式，模塊的加載不影響後面語句的運行

你可能會問，他們之間有什麼區別呢？我暫時瞭解到的就是一CMD是同步的，AMD是異步的，語法不同。

主要用來解決什麼問題？

主要用來解決多模塊，命名衝突等問題，舉例來講，當一個項目很大時，團隊之間的合做可能存在命名衝突的問題，可能有些js文件須要優先加載，可是其餘成員不知道，這個時候就須要sea.js 了，簡單的從我我的理解來看，它就是一種規範。
能解決什麼問題，網上描述的太多了，可自行搜索

sea.js 怎麼用？
要了解一個東西的使用，首先要查看它的API 接口,sea.js API接口
在使用seajs 時，首先要加載seajs，爲了讓seajs 能更快獲取自身路徑，建議手動添加id屬性
下面列出我的常常在前端中使用的代碼，之前咱們多是以下加載的

<script type="text/javascript" src="js/lib/zepto-1.1.4.min.js"></script>
<script type="text/javascript" src="js/common.js"></script>
<script type="text/javascript" src="js/index.js"></script>

學習 sea.js 7個API

sea.js 配置 seajs.config

詳細的就不介紹了，這裏只介紹幾個經常使用的，

seajs.config({
    // sea.js 的基礎路徑
    "base" : "",
    // 路徑配置 ,若是目錄較深，或跨目錄時，使用paths配置
    "paths" : "",
    // 別名配置，方便調用
    "alias" : 
});

seajs.use 加載一個或多個模塊

// 加載多個模塊，在加載完成時，執行回調
seajs.use(['./a','./b'],function(a,b){
    a.dosomething();
    b.dosomething();
});

seajs 與 DOM 優先加載沒有關係，若是確保DOM ready，須要使用jquey 等類庫來實現

define 定義模塊，seajs 推崇一個模塊一個文件

define 是一個全局函數，用來定義模塊
define(factory) ,factory 能夠是字符串、json對象、函數
factory 爲對象、字符串時， 模塊的接口就是 對象或字符串
factory 爲函數時，表示模塊的構造方法，執行構造方法，能夠獲得函數向外提供的接口，factory 在執行，會默認傳入三個參數：require、exports、module

define(function(require,exports,module){
    // 模塊代碼
});

define(id?, deps?, factory)

define 也能夠接受兩個以上的參數，id 表示 模塊標識，deps 數組表示模塊依賴，例如

define("a",['./b.js'],function(require,exports,module){
    // 模塊代碼
});

前兩個參數可省略，能夠經過構建工具生成
下面來講下factory函數中的三個參數
require 是一個方法，用來接受模塊標識，用來獲取其餘模塊提供的接口，可使用相對路徑和絕對路徑
require.async(id, callback?) 用來在模塊內部異步加載模塊，加載完成後，執行指定回調
exports 是一個對象，用來提供模塊接口，還可使用return 直接向外提供接口
module 是一個對象，存儲了當前模塊相關聯的屬性和方法
module.uri String 模塊絕對路徑
module.dependencies Array 當前模塊的依賴
module.exports Object 當前模塊對外提供的接口

require 用來獲取指定模塊的接口

require 的參數必須字符串直接量
動態依賴，推薦使用 require,async,異步加載一個或多個模塊
require.async(['./a','./b'],function(a,b){
// 執行回調
})

在項目中使用

簡單的使用

首先加載sea.js ，而後加載 後面的兩個模塊，這樣寫能夠，可是就失去了，sea.js 的意義，和我以前引入沒有什麼區別,下面咱們使用 模塊化的寫法來加載

<script type="text/javascript" src="js/lib/sea-2.2.1.min.js" id="seajsnode"></script>
<script type="text/javascript">

seajs.config({
    "base" : "./js/",
    "alias" : {
        "zep" : "./js/lib/zepto-1.1.4.min.js"
    }
});

seajs.use(["common","index"]);
</script>

// jquery.js
define(function(require, exports, module){
    // jquery 代碼
module.exports = $.noConflict(true);
});

// common.js
define(function(require,exports,module){
    var $ = require("lib/jquery.js");
    exports.doit = function(){
        console.log($("body"));
    }
    
});

// index.js
define("index",["common"],function(require,exports,module){
    var common = require("common");
    console.log($);
    common.doit();

});

總結

之後每個文件都是一個模塊，每個文件都要遵循CMD規範去編寫，就連咱們的jquery庫也是