requireJS(二)

一、前言 requireJS(一) 本篇主要整理requirejs的一些用法，相對比較零散。 執行個體目錄   二、最佳化 requirejs建議我們給每一個模組書寫一個js檔案。但是這樣會增加網站的http請求，這時可利用工具打包，詳情求戳連結查看。   三、關於define自訂模組 之前說到自訂模組define（）可接收三個參數，其中第一個參數為模組的名字。即我們可以顯式的定義模組的名字 1 define('js/a',["b"],function(b){2     do something...3 })但是不建議這樣做，因為這樣的寫入程式碼對代碼的可移植性比較差，就是說若你將檔案移動到其他目錄下，你就得重新命名。   四、在一個模組中的define（）內部使用require（）調用其他模組 這樣就可以用相對於此檔案的位置來調用模組了。下面我們示範在d模組中調用c模組， 假設我們在d.js中編寫如下代碼 複製代碼1 //d.js2 3 define(["require"],function(require){4   var mod = require("./c");5   console.log(mod.ccc);   //此時可以在控制台看到輸出1234567896   //alert(mod.ccc)7 })複製代碼複製代碼1 //而在c.js2 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"一起加入到依賴數組中，這樣代碼可以正確地解析相對路徑了。效果與上面的相同。   五、require.toUrl()產生相對於模組的URL地址 1 //d.js2 define(["require"],function(require){3   var url = require.toUrl("./c");4   console.log(url);  // 輸出../c5 })  六、控制台調試 我們可以使用require("module/name").callsomefunction()來調試模組，簡單一實例請看下面   七、循環相依性 所謂的循環相依性，即系a依賴b，b同時依賴a。（一般情況下最好要避免循環相依性） 這時候，如果代碼這樣的寫得話 複製代碼 1 //e.js 2  3 define(["f"],function(f){ 4   return{ 5     eee:"eeeeee" 6   } 7 }) 8  9 //f.js10 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.js21 代碼省略，主要就是注入模組依賴複製代碼會出現   這時，我們只要將代碼更改為 複製代碼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啦