javascript - JQuery - 正确有效地使用事件

Question

我已经开始使用 JQuery 项目。我在我的项目中使用了很多“click”和“onchange”事件。最初还可以(当没有更多代码行时)，但在 500-600 行代码之后，我的源代码变得非常困惑，因为我的代码中到处都有很多 click 和 onchange 事件。我不知道如何处理这个问题，如何正确使用click和onchange事件，高效而不凌乱？此类项目有什么框架或特殊模式吗？提前致谢。

Answer 1

当附加大量事件处理程序时，首先，您应该使您的代码易于理解和可读。遵循DRY 原则。您不需要重复将事件附加到一个 jQuery 选择器:

$(".divname").on({
    mouseenter: function() {
        // Handle mouseenter...
    },
    mouseleave: function() {
        // Handle mouseleave...
    },
    click: function() {
        // Handle click...
    }
}, "a");

接下来，请注意任何功能重复。例如，当多个按钮/链接执行相同或接近相同的操作时，应将该操作/功能声明为非匿名以可重用:

function editTableColumn() { ... }
$("#element1, #element2").on("click", editTableColumn);

或区分参数:

function editTableColumn(param1) { if (param1 == ) ... }
  $("#element1").on("click", function() {
  var param1 = "one";
  editTableColumn(param1);
});
$("#element2").on("click", function() {
  var param1 = "two";
  editTableColumn(param1);
});

jQuery 中的相同想法可以通过自定义插件来实现:http://learn.jquery.com/plugins/basic-plugin-creation/

如果 DOM 操作与 js 结构严重混合，您只需要一种伪类或构造函数...

实际上，我的建议是使用 JS 框架来实现大量交互:EmberJS、AngularJS 等。例如，使用最后一个，您将完成任务(显示/隐藏/排序数据并进行其他 DOM 操作)，即使没有 jQuery，代码也少得多。在这里你可以找到 Angular 默认 orderBy 过滤器的几个示例:https://docs.angularjs.org/api/ng/filter/orderBy

在做出决定时，只需从网络上选取一些示例即可。