1

JavaScript/jQuery の設計パターンについてサポートが必要です。以下は、私が行っていることを示す HTML と JS コードの一部です。さらに、これらの例から推定された質問を以下に示します。

HTMLトラバース シナリオを作成するためにネストされた div を持つ もの:

    <div class="box">
        BOX 1
        <div class="nested-boxes">
            <div class="box">
                BOX 1-1
                <div class="nested-boxes">
                    <div class="box">
                        BOX 1-1-1
                    </div>
                </div>
            </div>
            <div class="box">
                BOX 1-2
            </div>
        </div>
    </div>

Javacriptコードは次のとおりです。

// First I declare functions that I want to have available globally
// under a common namespace. Those functions reproduce that namespace as
// a prefix in their name to avoid conflict.
$.extend(true, window, {
    MyFunctions: {
        Boxes: {
            getBox: myfunctions_boxes_getBox
        },
        Circles: {
            // getCircle: myfunctions_circle_getCircle
        }
        // Squares....
    }
});

// I write functions which I want to use on jQuery objects as so:
function myfunctions_boxes_getNestedBoxes() {
    return this.find('.nested-boxes').first().children('.box');
}

function myfunctions_boxes_showLabel() {
    return this.find('span').first().text();   
}

// I then add those functions as new methods to my jQuery objects:
function myfunctions_boxes_getBox($element) {
    var $box = $element.closest('.box');
    $box.getParentBox = myfunctions_boxes_getParentBox;
    $box.getNestedBoxes = myfunctions_boxes_getNestedBoxes;
    $box.showLabel = myfunctions_boxes_showLabel;
    console.log('getBox',$box);
    return $box;
}

// Traversing functions call each other to make sure I retrieve a jQuery object with all
// my custom methods:
function myfunctions_boxes_getParentBox() {
    var $parent_box = myfunctions_boxes_getBox(this.closest('.box').parents('.box').first());
    console.log('getParentBox',$parent_box);
    return $parent_box;
}

これは私のコードがどのように見えるかです：

// I first need to call a global function:
$box = MyFunctions.Boxes.getBox($('#box-1-1'));

// Then I can start chaining my methods
$box.getParentBox().getNestedBoxes().each(function(){
    // however as soon as I use a native jQuery method, I end up with
    // a jQuery object which doesn't have my custom methods ans I need
    // to use a global function again.
    console.log($(this), MyFunctions.Boxes.getBox($(this)).showLabel());
});

このjsFiddleコードの動作を示す (私が何をしているかを理解するのに役立つはずです) が利用可能です。

Q1myfunctions_boxes_ :サード パーティ コードとの競合を回避しながら、名前のプレフィックスとして名前空間を繰り返さずに関数を作成するにはどうすればよいですか (例: )。

getParentBoxjQuery オブジェクト (例:など)のカスタム メソッドとして使用する新しい関数を作成するたびにgetNestedBoxes、関数の 1 つ (つまりmyfunctions_boxes_getBox)内で手動でマップする必要があります。

Q2 : カスタム メソッドを自動的にマップする方法はありますか?

以下の質問は上記の質問に関連している可能性がありますが、まったく同じではないと思うので、個別に質問することをお勧めします

ネイティブ jQuery メソッド (each上記の例など) を使用するとすぐに、カスタム メソッドを持たない jQuery オブジェクトになってしまい、グローバル関数の 1 つを再度呼び出して同じオブジェクトを取得する必要がありますが、カスタム メソッドを使用します。それに付随するメソッド。

Q3 : グローバル関数用の jQuery プラグインを作成して、コードのオブジェクト指向の性質を維持することは理にかなっていますか (以下の例を参照)。

// plugin declaration (the getBox function should be modified to make use of this)
jQuery.fn.getBox = MyFunctions.Boxes.getBox
// then my code becomes cleaner:
$('#box-1-1').getBox().getParentBox().getNestedBoxes().each(function(){
   console.log($(this).getBox().showLabel());
});
4

1 に答える 1

1

Q1：サードパーティのコードとの競合を避けながら、名前空間（myfunctions_boxes_など）のプレフィックスとして名前空間を繰り返さなくても、関数を作成するにはどうすればよいですか？

現在の問題は、関数がグローバルであるため、名前の競合を防ぐために名前空間を名前に追加する必要があることです（ただし、これでも名前の衝突からの安全性は保証されません）。あなたがすべきことは、JavaScriptコード全体を自己呼び出し関数でラップすることです。次に例を示します。

(function {
    $.extend(true, window, {
        MyFunctions: {
            Boxes: {
                getBox: getBox
            }
        }
    });

    function getBox($element) {
        // Do something.
        return $element;
    }
}());

getBox関数はプライベートになり、サードパーティのライブラリなどとの名前の衝突について心配する必要はありません。

（今のところ最初の質問にのみ取り組んでいます）

于 2012-08-28T10:46:47.680 に答える