ホームページ  >  記事  >  ウェブフロントエンド  >  プロトタイプ セレクター オブジェクト learning_prototype

プロトタイプ セレクター オブジェクト learning_prototype

WBOY
WBOYオリジナル
2016-05-16 18:49:141091ブラウズ
コードをコピー コードは次のとおりです。

function $$() {
return セレクター。 findChildElements(document , $A(arguments));
}

このクラスは 3 つの部分に分けることができます。最初の部分は、さまざまなブラウザーに応じて使用する DOM 操作メソッドを決定することです。このうち、IE の操作には通常の getElementBy* 系のメソッドが使用され、FF では document.evaluate が使用され、Safari では selectorsAPI が使用されます。 2 番目の部分は、findElements、match など、外部から提供される基本関数です。Element オブジェクト内の多くのメソッドは、このオブジェクト内のメソッドを直接呼び出します。 3 番目の部分は XPath と、最初の子の検索を表す文字列や n 番目の子の検索を表す文字列など、DOM をクエリするためのその他の一致基準です。

このオブジェクトには多数のメソッドが含まれているため、すべてのソース コードは示しません。実際には、一部のメソッドのコードしか理解していません。ここでは、簡単な例を使用して、さまざまなブラウザーに応じた DOM 選択のプロセスを説明します。このプロセスでは、必要なソース コードが与えられ、説明されます。

具体的な例は次のとおりです。
コードをコピーします コードは次のとおりです:




$$('# navbar a', '#sidebar a')
// -->


以下は例としてFFを使用した処理です。


コードをコピー コードは次のとおりです:/*最初に $$ を見つけます。このメソッドでは、上記で指定したメソッドが呼び出されます。Selector の findChildElements メソッドが呼び出され、最初のパラメーターは document で、残りのパラメーターは DOM クエリ文字列の配列です*/
findChildElements: function(element) 、expressions) {
//ここで最初に呼び出します。split は文字列配列を処理し、それが正当であるかどうかを判断し、スペースを削除します。
expressions = Selector.split(expressions.join(',')); /handlers には、concat、unique などの DOM ノード メソッドの処理が含まれます。
var results = [], h = Selector.handlers
//クエリ式を 1 つずつ処理します
for (var i = 0, l =expression.length,selector; i
//新しいセレクター
selector(expressions[i].strip());クエリされたノードを results
h.concat(results, selector.findElements(element));
}
//見つかったノードの数が 1 つより大きい場合は、重複するノードを除外します
return (l > 1) ? h.unique (結果) :
}

//============== ========== ===================

//Selector.split メソッド:
split: function(expression ) {
var 式 = [] ;
expression.scan(([w#:.~> ()s-] |*|[.*?]) )s*(,|$ )/, function(m) {
//alert(m[1])
expressions.push(m[1].strip());
式を返します。
}

//====================================== ========== ===

//Selector.handlers オブジェクト
handlers: {
concat: function(a, b) {
for (var i = 0, ノード = b[i ]; i )
a.push(node);
},
//...一部のメソッドを省略します
: function(nodes) {
if (nodes.length == 0) return ノード;
var results = [], n;
for (var i = 0, l = nodes.length; i if (typeof (n = ノード[i])._countedByPrototype == 'unknown') {
n._countedByPrototype = Prototype.emptyFunction
results.extend( n));
}
return Selector.handlers.unmark(results);
},

//次に、Selector オブジェクトの作成プロセスに移ります。 !






コードをコピー

コードは次のとおりです:

//最初にセレクターの初期化部分を見てください
//初期化部分は、DOM を操作するために使用するメソッドを決定することであることがわかります。これらのメソッドを見てみましょう
var Selector = Class.create( {
初期化: function(expression) {
this.expression =expression.strip();

if (this.ShouldUseSelectorsAPI()) {
this.mode = 'selectorAPI';
} else if (this. shouldUseXPath()) {
this.mode = 'xpath';
this.compileXPathMatcher(); >this.mode = "通常" ;
this.compileMatcher()
}

//============ ======== ==============================

//XPath、FF をサポートこのメソッド
shouldUseXPath: (function() {

//ブラウザにバグがあるかどうかを確認してみましょう。このバグの具体的な原因はインターネット上で見つかりませんでした。おそらくチェックすることを意味します。特定のノードが正しく見つかるかどうか。 Number
var IS_DESCENDANT_SELECTOR_BUGGY = (function(){
var isBuggy = false;
if (document.evaluate && window.XPathResult) {
var el = document .createElement('div');
el.innerHTML = '
声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。