用JavaScript實現自己的DOM選擇器

2021-08-27 12:33:01 字數 1486 閱讀 1055

直譯器模式(interpreter):定義一種語法格式,通過程式解釋執行它並完成相應的任務。在前端程式設計場景中可以應用直譯器模式來解釋css選擇符實現dom元素的選擇。

開放封閉原則:物件導向中的開放封閉原則是類或模組應該對擴充套件開放對修改封閉,在這個dom選擇器中實現id選擇器,元素選擇器,類選擇器,如果以後需要屬性選擇器的話定義乙個屬性選擇器實現相應的方法,同時在簡單工廠中增加相應的建立屬性選擇器物件分支即可。

匹配原理:瀏覽器在匹配css選擇符時是按照從右到左匹配的,所以實現自己的dom選擇器時匹配行為也應該和瀏覽原生匹配行為一致。

**:

(function (ns) else 

}//解釋執行dom選擇符

function interpret(query, context)

//id選擇器

function idselector(id)

idselector.prototype = ,

match: function(element)

};idselector.test = function (selector) ;

//元素選擇器

function tagselector(tagname)

tagselector.prototype = ,

match: function(element)

}; tagselector.test = function (selector) ;

//類選擇器

function classselector(classname)

classselector.prototype =

for(var i=0,n=elements.length; i}

} else }}

return ret;

},match: function(element)

};classselector.test = function (selector) ;

//todo:屬性選擇器

function attributeselector(attr);

this.match = function(element);

}attributeselector.test = function (selector);

//根據父級元素過濾

function filter(parts, nodelist)

parent = parent.parentnode;

}}

return parts[0] && ret[0] ? filter(parts, ret) : ret; }

//根據查詢選擇符建立相應選擇器物件

var factory = else if (classselector.test(query)) else }};

ns.dom || (ns.dom = {});

ns.dom.get = api;

}(this));

JavaScript學習筆記 自己實現雙向繫結

參考 剖析vue原理 實現雙向繫結mvvm和vue.js雙向繫結的實現原理 1 通過object.defineproperty obj,prop,descriptor 劫持物件的屬性讀寫,其中obj是要在上面定義屬性的物件,prop是要定義或修改的屬性名稱,descriptor是屬性的描述符。描述符...

Javascript 用cssText設定樣式

一般情況下我們用js設定元素物件的樣式會使用這樣的形式 var element document.getelementbyid id element.style.width 20px element.style.height 20px element.style.border solid 1px r...

用SDK實現屬於自己的網盤

介面如下圖所示。左側是使用者鑑權的實現,網盤使用者輸入自己的使用者名稱密碼後進行授權操作,返回sid與secret。授權成功後會在 我的網盤 的 我的應用 下建立50021這個應用 penjin測試 應用授權後是訪問專屬應用的網盤空間,而不能訪問使用者的其他個人資料和其他應用的檔案,先隨便上傳點東西...