Question

我已经看过很多像这样的jQuery代码，不用说我不喜欢它：

<div id="myDiv">
    <a class="clickable" href="#">Click Me</a>
    <a class="clickable" href="#">Click Me</a>
    <a class="clickable" href="#">Click Me</a>
    <a class="clickable" href="#">Click Me</a>
</div>

<script>
    $(document).ready(function(){
        $('clickable').click(function(){
            // Do some stuff...
        });
    });
</script>

我意识到人们这样做是因为上面的事件绑定和处理要求html结构在页面上可用，但它会导致在网站的各个视图中混合表示，逻辑和配置。此外，它几乎使用任何调试器来调试逻辑非常困难。

所以，我开始在一个单独的.js文件(fiddle here)上开始编码：

// BEGIN: Event Handlers
    var onLoad = function(){
        $('.clickable').data('clicked', false);
    };
    var onMyDivClick = function(){
        var clicked = $(this).data('clicked');
        if (clicked) {
            $(this).trigger('myCustomEvent');
        } else {
            alert('you clicked me');
            $(this).data('clicked', true);
        }
    };
    var onMyCustomEvent = function(){
        $(this).css('color', 'dimGray');
        alert('please don\'t click me again');
    };
// END: Event Handlers

// BEGIN: Event Binding
    $(window).on('load', onLoad);
    $(document).on('click', '.clickable', onMyDivClick);
    $(document).on('myCustomEvent', '.clickable', onMyCustomEvent);
// END: Event Binding

现在，我不需要关心页面上的结构。我不需要将所有内容都包含在$(document).ready(function(){});中。我不需要关心结构是否会加载ajax。

问题1 该方法有任何缺点吗？到目前为止，我还没有找到任何。但在重构我们网站上的大部分代码之前，我想听听可能的警告。

问题2 如何使用最新的jQuery功能进一步采用这种方法？

Answer 1

我对这种方法有一个缺点。它写在.on()的活动效果部分。

在文档树顶部附近附加许多委托事件处理程序会降低性能。每次事件发生时，jQuery必须将该类型的所有附加事件的所有选择器与从事件目标到文档顶部的路径中的每个元素进行比较。为获得最佳性能，请将文档位置的委派事件尽可能靠近目标元素。避免对大型文档上的委派事件过度使用文档或 document.body 。

因此，在将所有事件绑定到document后，情况会更糟。

在附加说明中，有些内容无法使用此方法，例如load，scroll和error。

Answer 2

查看框架，他们已经为您完成了锅炉板工作。到目前为止我只使用了淘汰赛，但我会链接到其他人。

淘汰赛非常适合数据/事件绑定 - http://knockoutjs.com/
backbone - http://backbonejs.org/
ember js - http://emberjs.com/
angular js - http://angularjs.org/

淘汰赛中的“Hello World”：

http://knockoutjs.com/examples/helloWorld.html

<p>First name: <input data-bind="value: firstName" /></p>
<p>Last name: <input data-bind="value: lastName" /></p>
<h2>Hello, <span data-bind="text: fullName"> </span>!</h2>

// Here's my data model
var ViewModel = function(first, last) {
    this.firstName = ko.observable(first);
    this.lastName = ko.observable(last);
    this.fullName = ko.computed(function() {
        // Knockout tracks dependencies automatically. It knows that fullName depends on firstName and lastName, because these get called when evaluating fullName.
        return this.firstName() + " " + this.lastName();
    }, this);
};

ko.applyBindings(new ViewModel("Planet", "Earth")); // This makes Knockout get to work

Answer 3

这让我对工程大惊小怪。为了避免document.ready中的代码，并避免视图中的视图逻辑，您会引入更多的复杂性。

您的方法直接绑定到文档，然后检查dom是否有点击的内容。然后，您可以针对所点击的内容触发第二个事件，这是您的逻辑所在。

对于一两个元素来说这很好。这不是你的典型应用程序。当你有5个元素都需要做一些不同的事情时会发生什么？ 10点怎么样？也许15？

你的“简单”事件处理程序将成为一个很好的大转换（或者更糟糕的是，ifs和嵌套ifs）。突然添加一个新的处理程序并不容易。也没有改变现有的事件。

你可以更好地寻找一个能够为你提供所需分离的框架。尝试用这样的方式来“帮助”组织你的代码将会回来咬你。代码中最复杂的问题源于工程师，使其“简单”，“更好”和“面向未来”。

这不是为了敲你或你的想法。你有正确的想法：责任分离是一件好事。我只是觉得你的方法不是最好的。

正如另一个帖子所回答的那样，棱角分明，骨干和余烬（还有更多）提供了完成你想要的东西的方法。此外，您无需维护您选择的库：）

jQuery事件绑定和处理

3 个答案: