有没有更好的方法将 javascript 组织在单个文件中，并为多个页面提供特定代码？

我有几个网站，我使用相对少量的 jQuery 在页面上执行各种操作。一般来说，我们谈论的是每页几十行代码。

我将所有 JS 保存在一个文件中，只要它不是很大并且定义相当清晰。也就是说，我倾向于这样组织它：

$(document).ready(function(){
  var onPage1 = $("#id_thing_on_1").length === 1;
  if( onPage1 ){
    var usefulPage1Function = function(){}; //blah
    $("a").click(function(){}); //etc
  }
});

$(document).ready(function(){
  var onPage2 = $("#id_of_page_2").length === 1;
  if( onPage2 ){
    $(".someClass").fadeIn().click(function(){}); //etc
  }
});

任何东西is在多个页面上使用的内容会被取出到库中，但对于页面特定的内容，这是我一直遵循的模式。是否有更好的方法，或者这是将 JS 保存在一个文件中并将其加载到多个页面上的可接受的做法？

我很想知道其他人对此的看法，但我为每个页面组织和执行正确的 JS 代码集的做法是拥有一种路由引擎作为我的 js 应用程序的基础，在其中添加一个“控制器” ' 每个部分将其自身添加到的列表，路由引擎根据 url 调用controller.init() 方法。

myApp = {};

(function(app, $) {
    var defaultController = "Default";

    var routes = [];
    routes["Default"] = defaultController;

    var currentControllerFromUrl = function() {
        // match urls in the form ../mvc/controllerName.mvc/...
        var re = new RegExp(/\/(\w*)/i);
        var m = re.exec(document.location);
        if (m == null) {
            return null;
        }
        else {
            return m[1];
        }
    };

    var currentActionFromUrl = function() {
        // match urls in the form ../mvc/controllerName.mvc/action/
        var re = new RegExp(/\/mvc\/\w*.mvc\/(\w*)(\/|\b)/i);
        var m = re.exec(document.location);
        if (m == null) {
            return null;
        }
        else {
            return m[1].toLowerCase();
        }
    };

    var currentWebPageFromUrl = function() {
        var re = new RegExp(/\/(\w*).html/i);
        var m = re.exec(document.location);
        if (m == null) {
            return null;
        }
        else {
            return m[1];
        }
    };

    var populateControllerRoutes = function(app) {
        for (var ctl in app.controllers) {
            routes[ctl] = ctl;
        }
    };


    var theApp = {
        controllers: {},
        run: function() {
            this.initController();
        },
        initController: function() {
            var urlController = currentWebPageFromUrl();
            // populate routes
            populateControllerRoutes(this);
            if (urlController && routes[urlController]) {

                // load the correct controller into the activeController
                this.controller = new this.controllers[routes[urlController]]();
                this.controller.init();

                var action = currentActionFromUrl() || "index";
                if (action && this.controller[action + "Action"] !== undefined)
                    this.controller[action + "Action"]();

            }
        }

    };

    window.myApp = $.extend(app, theApp);
})(myApp || {}, jQuery);


// and somewhere else
(function($) {
    myApp.controllers.default = function() {
        this.init = function() {
        };

        this.indexAction = function() {
            // index action init
            $("#res").text("hi there!");
        }
    }
})(jQuery);

$(function() {
    myApp.run();
});

通过这种方法，控制器函数不需要位于一个文件中，因此在开发过程中，您可以将控制器函数保存在单独的文件中，组织良好，并作为构建/部署的一部分，将它们组合起来并将它们全部最小化到一个 JS 文件中。