RequireJS 模塊化加載框架使用

時間 2019-11-18

標籤 requirejs 模塊化加載框架使用欄目 JavaScript 简体版

原文原文鏈接

RequireJS 是一個遵循 AMD 規範的模塊化加載框架javascript

與上文seajs同樣，這裏簡單介紹其相關用法css

一樣的，首先是下載好 require.js --> http://requirejs.org/docs/download.html#requirejshtml

AMD規範是預加載，也就是說會立刻將全部模塊全加載。java

寫法跟seajs也相似，只不過當須要包含模塊時，通常會將模塊名置入第一個參數。而不是直接require 詳見api

（新版本的也有CMD版require包含依賴的方式，但本質仍是同樣，下面會提到）瀏覽器

仍是舉個例子：網絡

目錄結構同級app

index.html:框架

注意到這裏script標籤多了一個data-main屬性(加不加後綴js均可以），它標識了引用主模塊入口 main.js模塊化

（也能夠不使用這種引用入口方式，下邊會介紹另外一種方式，注意啦~)

<!DOCTYPE html>
<html>
<head>
    <title>require</title>
    <style type="text/css">
    </style>
</head>
<body>

<script type="text/javascript" data-main='main' src="./require.js"></script>

</script>
</body>
</html>

main.js:

將兩個模塊置入參數1，並以回調的方式傳入使用

define(['main1','main2'],function(main1,main2){ 
    console.log('module of main:');
    main1.say();
    main2.say();

});

main1.js:

define(function(require,exports,module){ 
    console.log('module of main1:');

    module.exports = { 
        say: function(){ 
            console.log('main1--hello');
        }
    };
});

main2.js:

define(function(require,exports,module){ 
    console.log('module of main2:');

    return { 
        say: function(){ 
            console.log('main2--hello');
        }
    };
});

瀏覽器打開index.html 能夠發現結果：

順序亂了是否是

其實這就是由於AMD規範預先加載的規則，預先把全部依賴都執行了（雖然咱們還沒用到）

並且這加載是並行的，（默認狀況下）main1和main2不分前後。

假設 main.js文件因網絡問題加載延遲後，就有可能出現如下結果

module of main2:

module of main1:

module of main:

...

不過，咱們也能夠爲其什麼依賴關係，好比main1依賴main2,則就能保證「所謂的順序」-- 先有main2纔有main1

好比將index.html修改爲

<!DOCTYPE html>
<html>
<head>
    <title>require</title>
    <style type="text/css">
    </style>
</head>
<body>

<script type="text/javascript" src="./require.js"></script>
<script type="text/javascript">
  require.config({ 
      shim:{ 
          'main1':{ 
              deps: ['main2']
          }
      }
  });
    require(['main'],function(main){ 
        console.log(main.num);
    });
</script>
</script>
</body>
</html>

main.js:

define(['main1','main2'],function(main1,main2){ 
    console.log('module of main:');
    main1.say();
    main2.say();
    return {num:10};
});

這時的結果：

上面提到了requirejs也更新了遵循CMD規範的策略，但表面上遵循了，本質上仍是AMD的

爲何這麼說呢？引自：

因此要用requirejs就老老實實使用AMD的，若是想使用CMD的方式，就用seajs吧

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。