0

例として、jQuery1.8のスクリーンショットを次に示します。 ここに画像の説明を入力してください

jQueryソースコードの観点からなぜこのようなことができるのですか？addClassjqueryのメソッドはありますか？しかし、私が見たのはjQuery.fn.extendからのものでした。

$("xid").addClass("xxx");

私はJavaScriptに比較的慣れておらず、 .htmlにメソッドを直接追加するような非常に単純なコードを作成しました。

 <html>
    <script>
        function m() {
            alert("simple");
        }
    </script>
 </html>

特にExtJs、jQueryのようなJavaScriptフレームワークでは、これに関する多くの相対的なドキュメントを検索したものの、複雑な構文を理解できませんでしたが、それでも明確な理解はありません。特別なJavaScriptの本を真剣に読むのに時間を費やす必要があるかもしれませんが、今はその答えを知りたいと思います。

ありがとう。

4

2 に答える 2

2

この質問にはいくつかの層があります。1つ目はオブジェクトリテラルです。Javascriptを使用すると、オブジェクトリテラル構文を使用してオブジェクトを宣言できます（文字列に格納/転送される構文であるJSONについて聞いたことがあるかもしれません）。構文は次のとおりです。

var obj = { key1 : "value1", key2 : "value2" };

これを書くためのより構造化された/読みやすい方法は次のとおりです。

var obj = {
  key1 : "value1",
  key2 : "value2"
};

上記のコードは、次のコードとまったく同じです。

var obj = new Object();
obj.key1 = "value1";
obj.key2 = "value2";

だからあなたが行に見ているもの：

addClass : function () {

オブジェクトリテラル宣言の一部にすぎません。基本的に、コードはこれを実行しています。

var tmp = new Object();
// ...
tmp.addClass = function () { /* ... */ };
// ...
jQuery.fn.extend(tmp).

の呼び出しでオブジェクトリテラルを直接宣言することを除いてextend()、一時変数を使用する必要はありません。

2つ目は、JavaScriptの関数は特別ではないということです。つまり、関数は他のすべてと同じように扱われます：文字列、数値、配列、オブジェクト。実際、JavaScriptでは、文字列、数値、配列、関数はすべてオブジェクトです。したがって、変数に関数を割り当てることができます。

var n = function () {alert("Hello World");}

したがって、魔法のようなことは何も起こりません。これは、メソッドに引数として渡される関数のコレクションを含むオブジェクトリテラル構文で匿名オブジェクトを作成するだけですextend。

それが構文の説明です。つまり、JavaScript自体で何が起こっているのかということです。

jQueryコードを見ていることはわかっています。だから、それは私たちに何が起こっているかについてのより多くの手がかりを与えてくれます。まず最初に：jQuery.fnは単にへのポインタjQuery.prototypeです。そしてjQueryそれ自体がコンストラクターです。javascriptでは、コンストラクターはオブジェクトの作成に使用できる通常の関数です。コンストラクターを使用してオブジェクトを作成すると、そのオブジェクトはコンストラクターのプロトタイプから継承されます。

また、jQueryはそのプロトタイプを変更し、extendjQueryのプロトタイプに他のメソッドや属性を追加できるメソッドを追加しました。それがやっていることです。前述のオブジェクトリテラルに含まれるすべての関数は、extendjQuery自体に追加されるメソッドによって処理されるため、新しいjQueryオブジェクトを作成すると、それらは継承されます。

あなたのコメントに基づくと、JavaScriptについて学ぶ必要のあることがたくさんあるようです。Rhinoの本「JavaScript： TheDefinitiveGuide」を読むことをお勧めします。そして、あなたがより多くを知り、javascriptに慣れたら、「Javascript：TheGoodParts 」も読むことをお勧めします。

私はあなたのコメントについてここで私ができる最善のことを答えようとします。すべてを説明するには、1冊の本が必要です。

まず、ラインについて：

jQuery.extend = jQuery.fn.extend = function() {

前に述べたように、jQuery.fnはへの単なるポインタjQuery.prototypeです。つまり、基本的には次のようになります。

jQuery.prototype.extend = function () { /* ... */ };
jQuery.extend = jQuery.prototype.extend;

2つの違いは何ですか？最初に覚えておく必要があるjQueryのは、コンストラクターです。コンストラクターによって作成されたオブジェクトは、そのプロトタイプを継承します（javascriptにはクラスがありませんが、「prototype」という単語を「class」に切り替えると、オブジェクトがどのように機能するかを理解できるようになります）。jQueryしたがって、extendの最初の宣言は、オブジェクトのすべてのインスタンスのメソッドとして定義します。

// note: The following is not the recommended way to write jQuery code
//       but it does illustrate the point about inheritance:

var foo = new jQuery();
foo.extend(); // this works because foo inherits jQuery's extend method

さて、JavaScriptでは関数もオブジェクトであると言ったことを覚えていますか？2番目の宣言は、jQuery関数をオブジェクトとして扱い、関数を直接追加します。これは主にシンタックスシュガーです。それはあなたが書くことができるようにするためです：

jQuery.extend();

長い代わりに：

jQuery.prototype.extend();

または次のような複雑なもの：

new jQuery().extend.call(jQuery);

拡張がどのように書かれたかに依存します。

つまり、これjQuery.extend()は単にjQueryコンストラクター自体のメソッドです。jQueryコンストラクターによって作成されたオブジェクトには継承されません。クラスメソッドと考えてください。

于 2012-10-31T07:24:41.833 に答える
0

はい、addClassはjQueryメソッドです。コードのスクリーンショットはjqueryのメソッドを拡張しているため、$（）。methodのように呼び出すことができます。$はjQueryと同じです。jqueryソースを見てください。jsをよく理解していれば、複雑なことは何もありません。

于 2012-10-31T07:03:09.430 に答える