Question

我已经在JQuery中启动了项目。我正在使用很多＆＃34;点击＆＃34;和＆＃34; onchange＆＃34;我项目中的事件。最初它没关系（当没有更多的代码行）但是在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-structure严重混合，你只需要一种伪类或构造函数......

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

决定时，请从网上提取几个例子。

JQuery - 正确有效地使用事件

1 个答案: