RequireJS的入門,基礎用法

最近學了requireJS模塊化開發,所以現在趕緊過來寫個博客記錄一下,便於下次查閱。
RequireJS主要就是用來加載模塊的,有了他,可以使我們的應用程序在開發中簡潔明瞭,不會顯得亂糟糟的。
首先啦,我們肯定是要有一份RequireJS的啦,那麼就去官網下載一份吧。

下載:RequireJS官網下載

下載詳情

將下載回來的RequireJS放進我們的項目的中,哪個都行,新建的libs文件夾也行,只要放在目錄中,能引用就行。

js
然後,我們還要準備新建一個JS文件,叫main.js(其實名字可以隨意起),但是這個將會是主要的入口文件,所以最好是起一個通俗易懂的名字。

現在有了基本的js文件了,那麼我們還缺一個模塊,既然這樣,我們就再導入一個jquery進入我們的項目吧,等會作爲模塊來調用。

在這裏,我在項目裏面新建一個目錄叫moduel,用來存放我們的模塊。

jquery

好了,所有的文件都準備好了,要開始用RequireJS了,但是呢,在用之前,肯定是要說明一下基本的變量和用法的啦,其實,在RequireJS中,我們主要是用到require require.config define這三個變量的啦!

require:這個呢主要是用來導入我們的模塊的啦,他有兩個參數的啦,第一個是導入的模塊名稱,可以是一個字符串,注意,字符串的話就只能是導入一個模塊,如果是多個模塊的話就要用數組的方式導入;

第二個參數是一個回調函數,這個函數的參數呢,主要還是看你導入的模塊有沒有返回值,像jq那樣的模塊的返回值就是一個$符,那就給方法傳入一個參數,替代該模塊返回的參數,到時就可以使用這個參數名稱來調用模塊裏面的方法啦,注意,導入的模塊的參數的順序是依照前面導入模塊的順序的,所以要注意不要弄混淆的,一般有返回值的模塊先導入,沒有返回值的排在後面。例如:

require(['../moduel/jquery','../moduel/validate'],function($,val){
    $("h3").css({"color":"#00ff00"})
})

require.config:這個變量呢,是用來配置的,比如給導入的模塊重新定義一個新的名字,這個在用require導入模塊的時候就可以用這個名字,而不用再寫地址啦!直接上代碼:

require.config({
    paths:{
        jquery:"../module/jquery-3.1.1.min"
    }
})

require(['jquery'],function ($) {
    $("body").css({"background-color":"red"});
    $("h3").css({"color":"#63ff44","font-size":"50px"})
})

在前面講解require的時候,導入的模塊是需要添加路徑的,不然找不到該模塊的,而在使用了require.config之後,就可以省心很多,像上面代碼所示,我們可以在require.config中的paths屬性中配置我們的模塊的路徑和給模塊重新定義新的名字,這樣我們在導入模塊的時候就可以使用這個新的名字進行導入,導入的文件不需要.js後綴名,一般這個新的名字以簡短易懂爲主,不宜太長!

define:這個變量是用來定義模塊的,具體用法看代碼,或者上網查閱資料:

 define(function (){
    return {
    //這裏編寫模塊的主要代碼,return是用來將結果返回的
    };

  });

好的,簡單的用法講解完了,現在開始使用reuqireJS,首先在我們的html頁面中調用requireJS,然後設置data-main屬性爲main.js。

<body>
    <h3>hell world</h3>
    <script src="js/require.js" data-main="js/main"></script>
</body>

在頁面底部添加script標籤,設置src爲requireJS的文件路徑,data-main設置爲我們剛剛創建的main.js,不過在data-main中設置不需要後綴名。data-main主要的作用是在src將requireJS導入以後,再加載的main這個入口文件,待會我們導入模塊,使用模塊的代碼都在main裏面寫。

好,現在來看main這個文件要寫什麼:

require.config({
    paths:{
        jquery:"../module/jquery-3.1.1.min"
    }
})
require(['jquery'],function ($) {

    $("h3").css({"color":"#63ff44","font-size":"50px"})
})

就這麼簡單,設置配置和導入文件,並且使用的模塊來開發的邏輯代碼也在這個文件裏面寫,如上面的代碼,導入jquery模塊,然後使用jq來獲取h3標籤,並設置它的文字顏色和文字的大小。

到這裏,RequireJS的基本用法講完了。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章