8

jQuery は広く使用され、成熟した共同作業であるため、より良い Javascript を作成するためのガイダンスとして、jQuery のソースを調べずにはいられません。私は常に jQuery ライブラリーを PHP アプリケーションと共に使用していますが、このかなり洗練されたライブラリーの内部を調べてみると、Javascript についてまだ理解していないことがどれだけあるかに気づきます。SO コミュニティにいくつか質問があります。まず、次のコードを検討してください...

$('#element').attr('alt', 'Ivan is SUPER hungry! lolz');

対

$('#element').attr({'alt': 'Ivan is an ugly monster! omfgz'});

さて、これはattr()メソッドが属性名、属性名と値、またはペア値マップのいずれかを受け入れるように設計されているということでしょうか? マップが実際に何であるか、およびマップが Javascript の配列と異なる重要な点について簡単に説明してもらえますか?

先に進むと、図書館全体がこのビジネスに包まれています...

(function(window, undefined) { /* jQuery */ })(window);

ラップされた括弧が に似た動作を引き起こすことがわかりましたbody onLoad="function();"が、このプラクティスは何と呼ばれ、onLoadイベント ハンドラーを使用するのと何か違いはありますか? (window)また、最後にあるビットの表も裏も作れません。windowここにあるオブジェクトで正確に何が起こっているのでしょうか?

オブジェクトがJavascriptの関数と変わらないという評価は間違っていますか? これについて間違っている場合は修正してください$()。すべてを網羅するjQueryオブジェクトですが、メソッドのように見えます。これは、コード例を含む別の簡単な質問です...

$('#element').attr('alt', 'Adopt a Phantom Cougar from Your Local ASPCA');

... 内部は次のようになっている必要があります (これについては間違っている可能性があります)...

function $(var element = null) {
    if (element != null) {
        function attr(var attribute = null, var value = null) {
            /* stuff that does things */
        }
    }
}

これは、Javascript でオブジェクトとその子メソッドおよびプロパティを定義するための常套手段ですか? Javascript と PHP を比較すると、オブジェクトからメソッドを取得する.のと同じようにピリオドを使用しますか?->

少し長くなってしまい申し訳ありませんが、これらの質問に答えることで、jQuery と Javascript 全般について多くのことを知ることができます。ありがとう！

4

4 に答える 4

2

1. メソッドのオーバーロード

$('#element').attr('alt', 'Ivan is SUPER hungry! lolz');

対

$('#element').attr({'alt': 'Ivan is an ugly monster! omfgz'});

var attr = function (key, value) {
  // is first argument an object / map ?
  if (typeof key === "object") {
    // for each key value pair
    for (var k in key) {
      // recursively call it.
      attr(k, key[k]);
    }
  } else {
    // do magic with key and value
  }
}

2. 閉鎖

(function(window, undefined) { /* jQuery */ })(window);

onloadハンドラーとしては使用されません。関数内に新しいスコープを作成するだけです。

これは、var fooそれがグローバル変数ではなくローカル変数であることを意味します。指定されていないパラメーターが渡されるため、使用する実際のundefined変数も作成していますundefined

これwindow.undefined = trueは、有効/許可されているものを保護します。

最後にある（ウィンドウ）ビット。ここで、window オブジェクトで正確に何が起こっているのでしょうか?

ローカルにすることで、ウィンドウ アクセスをマイクロ最適化します。ローカル変数へのアクセスは、グローバル変数へのアクセスよりも約 0.01% 高速です

オブジェクトがJavascriptの関数と変わらないという評価は間違っていますか?

はいといいえ。すべての関数はオブジェクトです。$()内部的に呼び出すため、新しいjQueryオブジェクトを返すだけですreturn new jQuery.fn.init();

3. スニペット

function $(var element = null) {

Javascript は、デフォルトのパラメーター値またはオプションのパラメーターをサポートしていません。これをエミュレートするための標準的な方法は次のとおりです。

function f(o) {
  o != null || (o = "default");
}

Javascript と PHP を比較すると、ピリオドを使用しますか。オブジェクトからメソッドを取得するために -> を使用するのと同じ方法ですか?

foo.propertyを使用してオブジェクトのプロパティにアクセスできます。プロパティは、foo["property"]関数/メソッドを含む任意のタイプにすることができます。

4. 質問に隠されたその他の質問

マップが実際に何であるか、およびマップが Javascript の配列と異なる重要な点について簡単に説明してもらえますか?

var a = []配列は、すべてのキーが正の数であるキーと値のペアのリストを含むだけで作成されます。また、すべてのArray methods. 配列もオブジェクトです。

マップは単なるオブジェクトです。オブジェクトは、キーと値のペアの単なるバッグです。オブジェクトのキーの下にいくつかのデータを割り当てます。このデータは、任意のタイプにすることができます。

于 2011-06-22T14:00:36.317 に答える
1

の場合attr、キーと値のペアの代わりにオブジェクトを指定すると、各プロパティでループします。jQuery のコードで を探すとattr:、 が使用されていることがわかりますaccess。次に、オブジェクトである場合はループを開始するaccess:タイプのチェックがあることがわかります。key

関数内でのラップは、内部のすべてのコードが外部からアクセスされるのを防ぎ、不要な問題を引き起こすことを防ぎます。渡されるパラメーターは、windowグローバルの設定と DOM へのアクセスを許可するパラメーターのみです。このundefined特別な値のチェックをより迅速にするためだと思います。

私は時々jQueryを読みますが、それから始めたわけではありません.Javascriptが持ついくつかの高度な機能について最初にアイデアを得るために、いくつかの良い本を手に入れてから、jQueryの詳細に知識を適用する必要があるかもしれません.

于 2011-06-22T13:54:15.903 に答える
1

1 - はいattr、値を取得するための属性名、1 つの値を設定するための名前と値、または複数の属性を設定するための属性名と値のマップを受け入れることができます

2 - マップは基本的に JavaScriptobjectです。

var map = {
    'key1' : 'value1',
    'key2' : 'value2'
};

3 -名前がないので(function(window, undefined) { /* jQuery */ })(window);an と呼ばれるものです。anonymous functionこの場合も、すぐに実行されます。

簡単な例は次のとおりです。

function test(){
    ...
}

test();

//As an anonymous function it would be:

(function(){
    ...

}();

//And it you wanted to pass variables:

function test(abc){
    ...
}

test(abc);

//As an anonymous function it would be:

(function(abc){
    ...

}(abc);

これはイベントではなく関数であるため、load イベントとは異なります。

4 - windowjQuery 内で内部的に使用されるため、変数として渡されます

5 - JavaScript のすべてObjectsが. jQuery は次のようなことを行います。functionsobject

var obj = {
    "init" : function(){


    }
}

6 - はい.、 を取得するためにvalue使用できますが、次のようにobject使用することもできます[]。

var map = {
    "test" : 1
}


map.test //1
map["test"] //1

これがあなたの多くの質問に答えてくれることを願っています。何か見逃していたらお知らせください。

于 2011-06-22T14:08:27.317 に答える
0

jQuery1.6.1

テストはtypeof key === "object"

それが true の場合、{ .... } を渡しました。

jQuery.fn.extend({
  attr: function( name, value ) {
    return jQuery.access( this, name, value, true, jQuery.attr );
  },

// Mutifunctional method to get and set values to a collection
// The value/s can be optionally by executed if its a function
access: function( elems, key, value, exec, fn, pass ) {
    var length = elems.length;

    // Setting many attributes
    if ( typeof key === "object" ) {
        for ( var k in key ) {
            jQuery.access( elems, k, key[k], exec, fn, value );
        }
        return elems;
    }

    // Setting one attribute
    if ( value !== undefined ) {
        // Optionally, function values get executed if exec is true
        exec = !pass && exec && jQuery.isFunction(value);

        for ( var i = 0; i < length; i++ ) {
            fn( elems[i], key, exec ? value.call( elems[i], i, fn( elems[i], key ) ) : value, pass );
        }

        return elems;
    }

    // Getting an attribute
    return length ? fn( elems[0], key ) : undefined;
},
于 2011-06-22T13:57:10.007 に答える