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 構造を使用できるようにする必要があるため、人々がこれを行っていることは理解していますが、Web サイトのビュー全体でプレゼンテーション、ロジック、および構成が混在することになります。また、そこにあるほぼすべてのデバッガーでロジックをデバッグするのが非常に難しくなります。

だから、私は別の .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

このアプローチには、私が知っている欠点が 1 つあります。のイベントパフォーマンス セクションに記載されてい.on()ます。

ドキュメント ツリーの最上部近くに委任されたイベント ハンドラを多数アタッチすると、パフォーマンスが低下する可能性があります。イベントが発生するたびに、jQuery は、そのタイプのすべての添付イベントのすべてのセレクターを、イベント ターゲットからドキュメントの先頭までのパス内のすべての要素と比較する必要があります。最高のパフォーマンスを得るには、委任されたイベントをターゲット要素にできるだけ近いドキュメントの場所に添付します。大きなドキュメントの委任イベントにdocumentまたはdocument.bodyを過度に使用しないでください。

したがって、すべてのイベントを にバインドするとdocument、パフォーマンスが低下します。

また、 、 、 など、このアプローチでは機能しないものがあります。loadscrollerror

于 2013-02-28T06:11:18.270 に答える
0

これは私にエンジニアリングを叫びます。document.readyのコードを回避し、ビューのビューロジックを回避するために、さらに複雑になります。

あなたのアプローチはドキュメントに直接バインドし、クリックされたものについてdomをチェックします。次に、クリックされたものに対して2番目のイベントを発生させます。これは、ロジックが存在する場所です。

これは、1つまたは2つの要素で問題ありません。それはあなたの典型的なアプリではありません。何か違うことをする必要がある5つの要素があるとどうなりますか？10はどうですか？多分15？

「単純な」イベントハンドラーは、すばらしい大きなスイッチになります（さらに悪いことに、ifsとネストされたifs）。突然新しいハンドラーを追加するのはそれほど簡単ではありません。また、既存のイベントを変更することもありません。

探している分離を提供するフレームワークを調べる方がはるかに良いでしょう。あなたのコードを整理するのを「助ける」ためにこのような何かを靴べらにしようとすると、あなたを噛むために戻ってきます。コードの最も複雑な部分は、エンジニアが「シンプル」で「より優れた」「将来性のある」ものにすることから生まれています。

これはあなたやあなたの考えをノックすることではありません。あなたには正しい考えがあります：責任の分離は良いことです。私はあなたのアプローチが最善だとは思いません。

別の投稿者が回答したように、Angularとバックボーンおよび残り火（およびその他多数）は、必要なことを達成するための手段を提供します。さらに、選択したライブラリを維持する必要はありません:)

于 2013-02-28T06:31:57.467 に答える
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 に答える