首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >附加JavaScript事件(对于大型web项目)的最佳实践是什么?

附加JavaScript事件(对于大型web项目)的最佳实践是什么?
EN

Stack Overflow用户
提问于 2011-10-18 12:12:32
回答 4查看 274关注 0票数 1

目前,我正在整个项目中使用一个.js文件(加上包含的库)。只是偶尔我会将文件分割成多个文件(即前端和后端部分)。在文件中,我使用jQuery选择器在单个ready事件处理程序中附加事件(和其他功能):

代码语言:javascript
代码运行次数:0
运行
复制
$(document).ready(function() {

   $('#an_element_on_homepage').click(function() {
      // do something
   });

   // ...
   // A lot of similar code here
   // ...

   $('.elements_on_homepage_and_contact_page').click(function() {
      // do something
   });
});

这是完全可行的,但是在一个更大的项目上,可能会有大量不必要的代码执行,因为某些事件只需要在特定的页面上执行,或者在不同的页面之间可能会发生id/class冲突。避免问题并仍然保持JavaScript和HTML代码易于维护性的最佳实践是什么?

我能想到两种解决方案:

  1. 将.js文件拆分为多个文件,并在每个页面上只选择所需的文件。但是,很难正确分发事件附件,并且可能会在客户端缓存脚本时出现问题。
  2. 将事件附件包装在函数中,并仅在需要时从HTML代码中调用它们。类似于: 函数attachClickOnElementOnHomepage() {$(‘#an_element_on_homepage’).click(函数(){ // do });} 然后在HTML中:

你能想出另一个/更好的解决办法吗?

EN

回答 4

Stack Overflow用户

回答已采纳

发布于 2011-10-18 12:39:52

正如您所说,解决方案1对于HTTP往返并不特别有效,但是如果您正在开发一个内部应用程序,您可能会选择忽略这个问题。

解决方案2看起来就像内联事件处理程序注册的一种迂回方式。

我使用的模式是一个JS文件,它有我想要作为一个特定于项目的“库”重用的任何代码--很少有足够的代码来分割它。并且每个服务器端代码单元都有一个JS文件-- MVC控制器、独立的Wicket控件--只实现特定于页面的行为,或者连接到可重用的代码。此文件通常以控制器的名称命名。

优点:

  • 有明确的关联JS行为会发生在哪里
  • 您可以删除页面中的内联Javascript --我不喜欢它,因为它使设置JS断点成为一项烦琐的工作。
  • 如果将JS库组合在一起,则在任何给定页上只包含2-3个脚本文件,其中没有在每个页面上重用其中的一个脚本文件。
  • 冲突的风险较小,因为选择器太宽,可能匹配不同页面上的元素,而不是预期的,并将意外的行为附加到它们上。
  • JS代码仍然相当简单--包括在页面中的脚本。不需要设计模块结构。

一个可能的缺点是某些代码可能在特定于页面的脚本之间重复,但这是将机制与策略分离的成本。对于设置jQuery UI按钮或选择的选择框等琐碎代码来说,这种情况大多发生在我身上;因为它们共享一个共同的主题,所以我的解决方案是将它们合并到一个单独的JS文件中,以进行"ui增强“。

您还可以考虑将细粒度、可维护的javascripts合并为更容易加载的工具,作为构建步骤;对于性能提高很重要的大型项目,维护这一点的工作可能不会太费劲。具体情况取决于您的其他工具是什么,回退解决方案可以像调用jsmin命令行版本的calls脚本一样简单。

票数 1
EN

Stack Overflow用户

发布于 2011-10-18 12:52:35

这是一个经典的代码结构问题。

将视图分离为小部件(比如插件)。如果应用程序中有模型,请将它们的声明从主onReady事件中分离出来,在模型中触发事件,并允许UI小部件与模型交互。

大多数情况下,分离您的文件以便:*对您的工作有一个更清晰的视图*分离的关注点,并且只公开所需的内容。

例如,考虑到与文件中的位置无关的内容。如果您使用没有在文件中声明的变量,请考虑您已经破坏了关注点分离的原则。

例如:

代码语言:javascript
代码运行次数:0
运行
复制
var myModel = function () {/**...**/};
var myModel.prototype.save = function () {/**...**/}

var myUIElt = function (model) {
  this.render(); //Do whatever required
  this.bind('onchange', function() { model.update();});
};

这样,在您的onReady回调中,您将拥有:

代码语言:javascript
代码运行次数:0
运行
复制
$(function() { var elt = new myUIElt(); }); // Much cleaner, huh ? ;)

在现实世界中,事情可能会更复杂一些,但主要的想法是上面的想法。

不要犹豫想要更多的细节,

HTH,

票数 2
EN

Stack Overflow用户

发布于 2011-10-18 12:44:36

您可以在模块中组织代码,并在每个模块中定义init函数。

然后,只有在当前加载的页面上存在需要的元素时,才调用moduleName.init()函数

就像这样

代码语言:javascript
代码运行次数:0
运行
复制
var homePageModule = {
  init: function() {
    $('#an_element_on_homepage').click(function() {

    });
    anotherFunction();

  },
  anotherFunction: function() {
    //do something
  }
}; 
   //check for elements
    $(function() { 
      if ($('#an_element_on_homepage').length) {
        homePageModule.init();
      }
    });

P.S.:或者使用类并相应地实例化它们以使元素存在

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/7807012

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档