RequireJs整理入門

首先，Requirejs是一個庫，利用它咱們能作什麼，解決什麼問題呢？(根據阮一峯老師的文章，本身總結寫了一遍加深影響。)

原文連接：http://www.ruanyifeng.com/blog/2012/11/require_js.html

原先寫Js文件都是集中在一個main.js的文件中，當代碼量逐漸增大，以及拆分加載的時候就出現裏不足。

1. 加載時須要中止網頁的渲染，文件越多，瀏覽器失去響應的時間也越長，一直轉圈圈。
2. 若是js之間存在依賴關係，須要嚴格指明加載順序的，那麼當依賴關係複雜時，代碼的編寫和維護都會變得很困難。

使用方法快速入門：

• HTML文件中引入

1  <script src="js/require.js" data-main="js/main"></script>  //data-main表示須要載入的入口Js文件，會被第一個加載

• require()函數

主模塊依賴於其餘模塊，使用AMD規範定義的require函數。

1 // main.js
2 require(['moduleA', 'moduleB', 'moduleC'], function (moduleA, moduleB, moduleC){
3 // some code here
4 });

 

require()函數接受兩個參數，第一個參數是一個數組，表示要依賴的模塊，第二個參數是一個回調函數。當前面指定的模塊都加載成功後，它將被調用。加載的模塊會以參數形式傳入該函數，從而在回調函數內部就能夠使用這些模塊。

• require.config()方法

使用require.config()方法，咱們能夠對模塊的加載行爲進行自定義。require.config()就寫在主模塊（main.js）的頭部。參數就是一個對象，這個對象的paths屬性指定各個模塊的加載路徑。

1 require.config({
2 　　　　paths: {
3 　　　　　　"jquery": "jquery.min",
4 　　　　　　"underscore": "underscore.min",
5 　　　　　　"backbone": "backbone.min"
6 　　　　}
7 　　});

1 //直接修改路徑
2 require.config({
3 　　　　paths: {
4 　　　　　　"jquery": "lib/jquery.min",
5 　　　　　　"underscore": "lib/underscore.min",
6 　　　　　　"backbone": "lib/backbone.min"
7 　　　　}
8 　　});
9 //修改基目錄

1 require.config({
2 　　　　baseUrl: "js/lib",
3 　　　　paths: {
4 　　　　　　"jquery": "jquery.min",
5 　　　　　　"underscore": "underscore.min",
6 　　　　　　"backbone": "backbone.min"
7 　　　　}
8 　　});

• 模塊（AMD模塊的編寫）

require.js加載的模塊，採用AMD規範。也就是說，模塊必須按照AMD的規定來寫。

// math.js
　　define(function (){
　　　　var add = function (x,y){
　　　　　　return x+y;
　　　　};
　　　　return {
　　　　　　add: add
　　　　};
　　});

加載該模塊

1 // main.js
2 　　require(['math'], function (math){
3 　　　　alert(math.add(1,1));
4 　　});