10

説明

設計上、ほとんどのjqueryコードは多くの密結合につながります。たとえば、セレクターはhtmlの特定の構造を想定しています。

var mySubnav = $("#navigation a.sub-menu");

対応するhtmlが変更された場合、何らかの理由で、 

<a class="subMenu" .... </a>

機能が壊れています。

質問

  • 密結合を処理するための最良の方法は何ですか？
  • それを緩めるためにどのようなアプローチがありますか？

回答、アプローチ

  • htmlカスタムデータ属性を使用して、cssをjsロジックから分離します。data-submenu="true"たとえば、htmlを追加しvar mySubnav = $("[data-submenu]");、js側で使用します。
  • 堅実なテスト環境を実装する
  • 最も具体性の低いセレクターを使用して、可能な限り緩く結合し$("a.sub-menu')ます。も参照してください
  • （1）静的DOM要素への参照を事前に取得し、（2）セレクター文字列を1つの場所（コードの上部）に格納することにより、jQueryコードの本体からCSSセレクターを表す実際の文字列リテラルを削除します。
  • ビューを介してJavaScriptをDOMから分離するBackboneなどのJavaScriptフレームワークを使用します
  • イベント管理によるカップリングに関してデリゲートとライブを使用する
4

7 に答える 7

6

これは一般的な答えではないかもしれませんが...テスト、テスト、テスト。JQueryとJavascriptは一般的に緊密に結合されており、それには正当な理由があります。これらはブラウザで実行されるコードであるため、パフォーマンスを比較的高速に保つ必要があります。したがって、より緩い結合を可能にする間接層を注入すると、パフォーマンスが低下する可能性があります。また、通常、記述されたJQuery / Javascriptコードとそれらが記述されたページの間には密接な組み合わせがあるため、少しやり過ぎになる可能性があります。これは、Javascriptの歴史的な発展の成果物ですが、それが現状です。そのため、密結合はかなり「正常」です。

この密結合に対処する方法は、他の密結合と同様に、結合の障害をカバーするための適切なテストが実施されていることを確認することです。テストは、結合が適切であることを保証することができ、とにかく期待する機能を保証するための本当に最良の方法です。

于 2011-07-25T18:29:08.133 に答える
3

1つのオプションは、 BackboneなどのJavascriptフレームワークを使用することです。これは、JavascriptをDOM構造から切り離すのに役立つビューの概念を提供します。たとえば、コメントビューを作成して、次のdivに割り当てることができます。

<div class="comment">
    <span class="title"></span>
    <p class="body"></p>
</div>

comment次に、 divに関連するビューの要素にアクセスできます。

var title = this.$(".title");

これにより、commentdivの内部が同じである限り、divの外部でDOM構造を簡単に変更できcommentます。

于 2011-07-25T18:36:51.727 に答える
2

UIフックにカスタムプレフィックスクラスを使用するui-specificGuy

提供されたHTML

<div class="container grid8">
    <ul class="ul1 horizontal">
        <li>List Item 1</li>
        <li>List Item 2</li>
    </ul>
</div>

悪い-スタイル目的のクラス/フックを使用する

$('.container.grid8').stuff();
$('.ul1.horizontal').moreStuff();

HTMLの調整

<div class="container grid8 ui-specificContainer">
    <ul class="ul1 horizontal ui-specificList">
        <li>List Item 1</li>
        <li>List Item 2</li>
    </ul>
</div>

良い-あなた自身の目的のクラス/フックを使用する

$('.ui-specificContainer').stuff();
$('.ui-specificList').moreStuff();

必要なだけ具体的にする

これがあなたの目標を達成するかどうか。

$('.ui-targetedElement')

では、なぜこのようなセレクターがあるのでしょうか。

$('ul > li a.ui-targetedElement')

これは、構築している機能に不要なDOM構造の依存関係を導入するだけであり、この時点で独自のフック（プレフィックス付きクラス）を提供する必要があるため、この点でプロアクティブにできるはずです。

最終的には、DOMとスクリプトの緊密な結合は、それらがどのように連携するかという性質上、避けられない場合があります。

記事全文

于 2011-07-25T18:28:59.490 に答える
2

イベント管理に関して話している場合は、dom構造に緊密に結合されていないデリゲートとライブを最大限に活用してください。以下のURLをご覧ください

ライブ -http://api.jquery.com/live/

委任 -http://api.jquery.com/delegate/

于 2011-07-25T18:31:01.627 に答える
2

私の提案は次のとおりです。

  1. DOM対応の静的DOM要素の参照を取得し、それらをオブジェクトの変数やプロパティなどに配置します。

  2. クラス名をオブジェクト内に格納します（または、それらの名前（文字列）が1つの場所にある限り、複数のオブジェクトなど）

次に、これを行うことができます：

var mySubnav = $('a.' + C.submenu, navigation);

ここで、は要素navigationへの参照であり、はクラス名オブジェクトであり、プロパティは文字列です。#navigationCsubmenu"sub-menu"

これで、HTMLコードでクラス名を変更するときに、Cオブジェクトを更新するだけで済みます。

アイデアは、（1）静的DOM要素への参照を事前に取得し、（2）セレクター文字列を1つの場所（コード）。

于 2011-07-25T18:35:39.920 に答える
1

HTMLが変更された場合、すべての賭けは無効になります。

そして、あなたが持っているのは密結合ではありません。コードが機能するために不可欠です。

たとえば、これは私が密結合と見なすものです。

<a class="subMenu" onclick="doSomething()"> .... </a>

緩いバージョンは次のようになります。

$("#navigation a.sub-menu').click(function(){
   //do something
});
于 2011-07-25T18:27:04.887 に答える
1

html5データ属性を使用してjavascriptセレクターを実行するのはどうですか？

<a data-submenu = "true" .... </a>

var mySubnav = $（ "[data-submenu]"）;

javascriptがhtmlで動作していることを本当に明確にします。

于 2011-08-26T17:12:35.863 に答える