前端JS框架系列之requireJS基礎學習

1 背景

　　伴隨着項目功能的不斷擴充，客戶體驗的不斷完善，實現交互邏輯的JS代碼變得愈來愈多。起初，爲了管理JS代碼，咱們把JS從頁面中解放出來獨立成文件，接着又把類似的交互代碼提取到公共的JS頁面中。然而這還不夠，一個團隊在編寫JS交互邏輯時，每每會出現"命名衝突"的問題。因而乎，咱們想到了閉包，並將每一個JS文件都用閉包封裝起來，造成一個個獨立的做用域，若是有必要，還會返回一個對象接口供外界調用。走到這一步，JS中的命名問題、全局變量問題均可以完美解決，但還存在一個相互依賴的大問題。特別是引入大量JS文件時，常常會由於文件之間的依賴關係而拋錯。引入JS框架RequireJS，可讓JS更規範，並解決上述遇到的一系列問題。

2 認識RequireJS

　　RequireJS是一個JavaScript模塊加載器，使用RequireJS加載模塊化腳本將提升代碼的加載速度和質量，RequireJS兼容IE 6+、Firefox 2+、Safari 3.2+、Chrome 3+、Opera 10+。

　　RequireJS的目標是鼓勵代碼的模塊化，它使用了不一樣於傳統<script>的腳本加載步驟。能夠用它來1.加速和優化代碼，但它的主要目的仍是爲了2.代碼的模塊化。它鼓勵在使用腳本時用module ID代替URL地址。

　　RequireJS以一個相對於baseUrl的地址來加載全部代碼。頁面頂層<script>標籤含有一個特殊的屬性data-main，RequireJS使用它來啓動腳本加載過程。

　　baseUrl設置方式：通常1.是與data-main屬性相一致的目錄，也可2.經過RequireJS config來手動配置，若是沒有顯示指定data-main或者config，則3.默認baseUrl爲包含RequireJS的html文件所在目錄。

　　例如：<script data-main="js/main.js" src="lib/require.js"></script>，經過data-main設置了入口，並會加載js目錄下module ID爲require的腳本，baseUrl則爲js目錄。

　　RequireJS默認假定所依賴的資源都是js腳本，因此無需在module ID上加.js後綴。能夠經過paths config設置一組腳本，能夠有助於咱們在使用腳本時碼更少的字。

　　若是想避開"baseUrl+paths"的解析過程，而是直接加載某一目錄下的腳本，則module ID需知足如下規則之一：(1)帶.js後綴 (2)以/開頭 (3)包含URL協議如:'http:'或'https:'

　　通常來講，最好仍是使用baseUrl和"paths" config去設置module ID，它會帶來額外帶來靈活性：腳本的重命名和重定位。同時，爲了不凌亂的配置，最好不要使用多級嵌套的目錄層次結構來組織代碼，而是要將全部的腳本都放到baseUrl中，要麼分爲項目庫/第三方庫的扁平結構