JavaScript は独自の DOM セレクター原理と code_javascript スキルを実装します

インタプリタ モード (インタプリタ): 構文形式を定義し、プログラム解釈を通じてそれを実行し、対応するタスクを完了します。フロントエンド プログラミング シナリオでは、インタープリター モードを適用して CSS セレクターを解釈して DOM 要素を選択できます。

オープンとクローズの原則: オブジェクト指向におけるオープンとクローズの原則は、クラスまたはモジュールが拡張に対してオープンであり、変更に対してクローズである必要があるということです。この dom セレクター、つまり ID セレクターでは。クラス セレクターが実装されています。将来属性セレクターが必要な場合は、対応するメソッドを実装する属性セレクターを定義し、単純なファクトリに属性セレクター オブジェクトを作成するための対応するブランチを追加します。

マッチング原則: ブラウザーは CSS セレクターを右から左にマッチングするため、独自の DOM セレクターを実装する場合、マッチング動作はブラウザーのネイティブ マッチング動作と一致する必要があります。

コード:

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

(function (ns) {
/*
//tagName
console.log(dom.get("p"));
//#id
console.log(dom.get("#div"));
//.class
console.log(dom.get(".span", document.body)); .class
console.log(dom.get("div.span"));
//#id .class
console.log(dom.get("#div .span"));
//.class .class
console.log(dom.get(".ul .li-test"));
*/
var doc = document;
var simple = /^(?:#|.)?([w-_] )/;
function api(query, context) {
context = context
//调用原生选择器
if(!simple.test(query) && context.querySelectorAll){
return context.querySelectorAll(query);
}else {
//调用自定义选择器
return replace( query, context);
}
}
//解释実行dom选择符
function replace(query, context){
var Parts = query.replace(/s /, " " ).split(" ");
var パート = Parts.pop();
var ret = selector.find(context); (parts[0] && ret[0]) ? filter(parts, ret) : ret
}
//ID选择器
function IDSelector(id) {
this.id = id; .substring(1);
}
IDSelector.prototype = {
find: function (context) {
return document.getElementById(this.id);
},
match: function(element){
return element.id == this.id;
}
};
IDSelector.test = function (セレクター) {
var regex = /^#([w-_] )/;
return regex.test(selector);
};
//元素选择器
function TagSelector(tagName) {
this.tagName = tagName.toUpperCase();
}
TagSelector.prototype = {
find: function (context) {
return context.getElementsByTagName(this.tagName);
},
match: function(element){
return this.tagName == element.tagName.toUpperCase() || this.tagName === "*";
}
};
TagSelector.test = function (セレクター) {
var regex = /^([w*-_] )/;
return regex.test(selector);
};
//类选择器
function ClassSelector(className) {
var splits = className.split('.');
this.tagName = スプリット[0] ||未定義 ;
this.className = splits[1];
}
ClassSelector.prototype = {
find: function (context) {
var 要素;
var ret = [];
var tagName = this.tagName;
var className = this.className;
var selector = new TagSelector((tagName || "*"));
//サポート原生getElementsByClassName
if (context.getElementsByClassName) {
elements = context.getElementsByClassName(className);
if(!tagName){
要素を返します。
}
for(var i=0,n=elements.length; iif( selector.match(elements[i]) ){
ret.push(要素[i]);
}
}
} else {
elements = selector.find(context);
for(var i=0, n=elements.length; iif( this.match(elements[i]) ) {
ret.push(elements[i] );
}
}
}
ret を返します。
},
match: function(element){
var className = this.className;
var regex = new RegExp("^|\s" className "$|\s");
return regex.test(element.className);
}
};
ClassSelector.test = function (セレクター) {
var regex = /^([w-_] )?.([w-_] )/;
return regex.test(selector);
};
//TODO: プロパティ选择器
function AttributeSelector(attr){
this.find = function(context){
};
this.match = function(element){
};
}
AttributeSelector.test = function (セレクター){
var regex = /[([w-_] )(?:=([w-_] ))?]/;
return regex.test(selector);
};
//根据父级元素过滤
function filter(parts, nodeList){
var part = Parts.pop();
var selector = Factory.create(part);
var ret = [];
var 親;
for(var i=0, n=nodeList.length; iparent = nodeList[i].parentNode;
while(parent &&parent !== doc){
if(selector.match(parent)){
ret.push(nodeList[i]);
休憩;
}
parent =parent.parentNode;
}
}
return Parts[0] && ret[0] ?フィルター(パーツ、ret) : ret;
}
//準拠查询选择符创建相应选择器对オブジェクト
var Factory = {
create: function (query) {
if (IDSelector.test(query)) {
新しいIDSelector(クエリ)を返します;
} else if (ClassSelector.test(query)) {
return new ClassSelector(query);
} else {
return new TagSelector(query);
}
}
};
ns.dom || (ns.dom = {});
ns.dom.get = API;
}(これ));