模塊化以及requirejs和seajs

咱們用模塊化的思想進行網頁的編寫是爲了更好的管理咱們的項目

模塊與模塊之間是獨立存在的，每一個模塊能夠獨立的完成一個子功能。

模塊化所涉及的規範commonjs,AMD,CMD,UMD

其中的commonjs是服務器規範，用到的是同步加載，適用於nodejs後臺的操做

因爲commonjs的特性是同步加載，並不適用於前端，人們想解決前端異步加載的問題，AMD就應運而生了。

AMD將commonjs的思想所有推翻，產生了一套新的規範，它是專門爲前端定製的規範，實現了異步加載。

CMD和AMD的區別是能夠實現按需加載。

UMD則是commonjs和AMD的結合。

requirejs遵循的是AMD規範

requirejs：

require.js提供兩種加載（前置加載：2.0之前的版本使用，按需加載（異步加載，2.0之後的版本））

requirejs的引入：

頁面只須要插入一個script標籤：
    <script src="js/requirejs_module/require.min.js"  data-main="js/require-main"></script>
    上面的data-main是用來加載配置文件的。

//require-main的配置以下：
    require.config({
        paths:{
            "m1"："js/js-module/m1",
            "m2"："js/js-module/m2",
            "my":"js/js-module/me
        shim:{
            "my":{export:"myFunc"}
            }//shim是爲不支持AMD的js文件提供的方法（儘可能不適用此方法，應該講js文件進行改造）
    })    //paths用來配置全部路徑

 

模塊的定義：（define關鍵字）
    define（function（）{
    }）
    define(["module2"],function(m2){ })

定義的模塊可在其餘模塊的內部加載
    define(function(require,exports,module){
        var m2=require("module2");//內部加載模塊"module2"
            m2.func2
    })

 

模塊的加載方法以下：

require（["m1"],function(m1){
        var fun1=function(){
        }
        var fun2=function(){
        }
            return{fun1:fun1,fun2:fun2
    }

 

//模塊的前置加載
    require（["fun1,fun2"],function(m1,m2){}）

 

seajs：

 1.sea.js的導入
    <script src="js/seajs_modules/sea.js"></script>//官網中提供的js文件
    <script src="js/seajs_config.js"></script>//本身創建的配置路徑

 

配置路徑中：
    seajs_config.js代碼以下：
    
    seajs.config({
    base:".", //指定根路徑
    alias:{
        "jquery":"js/seajs_modules/jquery-1.11.2-min",//導入的jQuery文件
        "bootstrap":"js/seajs_modules/bootstrap.min",//導入的框架
        "reg":"js/modules/reg/reg",//要進行模塊化配置的頁面
        "login":"js/modules/login/login",
        "student":"js/modules/student/register"
    }    //alias別名
    });

使用：
    seajs.use("reg",function(reg){
        reg.load();
    });

 

seajs中模塊的定義：

模塊的定義：（關鍵字：define）
    define(function(require){
    var $=require("jquery");//加載jQuery
    var load=function(){
        $("#content").load("js/modules/login/login.html",function(){
            。。。。。。
        });//在content裏面加載頁面login.html

    };
    return{load:load}//定義的模塊中返回的方法
    });

 

引入的第三方插件要進行改造：

第三方插件改造：
    jQuery改造：
    在js代碼外面包裹：
    define（function（）{
        。。。。。。
        return $.noconflict();

    }）

上面的return $.noconflict()：運行這個函數將變量$的控制權讓渡給第一個實現它的那個庫（這有助於確保jQuery不會與其餘庫的$對象發生衝突。 在運行這個函數後，就只能使用jQuery變量訪問jQuery對象。例如，在要用到$("div p")的地方，就必須換成jQuery("div p")。 '''注意:'''這個函數必須在你導入jQuery文件以後，而且在導入另外一個致使衝突的庫'''以前'''使用。固然也應當在其餘衝突的庫被使用以前，除非jQuery是最後一個導入的。

 

    bootstrap改造：
    define（function（require，exports，module）{
        return function（$）{
        ......js內容區.......
    }}）

模塊化實現的都是單頁面應用。