有没有更好的方法在单个文件中组织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 } }); 

在多个页面上使用的任何内容都会被带入库中，但对于页面特定的内容，这是我一直关注的模式。 有没有更好的方法，或者这是一个可接受的做法，将您的JS保存在一个文件中并将其加载到多个页面上？

Answer 1

我有兴趣了解其他人对此的看法，但我为每个页面组织并执行正确的JS代码集，就是有一种路由引擎作为我的js app的基础，我添加了一个’控制器’列出每个部分自己添加它并且路由引擎基于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(); }); 

使用这种方法，控制器function不需要在一个文件中，因此在开发期间，您可以将控制器function保存在组织良好的单独文件中，并作为构建/部署的一部分，将它们组合在一起并将它们全部最小化为一个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美元