requireJS入門學習

時間 2019-11-08

原文原文鏈接

前言

　　　最近網上、羣裏各類隨便看，隨便學。暑期實習還沒找到，昨天開題過了，好好學習吧。最近一直看到前端的ADM,CMD規範，而後網上各類找資料看，看了好幾個牛人的博客，寫的很好，而後自我感受了解了點，介於本人還屬於菜鳥水平，文章中不免有錯誤，望指出改正。html

ADM規範

　AMD是"Asynchronous Module Definition"的縮寫，意思就是"異步模塊定義"。它採用異步方式加載模塊，模塊的加載不影響它後面語句的運行。全部依賴這個模塊的語句，都定義在一個回調函數中，等到加載完成以後，這個回調函數纔會運行。AMD規範其實就是對咱們的JS文件進行模塊化的管理。前端

爲何要使用require.js

　　最先的時候，全部Javascript代碼都寫在一個文件裏面，只要加載這一個文件就夠了。後來，代碼愈來愈多，一個文件不夠了，必須分紅多個文件，依次加載。下面的網頁代碼，相信不少人都見過。jquery

<script scr="1.js"></script>
<script scr="2.js"></script>
<script scr="3.js"></script>
<script scr="4.js"></script>

這段代碼依次加載多個js文件。這樣的寫法有很大的缺點。首先，加載的時候，瀏覽器會中止網頁渲染，加載文件越多，網頁失去響應的時間就會越長；其次，因爲js文件之間存在依賴關係，所以必須嚴格保證加載順序（好比上例的1.js要在2.js的前面），依賴性最大的模塊必定要放到最後加載，當依賴關係很複雜的時候，代碼的編寫和維護都會變得困難。數組

require.js的誕生就是爲了解決這兩個問題：瀏覽器

（1）實現JS文件的異步加載，避免網頁失去響應。異步

（2）管理模塊之間的依賴性，便於代碼的編寫和維護。async

require.js的一個小例子

下面經過一個很簡單的小例子來使用require.js。模塊化

1、加載require.js

去官網下載好require.js後。這裏將它放在咱們工程目錄的JS文件夾裏。在咱們的html文件中加載require.js。函數

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>

<body>
    <p>hello world!</p>

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

這裏爲了不加載JS文件可能致使網頁失去響應。咱們將JS放在網頁底部加載，另一種寫法是：學習

<script src="JS/require.js" defer async="true"></script>

async屬性代表這個文件須要異步加載，避免網頁失去響應。IE不支持這個屬性，只支持defer，因此把defer也寫上。

2、主模塊main.js

在上面的<script>中有一句：data-main="JS/main"，這裏main.js就是整個網頁的入口代碼，咱們稱它爲「主模塊」。

data-main屬性的做用是，指定網頁程序的主模塊。在上例中，就是JS目錄下面的main.js，這個文件會第一個被require.js加載。因爲require.js默認的文件後綴名是js，因此能夠把main.js簡寫成main。

下面看main.js中的代碼。

require.config({
    paths:{
        "jquery":"jquery-1.11.3",
        "math":"math"
    },
    
});

require(['math'],function(math){
    console.log(math.add(1,2));
});

這裏main.js中依賴一個模塊：math。

require()函數接受兩個參數。第一個參數是一個數組，表示所依賴的模塊。上面中咱們依賴了math.js.第二個參數是一個回調函數，當前面指定的模塊都加載成功後，它將被調用。加載的模塊會以參數形式傳入該函數，從而在回調函數內部就可使用這些模塊。

若是主模塊依賴多個模塊，就能夠這樣寫：

require(['math', 'jquery', 'backbone'],function(math, $, Backbone){
    // code here
});

require.js會先加載這三個模塊，而後再運行回調函數。主函數代碼就寫在回調函數中。回調函數中的參數順序要和依賴模塊數組中的順序一致。

默認狀況下，require.js假定上面這三個模塊與main.js在同一個目錄，文件名分別爲math.js,jquery.js和backbone.js，而後自動加載。

使用require.config()方法，咱們能夠對模塊的加載行爲進行自定義。require.config()就寫在主模塊（main.js）的頭部。參數就是一個對象，這個對象的paths屬性指定各個模塊的加載路徑。路徑可使用相對路徑也可使用絕對路徑。

AMD模塊的寫法

require.js加載的模塊，採用AMD規範。也就是說，模塊必須按照AMD的規定來寫。

具體來講，就是模塊必須採用特定的define()函數來定義。若是一個模塊不依賴其餘模塊，那麼能夠直接定義在define()函數之中。

上面例子中math.js的寫法：

define(['jquery'],function($){
    var add = function(a,b){
        return {
            sum:a + b,
            innertext:$("p").text()
        }
    };
    return {
        add:add
    };
    
});

這裏咱們的math.js又依賴了jquery模塊，在回調函數裏面得到了元素p的innerhtml。（這裏只是演示math模塊又能夠依賴其餘模塊）。

回調函數裏面返回了一個JS對象。

在主模塊的require()回調函數中,咱們就能夠調用math.add方法了。同時也調用了jquery模塊中得到元素p的text().

結語

寫博客也是個技術活啊，水平有限，文章還有不少知識點沒有講到。你們能夠看看牛人的原文：http://www.ruanyifeng.com/blog/2012/11/require_js.html，

http://www.cnblogs.com/snandy/archive/2012/05/24/2514700.html。仍是堅持寫寫博客，寫博客的過程當中你會發現其實有不少你認爲懂的，可是要真正講出來的時候仍是有些知識本身仍是雲裏霧裏的。努力學習，爭取找個實習好好在實踐中學習，自個太笨，瞎學進度仍是蠻慢的。