Загружайте только необходимые файлы js, используя requirejs

Question

Я разрабатываю приложение, в котором я использовал requirejs и остов на внешнем интерфейсе.

Я настроил requirejs для загрузки всех файлов js.

Мой файл main.js выглядит примерно так:

require.config({
    baseUrl: 'js',
    paths: {
        "jquery": 'lib/jquery',
        "jquery.ui.widget" : "lib/jquery.ui.widget",
        "jquery.knob" : "lib/jquery.knob",
        "jquery.iframe-transport" : "lib/jquery.iframe-transport",
        "jquery.fileupload" : "lib/jquery.fileupload",
        "socket" : "lib/socket.io",
        "handlebars": 'lib/handlebars',
        "underscore": 'lib/underscore',
        "bootstrap" : 'lib/bootstrap',
        "backbone": 'lib/backbone',
        "views" : "views",
        "models" : "models",
        "collections" : "collections",
        "text" : "lib/helper/text"
    }
});

require(['jquery',
         'handlebars',
         'underscore',
         'backbone',
         'login',
         'jquery.ui.widget',
         'jquery.knob',
         'jquery.iframe-transport',
         'jquery.fileupload',
        ],function($,
                    Handlebars,
                    _,
                    Backbone,
                    Login){
    Login();
}); 

мои логин файлы выглядят так:

define(function(require){
    return function(){
        var LoginView = require("views/login_view");
        $("#createAccount").click(function(){           
            $("#signInContainer").addClass("hide");
            $("#register").removeClass("hide");
        });
        var view = new LoginView({el : "body"});
    }
});

объект представления - это объект Backbone.View, который начинается следующим образом:

define(function(require){
    var User = require("models/user");
    var Dashboard = require("views/dashboard");

  //... rest of the code

}

Файл Login_view.js содержит 2 других файла js, необходимых для него.

Точно так же на всех других страницах, которые будут вызываться после входа в систему, также есть такие требования.

Проблема заключается в следующем: когда страница загружается, загружаются все такие вложенные требования. например, также загружаются операторы внутри файла Js Dashboard, который требуется для входа в систему.

Я хочу решение, посредством которого я хочу, чтобы только начальные файлы были загружены. Файлы внутри панели мониторинга должны загружаться только тогда, когда я хочу создать экземпляр объекта панели мониторинга.

Answer 1

Вам нужно изменить логику кода и использовать requireJS для запроса файла js только по требованию. Ниже приведен пример загрузки панели инструментов, когда пользователь щелкает элемент на странице.

define(function(require){
    var User = require("models/user");  

  //...my code
 //ex on user click
 $("#myElement").on("click",function(){

     require(["views/dashboard"],function(Dashboard){

       //code for Dashboard here
     });
 });

}