模塊加載(require)及定義(define)時的路徑

　　最近新公司在用requireJS進行JS的整合，剛開始接觸有點蒙，於是深入了解了一下。requireJS主要是為了解決一下兩個問題：

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

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

　　但是在使用的時候有個最大的困惑就是加載模塊時候的路徑問題，在requirejs的模塊路徑解析里，  baseUrl 是非常基礎的概念。在demo.html里加載requirejs，同時在requirejs所在的script上聲明  data-main 屬性，那么，requirejs加載下來后，它會做兩件事件： 

1. 加載js/main.js
2. 將baseUrl設置為data-main指定的文件所在的路徑，這里是 js/。

　　如果沒有通過  data-main 屬性指定  baseUrl ，也沒有通過config的方式顯示聲明  baseUrl ，那么  baseUrl 默認為加載requirejs的那個頁面所在的路徑。

requirejs.config({
  baseUrl: 'js'
});

 　　baseUrl+path可以使依賴更加靈活和簡單：

requirejs.config({
  baseUrl: 'js',
  paths: {
    model: 'common/model'
  }
});

　　path使用要點：

　　1、沒有在paths規則里定義，於是為 baseUrl + demo.js => js/demo.js

　　2、model已經在paths里定義，於是為baseUrl + common/model + apple.js => js/common/model/apple.js

　　3、model盡管已經在paths里定義，但是  ../model/demo 並不是以model開頭，於是為 baseUrl + ../model/demo.js => model/apple.js，也就是說model與js在同一層級。

　　在requireJS中最令人困惑的也就是"./module"的用法：

　　demo1、

requirejs.config({
  baseUrl: 'js/common'
});
// 實際加載的路徑都是是 /lib.js
require(['./lib', 'lib'], function(Lib){
  Lib.say('hello');
});

　　依賴於當前路徑的下的lib.js文件。

　　demo2、

　　通過  define 定義模塊A時，模塊A依賴的模塊B，如果是  ./module 形式，則基於模塊A所在目錄解析模塊B的路徑。

　　main.js和lib.js

requirejs.config({
  baseUrl: 'js'
});
// 依賴lib.js，實際加載的路徑是 js/common/lib.js，而lib模塊又依賴於util模塊('./util')，解析后的實際路徑為 js/common/util.js
require(['common/lib'], function(Lib){
  Lib.say('hello');
});

// 依賴util模塊
define(['./util'], function(Util){
    return {
        say: function(msg){
            Util.say(msg);
        }
    };
});

　　demo3、

　　lib模塊依賴的util模塊，最終解析出來的路徑是 js/util.js

　　main.js和lib.js

requirejs.config({
  baseUrl: 'js',
  paths: {
    lib: 'common/lib'
  }
});

// 實際加載的路徑是 js/common/lib.js
require(['lib'], function(Lib){
  Lib.say('hello');
});

// util模塊解析后的路徑為 js/util.js
define(['./util'], function(Lib){
    return {
        say: function(msg){
            Lib.say(msg);
        }
    };
});

　　可以理解為util.js是依賴於在lib的根目錄下得文件。

　　demo4、

　　main.js和lib.js

requirejs.config({
  baseUrl: 'js',
  paths: {
    common: 'common'
  }
});

// 實際加載的路徑是 js/common/lib.js
require(['common/lib'], function(Lib){
  Lib.say('hello');
});

define(['./util'], function(Lib){
    return {
        say: function(msg){
            Lib.say(msg);
        }
    };
});

　　最終解析的util為js/common/util.js。

　　通過分析上面的四個例子，有了一個基本的思路。找相對於當前文件的根目錄，這樣就會更加清晰些。模塊名可以為 "相對的" 或 "頂級的"。如果首字符為"."或".."則為"相對的"模塊名