Requirejs快速使用

Requirejs是一個簡單，實用，強大的前端模塊化js庫，它遵循AMD這一客戶端模塊定義規範，使用它可以使咱們前端代碼更加清晰高效加載，擺脫了之前前端代碼雜亂無序的狀態。

使用步驟以下：

1.下載require.js文件,地址爲 http://www.requirejs.cn/docs/download.html#requirejs,並將其加入咱們的項目中；

2.使用define方法定義模塊

這裏主要有兩種形式，第一種是定義無依賴的js模塊代碼，即這個js模塊是單獨存在的，不依賴於其餘模塊或者js庫，這裏新建一個independent.js,代碼以下

define(
    function()
    {
        return{
            test1:function()
            {
                console.log('i am test1');
            },
            test2:function()
            {
                console.log('i am test2');
            }

        }
    }
)

　　在這個js文件中定義了一個模塊，返回了一個對象，其包含兩個方法用之外部文件調用，這是定義一個獨立的模塊；

第二種方式是定義一個依賴於其餘模塊的模塊，新建一個depend.js,代碼以下：

define(['test'],function(test){
    return{
        showName:function(){
            console.log( test.name);
        },
        showAge:function(){
            console.log(test.age);
        }

    }

});

這裏定義了一個模塊，其依賴於test模塊，須要注意的是，requirejs默認js文件名爲模塊名，test模塊即對應於test.js文件，在這個模塊中，第一個參數是須要依賴的外部模塊名稱，是一個數組，也能夠依賴多個，第二個參數是一個function，其形參test對應着test模塊，因此在showName,showAge方法中課直接調用test的屬性或方法；

test.js

define(
    function()
    {
        return {
            name:'張三',
            age:22
        }
    }
);

這裏定義了一個test模塊，返回了包含name和age的一個對象，供其餘模塊調用.

3.使用require調用模塊

新建一個main.js,用來做爲項目的主js文件，即在頁面中只加載這個js文件，其餘js文件都經過它以模塊調用的形式存在，代碼以下：

require(["depend"],function(de){
    de.showAge();
    de.showName();


});

表示調用depend模塊，並調用其showAge和showName方法。

在html中加載requirejs,將其data-main屬性指向咱們的主js文件main.js

<script data-main="main.js" src="require.js"></script>

結果以下：

4.加載jQuery

平時開發中jQuery用的不少，最新版1.11以上的都遵循AMD規範，能夠利用requirejs直接將其做爲一個模塊加載進來

在main.js中添加require.config,對jQuery進行配置，代碼以下：

require.config(
    {
        paths:{
            jquery:"http://code.jquery.com/jquery-1.11.1.min"
        }
    }
);

這裏配置了一個jQuery模塊，它的地址爲一個CDN地址，也能夠將其下載到本地，地址指向本地地址也能夠，注意地址後面沒有.js,

而後就可使用require方法來調用了，main.js中調用代碼以下：

require(["jquery","depend","independent"],function($,de,ind){
    de.showAge();
    de.showName();
    console.log($("#span1").html());
    ind.test1();
    ind.test2();

});

這裏調用了三個模塊，咱們以前本身定義的兩個加上jQuery模塊，而且使用了他們中的方法，其中jquery模塊選擇html頁面上的一個span並將其內部文字輸出到控制檯

其他兩個模塊調用的都是在他們內部自定義的方法

最終結果以下：