模塊化開發（二）--- seaJs入門學習

SeaJS是一個基於CMD模塊定義規範實現一個模塊系統加載器

 

[CMD規範]( https://github.com/cmdjs/specification/blob/master/draft/module.md)九、seaJs啓動函數的回調函數

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

github： https://github.com/seajs/seajs

如何選擇一個技術產品棧：

- 看做者是不是大牛

- 看社區是否活躍

- 看是否常常更新

SeaJS的做者已經不更新該項目了，可是國內不少公司仍是在使用SeaJS做爲前端模塊化解決方案，

學習SeaJS有助於咱們學習 Node.js 中的模塊系統，由於他們所使用的規範基本一致。

學習完SeaJS以後能夠自學  RequireJS[RequireJS官方網站](http://requirejs.org/)，思想基本同樣。無非是API的區別。

### 體驗官方demo

[官方示例demo]( http://seajs.org/docs/#quick-start)

###seaJs使用步驟：

1. 下載 sea.js 庫

2. 在頁面中引入 sea.js

3. define - 定義模塊

4. module.exports - 暴露接口

5. require - 加載模塊

6. seajs.use - 從入口模塊啓動模塊系統

    seaJs.use('./././',function(a){

        console.log(a);// 其中a就是exports而不是module.exports

    }

十、define()的用法：

    define(object)

    define(string)

    define(function(require,exports,medule){

        //全部的本身的js 代碼都寫在回調函數中

    })

    例子1：

     define(function (require ,exports , module ){    //最好在每一次定義模塊的時候，儘可能都使用匿名函數，並傳入三個參數的方式；不要重命名require函數；

            module.exports = {    //經過這種形式將對象暴漏到模塊以外，供其餘文件使用，能夠直接使用exports = ...

                    add : require ( ' ./././ ' ) ,  //require的參數值必須是字符串，該字符串就是表示模塊的一個模塊標識

                    mod : require ( ' ./././ ' )    // 訪問的時候使用 mod() 直接調用

           }

    })

    例子2：

    define ( function ( require , exports , module ) {

            exports.add = reuire ( ' ./././' ) ;    // 訪問的時候須要經過 exports.add()方式進行調用

            exports.mod =require ( './././' );

    })

十一、require('./././')加載文件模塊

        最好吧全部的require都寫在define 函數中js 代碼的最上面

        [require 書寫約定]( https://github.com/seajs/seajs/issues/259)

十二、seaJs在頁面中的使用：

        首先加載sea.js 文件

        而後再啓動模塊：<script> </script>標籤中加載入口模塊 seajs.use('./a') 

            啓動模塊系統----開機

            seaJs.use方法是異步加載模塊文件

1三、模塊標識：其實就是模塊的路徑，能夠不包含文件的後綴名，由於加載的都是js文件

        相對標識：以 ./ 或者 ../ 開始的都是相對標識，相對於當前出現的位置所屬的文件

        頂級標識：不以 ./ 或者 ../ 或者 / 開始的標識是頂級標識，頂級標識相對模塊系統的基礎路徑來解析，模塊系統的基礎路徑在不指定的狀況下，

            默認頂級目錄是第三方插件 sea.js 所在的目錄，能夠經過 seajs.config() 方法來指定頂級標識的基礎路徑

            頂級標識配置：seajs.config({

                base : ' ./ '  ; //指定當前目錄爲頂級目錄 

            })

        模塊標識永遠相對於require出現的文件路徑。

1四、require.async( './文件' )實現異步按條件加載

        if(true){require('./a')}else{require('./b')}這時候a和b文件都會被加載下來

        require是全部加載成功以後才解析和執行

        require.async能夠按照條件進行加載，代碼執行到具體位置的時候纔會加載和執行

         if(true){

                require.async('./b' , function (foo){

                    console.log(foo) ;  // foo就是在./b 文件中表露出來的內容

                })

         }else {

                require.async('./a' , function () {   }  )

         }

1五、exports 和 module

        module.exports就是模塊對外導出 的接口對象，至關於執行了 return module.exports

        exports就是module.exports的一個別名而已。

        module.exports就是當前模塊與外部文件的接口對象。

    首先須要明白：

        var  foo2 = {}

        var foo3 =foo2

        foo3.name = 'name' // 這是修改了foo3 ，它的引用也被修改

        console.log(foo2)

        console.log(foo3)

        foo3 = 'hello'  // 這是對foo3從新賦值後，就丟失了原來foo2的引用

        console.log(foo2)

        console.log(foo3)

    而後：

        var foo ={

            obj : {}

        }

        function changeFoo(obj,foo){

            console.log(obj===foo.obj) //true

            obj.name = 'jack'

            obj = 'hello'

            console.log(obj===foo.obj)  //false

            return foo.obj

        }

        console.log(changeFoo(foo.obj,foo)) // {name : jack}

    最後：

        obj 就至關於 exports，foo 就至關於 module。綜上所述可知，不能給exports從新賦值，這樣就切斷了exports與module.exports之間的聯繫，必須經過 點 的形式修改exports的值。

1六、瀏覽器中的JS不能作什麼？

        不能操做數據庫、不能操做文件、瀏覽器的JS只能經過AJAX發送請求而不能接受請求（後面的Socket網絡編程就能夠進行雙向通訊了）

        JS能夠脫離瀏覽器單獨運行（這時候就沒有BOM和DOM）， JS僅僅是語言而已（之前所學的JS僅僅是ECMAScript）