1

jQuery チェーンがどのように機能するかを理解できません。

jQuery("div").attr("id", "_id")
    .hide()
    .show();

チェーンのようなことをしましたが、jQuery が使用するロジックと同じかどうかはわかりません。

var fun = (function (parma) {
return function () {
    return {
        start: function () {
            console.log("start");
            return this;
        },

        mid: function () {
            console.log("mid");
            return this;
        },

        last: function () {
            console.log("last");
            return this;
        }
    }
}

})();

// Working
fun().start()
    .mid()
    .last();
4

5 に答える 5

5

関数の戻り値がメソッドを持つオブジェクトである場合、そのメソッドをすぐに呼び出すことができます。そのような単純な。

を返しているのでthis、前のメソッドが呼び出されたのと同じオブジェクトを返しています。つまり、すべて同じメソッドを持つオブジェクトを返しているということです。

次のように考えてください。

var f = {
    foo: function() {
             console.log("foo");
             return b;
         }
};

var b = {
    bar: function() {
             console.log("bar");
             return f;
         } 
};

ここに 2 つのオブジェクトがあります。

  • オブジェクトには、オブジェクトを返すfメソッドが呼び出されます。foob
  • オブジェクトには、オブジェクトを返すbメソッドが呼び出されます。barf

このため、 を呼び出した後に を呼び出すfooことができbar、その逆も可能です。

f.foo().bar().foo().bar(); // etc

しかし、fは持っていないし、持っbarてbいないのでfoo、同じメソッドを 2 回呼び出すことはできません。

しかし、両方のメソッドを持つ 1 つのオブジェクトしかなく、両方のメソッドが常に同じ元のオブジェクトを返すとしたらどうでしょうか?

var fb = {
    foo: function() {
             console.log("foo");
             return fb;
         },
    bar: function() {
             console.log("bar");
             return fb;
         }
};

fooとの両方のメソッドを持つオブジェクトを常に返すbarようになったので、どちらのメソッドも呼び出すことができます。

fb.foo().bar().bar().bar().foo().foo().bar();

したがって、唯一の本当の違いは、fb代わりに を返しthisていることですが、それらは同じオブジェクトであるため、問題ではありません。上記のコードで実行できreturn this;、同じように動作します。

オブジェクトの複数のインスタンスを作成したい場合は問題になりますが、それはオブジェクト指向の手法の問題であり、メソッド チェーンの問題ではありません。

于 2012-09-25T14:54:17.007 に答える
3

returnon every 関数は jQuery オブジェクトです。各 jQuery オブジェクトには、and などのすべての関数への参照があるshow/hideため、単純に次のように記述できます。

jQuery("#myDiv")         //returns a jQuery object 
    .attr("id", "_id")   //sets the ID and returns the jQuery object
    .hide()              //Hides the element with ID myDiv and returns jQuery object
    .show();             //show the element with ID myDiv and returns jQuery object
于 2012-09-25T14:51:39.820 に答える
2

次のように考えてください。

var myLib = {
    foo: function() {
        alert("FOO!");
        return this;
    },
    bar: function() {
        alert("BAR!");
        return this;
    }
}

myLib.foo().bar();

jQuery はこのようにはしませんが、これはチェーン機能を取得する 1 つの方法です。この特定のものは、現在のオブジェクトに関する情報を保存しません。

jQuery オブジェクトには、変更された jquery オブジェクトを返すメソッドがあり、さらに多くのメソッドを呼び出すことができます。

于 2012-09-25T14:55:26.147 に答える
2

私の記憶が正しければ、jQuery は、1 つの例外を除いて、プロトタイプ内で連鎖するための古典的なアプローチを使用します。プロトタイプにはenhancedコンストラクターもありinitます。以下に簡単なパターンを示します。

function myQuery(elem){
   return new myQuery.prototype.init(elem);
};

myQuery.prototype.init = function(elem) { // the constructor "enhanced"
    this.elem = elem;
};

// now copy the myQuery prototypes into init.prototype
myQuery.prototype.init.prototype = myQuery.prototype;

// here comes the chainable prototypes:

myQuery.prototype.start = function() {
    this.elem.className = 'start';
    return this; // returning the instance allows further chaining
};

myQuery.prototype.finish = function() {
    this.elem.className = 'finish';
    return this;
};

// now use it
myQuery(document.body).start().finish();

各インスタンスのプロトタイプ メソッドを再利用できるため、プロトタイプのチェーンはより効果的です。jQuery はドキュメント内で何度も初期化されることが多く、そのたびに連鎖可能なすべてのメソッドを含む新しいオブジェクトを作成すると、不要なオーバーヘッドが追加され、リークが発生する可能性があります。

于 2012-09-25T15:05:39.093 に答える
1

ほとんどすべての jQuery 関数は、jQuery オブジェクトも返します。その結果、返された個々のオブジェクトに対して jQuery 関数を実行できます。

チェーン コードを記述することで、時間を節約できるだけでなく、パフォーマンスも向上します。コンピューターに特定のノードをシークして使用するよう強制することなく、返されたオブジェクトを操作する方が、別のインスタンスを開始するよりもはるかに効率的です。

于 2012-09-25T14:51:16.933 に答える