web-dev-qa-db-ja.com

Chrome / Firefoxの2ドル記号セレクタークエリ関数のソースは何ですか？

this jsfiddle を確認し、コンソールを確認します。 $$ 定義されていません。次に、完全に新しいウィンドウを開き、$$コンソールに。セレクターに一致するすべてのdom要素の（jqueryのような）配列を取得するための関数を定義します。

> $$

bound: function () {
  return document.querySelectorAll.apply(document, arguments)
}

これは開発ツールによって追加されますか？ FirefoxでFirebugを使用する場合にも存在します。ツール自体が内部的に使用していますか？

javascriptgoogle-chromefirebuggoogle-chrome-devtools
60
minikomi

Firebug Lite はこれを次のように定義します：

this.$$=function(selector,doc){if(doc||!FBL.Firebug.chrome){return FBL.Firebug.Selector(selector,doc)

（ ソースを参照 。）

Firebugのフルバージョン defines this as

this.$$ = function(selector)
{
    return FBL.getElementsBySelector(baseWindow.document, selector);
};

これは実際には documented であり、はい、内部的にも使用されます。

だから私はGoogle Chromeが同様のことをしていると思います.

32
ziesemer

まず、ジーゼマーの答えのすべてが正しいです。

これはJavaScriptの歴史についてのすべてです

さまざまなブラウザのdevtoolsコンソールで利用できる機能がいくつかあります。総称して、メソッドは コマンドラインAPI （オフライン）（ 新しいリンク ）として知られており、すべてFirebugに由来しています。現在、Firebugは（ほとんど）正しく機能しているため、ブラウザー間で同等の処理が行われています。

しかし、Firebugが作成されたとき（2006年）、大流行したJavaScriptライブラリはPrototype.jsでした。 _$_は、いくつかのgetElementById()構文シュガーのためにPrototypeによって取得されました。これは、要素を取得するための最も迅速な方法であり、当時最も一般的な要素取得手法だったためです。それはそのような時間の節約でした、人々は $砂糖のためだけのライブラリ全体 を使用しました。

2006年の初めに、jQueryはデビューし、CSSセレクターに基づいて要素を選択するために$()を使用しました。私の古い CSSセレクターエンジンタイムラインポスト が示すように、プロトタイプは4日後をフォローしましたが、_$_は既にライブラリで取得され、$$()に移動しました。これは現在bling-bling関数として知られています。

そのため、FirebugはPrototypeのAPIを活用していたため、2006年もその役割を果たしていました。今では、jQueryとwindow.$ = document.querySelectorAll.bind(document)のようなjQueryのエイリアスの時代では、それはかなり逆になっています。興味深いことに、Operaが革命を起こしたDragonflyのブラウザ開発ツールである場合、querySelectorAllエイリアスとして_$_を選択しました。もっと感覚。

ああ、あなたはcodeソースを意味しました。

ここで、DevToolsの_$$_の「ソース」について質問し、その履歴を説明しました。おっと！なぜコンソールで利用できるのか... Command Line API （off-line）（ new link ）メソッドはすべて、コンソールのコンテキスト内でのみ利用できます、便利なメソッドと同じです。

copy()は私のお気に入りの1つです。私はそれとその他をこの パワーユーザー向けのJavaScriptコンソール ビデオでカバーします。

189
Paul Irish