requireJS(二)

1、前言

requireJS(一)

本篇主要整理requirejs的一些用法，相對比較零散。

實例目錄

2、優化

requirejs建議咱們給每個模塊書寫一個js文件。可是這樣會增長網站的http請求，這時可利用工具打包，詳情求戳連接查看。

 

3、關於define自定義模塊

以前說到自定義模塊define（）可接收三個參數，其中第一個參數爲模塊的名字。即咱們能夠顯式的定義模塊的名字

1 define('js/a',["b"],function(b){
2     do something...
3 })

可是不建議這樣作，由於這樣的硬編碼對代碼的可移植性比較差，就是說若你將文件移動到其餘目錄下，你就得重命名。

 

4、在一個模塊中的define（）內部使用require（）調用其餘模塊

這樣就能夠用相對於此文件的位置來調用模塊了。下面咱們演示在d模塊中調用c模塊，

假設咱們在d.js中編寫以下代碼

1 //d.js
2 
3 define(["require"],function(require){
4   var mod = require("./c");
5   console.log(mod.ccc);   //此時能夠在控制檯看到輸出123456789
6   //alert(mod.ccc)
7 })

1 //而在c.js
2 
3 define(function($){
4   return {
5     ccc:"123456789"
6   };
7 })

這樣，你能夠訪問模塊的相鄰模塊，無需知道該目錄的名稱。

或者直接用更簡潔的代碼（commonjs模塊語法）ps：沒研究過commonjs。

1 define(function(require) {
2     var mod = require("./c"); console.log(mod.ccc);
3 });
//該形式利用了Function.prototype.toString()去查找require()調用，而後將其與"require"一塊兒加入到依賴數組中，這樣代碼能夠正確地解析相對路徑了。

效果與上面的相同。

 

5、require.toUrl()生成相對於模塊的URL地址

1 //d.js
2 define(["require"],function(require){
3   var url = require.toUrl("./c");
4   console.log(url);  // 輸出../c
5 })

 

6、控制檯調試

咱們能夠使用require("module/name").callsomefunction()來調試模塊，簡單實例請看下面截圖

7、循環依賴

所謂的循環依賴，即系a依賴b，b同時依賴a。（通常狀況下最好要避免循環依賴）

這時候，若是代碼這樣的寫得話

 1 //e.js
 2 
 3 define(["f"],function(f){
 4   return{
 5     eee:"eeeeee"
 6   }
 7 })
 8 
 9 //f.js
10 
11 define(["e"],function(e){
12   return {
13     ale:function(){
14       var E  = e.eee;
15       console.log(E);
16     }
17   }
18 })
19 
20 //mian.js
21 代碼省略，主要就是注入模塊依賴

會出現

這時，咱們只要將代碼更改成

1 define(["require","e"],function(require,e){
2   return {
3     ale:function(){
4       var E  = require("e").eee;
5       console.log(E);
6     }
7   }
8 })

這樣就能夠看到在控制檯下輸出eeeeee啦