JavaScript 实现自定义 DOM 选择器：原理与代码解析

DOM 选择器实现原理与设计模式

解释器模式的核心在于定义一种语法格式，并通过程序对其进行解释执行以完成特定任务。在前端开发场景中，该模式可用于解析 CSS 选择符，从而实现对 DOM 元素的精准选取。

面向对象设计中的开放封闭原则要求类或模块对扩展开放，而对修改封闭。在构建 DOM 选择器时，若需新增属性选择器，只需定义相应的选择器类并实现匹配方法，随后在简单工厂模式中增加创建该对象的分支即可，无需改动现有代码。

浏览器在匹配 CSS 选择符时采用从右至左的策略。因此，在实现自定义 DOM 选择器时，其匹配行为应与原生浏览器的匹配逻辑保持一致，以确保性能与结果的正确性。

JavaScript 源码实现与解析

代码实现如下：

 
(function (ns) {
/* 
//tagName
console.log(dom.get("p"));
//#id
console.log(dom.get("#div"));
//.class
console.log(dom.get(".span", document.body));
//tag.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 || doc;
//调用原生选择器
if(!simple.test(query) && context.querySelectorAll){
return context.querySelectorAll(query);
}else {
//调用自定义选择器
return interpret(query, context);
} 
} 
//解释执行dom选择符
function interpret(query, context){
var parts = query.replace(/\s+/, " ").split(" ");
var part = parts.pop();
var selector = Factory.create(part);
var ret = selector.find(context);
return (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 (selector) {
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 (selector) {
var regex = /^([\w\*\-_]+)/;
return regex.test(selector);
}; 
//类选择器
function ClassSelector(className) {
var splits = className.split('.');
this.tagName = splits[0] || undefined ;
this.className = splits[1];
} 
ClassSelector.prototype = {
find: function (context) {
var elements;
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){
return elements;
} 
for(var i=0,n=elements.length; i<n; i++){
if( selector.match(elements[i]) ){
ret.push(elements[i]);
} 
} 
} else {
elements = selector.find(context);
for(var i=0, n=elements.length; i<n; i++){
if( this.match(elements[i]) ) {
ret.push(elements[i]);
} 
} 
} 
return ret;
}, 
match: function(element){
var className = this.className;
var regex = new RegExp("^|\\s" + className + "$|\\s");
return regex.test(element.className);
} 
}; 
ClassSelector.test = function (selector) {
var regex = /^([\w\-_]+)?\.([\w\-_]+)/;
return regex.test(selector);
}; 
//TODO:属性选择器
function AttributeSelector(attr){
this.find = function(context){
}; 
this.match = function(element){
}; 
} 
AttributeSelector.test = function (selector){
var regex = /\[([\w\-_]+)(?:=([\w\-_]+))?\]/;
return regex.test(selector);
}; 
//根据父级元素过滤
function filter(parts, nodeList){
var part = parts.pop();
var selector = Factory.create(part);
var ret = [];
var parent;
for(var i=0, n=nodeList.length; i<n; i++){
parent = nodeList[i].parentNode;
while(parent && parent !== doc){
if(selector.match(parent)){
ret.push(nodeList[i]);
break;
} 
parent = parent.parentNode;
} 
} 
return parts[0] && ret[0] ? filter(parts, ret) : ret;
} 
//根据查询选择符创建相应选择器对象
var Factory = {
create: function (query) {
if (IDSelector.test(query)) {
return new IDSelector(query);
} else if (ClassSelector.test(query)) {
return new ClassSelector(query);
} else {
return new TagSelector(query);
} 
} 
}; 
ns.dom || (ns.dom = {});
ns.dom.get = api;
}(this));