有没有更好的方法来组织JavaScript的单个文件与多个页面的特定代码？

Question

我有几个网站，我使用相对较少的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 
    } 
}); 

凡是是在多个页面上获取取到图书馆使用，但对于网页具体的东西，这是我的模式一直在跟随。有没有更好的方法，或者这是将JS保存在一个文件中并将其加载到多个页面上的可接受实践？

Answer 1

我很想知道其他人对此的看法，但是我所做的是为每个页面组织和执行正确的一组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文件。

Answer 2

下面是减少代码冗余的一种方法：

$(document).ready(function(){ 
    function page1() { 
    var usefulPage1Function = function(){}; //blah 
    $("a").click(function(){}); //etc 
    } 

    function page2() { 
    $(".someClass").fadeIn().click(function(){}); //etc 
    } 

    var pages = [ 
    [ '#id_thing_on_1', page1 ], 
    [ '#id_of_page_2', page2 ] 
    ]; 

    for (var i = 0; i < pages.length; i++) 
    if ($(pages[i][0]).length === 1) 
     pages[i][1](); 
}); 

Answer 3

有你不需要加载JS成本。但是这取决于你网站的使用模式。例如，如果大多数页面加载发生在主页上，那么将您的js合并并缩小为全部可能是合理的。如果独一无二的代码保持较小，那么您的方法就很完美。这说明了代码优化时松散结构的自然趋势。

Answer 4

你能告诉我们为什么你想把不同的页面特定的代码放到一个单一的文件中，因为你100％确定这些代码不会被执行，实际上你花时间写代码/控制器来避免那些不相关的代码被执行。

还有多少页你在说什么，如果它只有2页，那么你应该没问题。但是，如果50页？如果20页使用相同的代码，你的控制器会变成什么样子？还是你要复制同一段代码20次？然而，在一个缩小的单个文件中使所有代码的加载速度好于浏览器启动多个下载的速度。您应该在网络VS编码实践之间取得平衡。

我倾向于不同的页面特定的代码为不同的页面js文件，所以不相关的代码不会被加载。

任何常见的代码，我把它放到特定的lib js文件中，所以大部分不相关的lib代码都不会被加载。

例如，

Search page will have: 
    search_page.js 
    util.js 
    form_validation.js 

Result page will have 
    result_page.js 
    util.js 
    lib_map.js 

只是我的$ 0.02