5

我见过很多这样的 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 文件上编码（这里是小提琴）：

// 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 功能进一步采用这种方法？

4

3 回答 3

1

我知道这种方法有一个缺点。它写在 中的事件性能 部分.on()。

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

因此，在将所有事件绑定到 之后document，它的性能会更差。

并且在附加说明中，有些东西不能用这种方法工作，例如load,scroll和error。

于 2013-02-28T06:11:18.270 回答
0

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

淘汰赛中的“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
于 2013-02-28T06:04:20.057 回答
0

这对我来说是对工程的尖叫。为了避免 document.ready 中的代码，并避免视图中的视图逻辑，您引入了更多的复杂性。

您的方法直接绑定到文档，然后检查 dom 中的点击内容。然后，您为单击的内容触发第二个事件，这就是您的逻辑所在的位置。

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

您的“简单”事件处理程序将成为一个不错的大开关（或更糟糕的是，ifs 和嵌套 ifs）。突然添加一个新的处理程序并不是那么容易。也不会改变现有的事件。

你最好寻找一个为你提供你正在寻找的分离的框架。试图用类似这样的东西来“帮助”组织你的代码会回来咬你。代码中的大多数复杂性源于工程师，使其“简单”、“更好”和“面向未来”。

这不是要打击你或你的想法。你有正确的想法：责任分离是一件好事。我只是不认为你的方法是最好的。

正如另一个帖子所回答的那样，角度和主干以及余烬（以及更多）提供了实现您想要的方法。另外，您不必维护您选择的任何库:)

于 2013-02-28T06:31:57.467 回答