使用RequireJS構造大型JavaScript代碼

Question

對於RequireJS來說，這裏非常新，並且試圖學習如何採用這個結構。截至目前，我已經成功地創建一個結構如下

上圖顯示我的代碼的結構。在文件夾「我的」應該包含我所有的模塊的地方，我計劃在每個模塊裏面寫下自己的models.js，views.js，以後可以使用backbone.js

在這一點上，我有幾個如下問題

1. 任何人都可以通過觀察結構來判斷它是一個好主意還是應該重新考慮？

第二個問題是有關我應該如何有條件地加載我的模塊。下面是我的config.js文件

require([ 
     "jquery", 
     "libs/jquery-ui/js/jquery-ui-1.9.0.custom.min", 
     "libs/bootstrap/js/bootstrap.min", 
     "my/base/module", 
     "my/vehicle/module"], 

    function($, ui, bootstrap, base, vehicle) { 
     //plugins have been loaded. 
     base.initialize(); 
     vehicle.initialize(); 

}); 

現在還不能確定如何加載模塊的車輛時上午瀏覽或加載模塊帳戶時，上午的瀏覽帳戶。後端是使用django開發的，我可以爲每個模塊創建幾個config.js文件，但不知道這是否是正確的方法。

Answer 1

這就是我如何在Python Django框架內設置RequireJS和JQuery。 在基地頂層baset_site.html我有「頭」標記之間以下require.js配置代碼：

<script> 
    requirejs.config({ 
     baseUrl: "{% static '' %}", 
     paths: { 
      jquery: './js/jslibs/jquery-1.9.1', 
      jqm: './js/jslibs/jquery.mobile-1.4.0', 
      ajax_redirect: './js/ajax_redirect', 
      make_filt_sel: './app_namespace/js/make_filt_sel' 
     }, 
     shim: { 
      "jquery": { 
       exports: '$', 
      }, 
      "jqm": { 
       deps: ['jquery'], 
       exports: '$.mobile' 
      }, 
      "make_filt_sel": { 
       deps: ['jquery', 'jqm'], 
       exports: 'make_filt_sel' 
      } 
     } 
    }); 

</script> 

{% block header_scripts %}{% endblock header_scripts %} 

這裏是我的ajax_redirect.js

/* 
    JQuery Ajax typically does not redirect in Django. Need middleware to 
    setup "class AjaxRedirect(object):" to fix redirection. 
    Reference: 
     http://hunterford.me/how-to-handle-http-redirects-with-jquery-and-django/ 
*/ 

(function (root, doc, factory) { 
    if (typeof define === "function" && define.amd) { 
     // AMD. Register as an anonymous module. 
     define(['jquery'], function() { 
      factory(); 
     }); 
    } else { 
     // Browser globals 
     factory(); 
    } 
}(this, document, function () { 

    $(document).ajaxComplete(function(e, xhr, settings){ 
     if (xhr.status == 278){ 
      window.location.href = 
       xhr.getResponseHeader("Location") 
        .replace(/\?.*$/, "?next="+window.location.pathname); 
     } 
    }); 

})); 

然後我一般設置「塊header_scripts」在繼承的模板中如下：

{% block header_scripts %} 
    {{ block.super }} 

    <script> 

     if (typeof define === "function" && define.amd) { 
      // AMD {# Configure requirejs.config in base_site.html #} 
      require(["./app_namespace/js/module_namespace/js_module"]); 
     } else { 
      // No AMD 
      $.ajax({ 
       async:false, 
       type:'GET', 
       url: "{% static "app_namespace/js/make_filt_sel.js" %}", 
       data:null, 
       dataType:'script' 
      }); 

      $.ajax({ 
       async:false, 
       type:'GET', 
       url: "{% static "app_namespace/js/module_namespace/js_module.js" %}", 
       data:null, 
       dataType:'script' 
      }); 
     } 

    </script> 

{% endblock header_scripts %} 

下面是設置js_module的示例。js與依賴關係：

(function (root, doc, factory) { 
    if (typeof define === "function" && define.amd) { 
     // AMD. Register as an anonymous module. 
     define(['jquery', 'jqm', 'ajax_redirect', 'make_filt_sel'], function() { 
      factory(); 
     }); 
    } else { 
     // Browser globals 
     factory(); 
    } 
}(this, document, function () { 
    // A bunch of code 
    $.mobile.document.on("pagebeforecreate", function(e){ 
     // a bunch of code 
     // Shorthand for $(document).ready() 
     $(function(){ 
      // a bunch of code 
     }); // end of $(document).ready() 
    }); // end of $(document).on("pagebeforecreate", 

})); // end of (function (root, doc, factory) 

Answer 2

requireJS的本質是模塊化。如果您正在加載任何腳本，則應將路徑配置放入rquireJS配置部分。但是，如果你想要有條件的使用/加載文件。然後你必須將你的代碼封裝在define模塊中。有點像這樣

require.config({ 

paths: 
{ 
    jquery: 'libs/jquery/jquery-1.7.2.min', 
    jqueryui: 'libs/jquery/jquery-ui-1.8.20.min', 
    bootstrap: 'libs/bootstrap/bootstrap.min', 
}, 
shim: { 
    'underscore': { 
    exports: '_' 
    },  
    'bootstrap': { 
    deps: ['jquery'], 
    exports: 'jquery' 
    } 
} 


}); 



require(['app/jquery.app','jquery.bootstrap'], function (AppRouter) { 
var app_view = new AppRouter; 
} 

你的應用程序/ jquery.app應該是你的應用程序的起點。

你必須寫本到main.js文件，並調用它像這樣

<script data-main="/Scripts/main" src="/Scripts/libs/require/require.js" type="text/javascript"></script> 

和你jquery.app這是你的出發點應該是這樣的

define(['jquery','my/base/module','my/vehicle/module']], 
     //plugins have been loaded. 
    base.initialize(); 
    vehicle.initialize(); 
}); 

注意，在定義模塊我沒有定義任何要加載的jquery ui和bootstrap。原因是自從jquery ui加載它自己的並且它使用jquery語法。而bootstrap文件實際上取決於jquery。所以使用shim config來加載bootstrap.min.js。基本上你的配置和起點應該定義路徑+起點。所以多數民衆贊成如何使它。