一種實現前端事件代理的方法及裝置與流程

2023-05-19 01:28:21

本申請涉及計算機技術領域，尤其涉及一種實現前端事件代理的方法及裝置。

背景技術：

網頁，實質是一種超文本編譯語言(hypertextmarkuplanguage，html)文件，其中的代碼可採用javascript(後續簡稱為：js)腳本語言，並由相應的js庫(如：jquery庫)提供js腳本語言所需的各函數，以實現不同的功能。

目前，對於網頁而言，用戶在網頁中執行的交互操作，可稱為前端事件(後續簡稱為：事件)，如：點擊、拖拽、滑動等。當事件發生後，網頁通過js庫中提供的用於處理該事件的處理函數，對該事件做出響應。具體地，基於html及js的語言特性，網頁中的對象通常分成不同的層級，如：html、body、p等層級，在傳統方式中，當事件發生時，網頁將確定該事件所對應的層級，相應地，在後臺代碼中，該層級通過屬於該層級的處理函數，實現對事件的響應，可見，對於傳統方式而言，針對每一層級都設置相應的處理函數，其弊端在於：在層級發生增減等動態變化的情況下，需要相應地修改代碼，以增減不同層級的處理函數，較為繁瑣。

現有技術中，為了減少為各層級設置處理函數，通常使用js庫中提供的事件代理方法(如：由delegate函數實現的事件代理方法)。具體而言，通過事件代理方法，可僅在代碼中的父層添加相應的處理函數，當事件發生時，該事件所對應的層級會將該事件向上一層(即，父層)傳遞，直到傳遞至具有處理函數的層級，並由該層級的處理函數實現對事件的響應。這樣的方式對於頻繁增減層級的情況較為便捷。

需要說明的是，現有技術對處理函數對事件進行響應的過程中，所使用的參數之一為：選擇器(selector)，js庫會使用相關的方法(如：sizzle引擎)對選擇器進行解析，用以確定出選擇器的表達式所代表的元素，以便為該元素使用處理函數對事件進行響應。

但現有技術中的上述過程，均是在js庫中實現，js庫在對選擇器的表達式進行解析的過程所使用的相關方法，將在相應代碼的支持下才能夠實現，顯然，這將增加js庫中的代碼量，還可能涉及遍歷總元素集的過程，造成對選擇器的解析過程需要耗費較長的時間，進一步將會導致對網頁中事件進行響應的時間。

技術實現要素：

本申請實施例提供一種實現前端事件代理的方法及裝置，用以解決現有技術中對代理事件的響應效率較低的問題。

本申請實施例提供的一種實現前端事件代理的方法，包括：

當監聽到網頁中發生的事件後，確定與所述事件相關的各層級節點；

獲取所述各層級節點的節點數據；

針對每一層級節點，根據獲取到的所述節點數據，與網頁腳本中預編譯的設定格式的對象進行比對匹配；其中，所述設定格式的對象能夠反映節點數據的對象結構；

當確定所述節點數據與所述對象相匹配時，對所述事件進行響應。

本申請實施例另提供的一種實現前端事件代理的裝置，包括：

確定模塊，監聽到網頁中的發生的事件，確定與所述事件相關的各層級節點；

獲取模塊，獲取所述各層級節點的節點數據；

匹配模塊，針對每一層級節點，根據獲取到的所述節點數據，與網頁腳本中預編譯的設定格式的對象進行比對匹配；其中，所述設定格式的對象能夠反映節點數據的對象結構；

響應模塊，當確定所述節點數據與所述對象相匹配時，對所述事件進行響應。

本申請實施例採用的上述至少一個技術方案能夠達到以下有益效果：

採用將網頁腳本中的選擇器進行預編譯的方式，可將其編譯為特定格式的對象，這樣一來，當事件觸發後，js庫中針對事件代理語句中選擇器字符串的解析過程，就可以轉換為對特定格式的對象的匹配過程，顯然，這樣的方式使得js庫可以不再調用額外的解析方法，相較於現有技術而言，可提升對事件的響應速度，同時，由於js庫可不需再調用額外的解析方法，也就可以起到減少js庫中代碼量，使得js庫實現輕量化，體積更小。

附圖說明

此處所說明的附圖用來提供對本申請的進一步理解，構成本申請的一部分，本申請的示意性實施例及其說明用於解釋本申請，並不構成對本申請的不當限定。在附圖中：

圖1a為本申請實施例提供的實現前端事件代理的過程示意圖；

圖1b為本申請實施例提供的實現前端事件代理的場景示意圖；

圖2a～2h為本申請實施例提供的預編譯所生成的各類json對象的示意圖；

圖3為本申請實施例提供的實現前端事件代理的裝置結構示意圖。

具體實施方式

為使本申請的目的、技術方案和優點更加清楚，下面將結合本申請具體實施例及相應的附圖對本申請技術方案進行清楚、完整地描述。顯然，所描述的實施例僅是本申請一部分實施例，而不是全部的實施例。基於本申請中的實施例，本領域普通技術人員在沒有做出創造性勞動前提下所獲得的所有其他實施例，都屬於本申請保護的範圍。

正如前述，當網頁中的前端事件發生後，事件會以「冒泡」的方式向上層傳遞，當事件傳遞到具有處理函數的層級後，可通過該層級的處理函數實現對事件的響應，而處理函數對事件進行響應的過程中，所使用的參數之一為：選擇器(selector)，在現有技術的方式中，js庫會對使用相關的方法(如：sizzle)對選擇器進行解析，用以確定出選擇器的表達式所代表的元素，以便為該元素使用處理函數對事件進行響應。

但現有技術中的上述過程，均是在js庫中實現，js庫在對選擇器的表達式進行解析的過程所使用的相關方法，將在相應代碼的支持下才能夠實現，顯然，這將增加js庫中的代碼量，並且，一旦選擇器的表達式採用自定義選擇符，那麼，還可能涉及遍歷總元素集的過程，造成對選擇器的解析過程需要耗費較長的時間，進一步將會導致對網頁中事件進行響應的時間。

基於此，本申請提供了一種實現前端事件代理的方法，通過將對選擇器的解析過程進行預編譯，能夠有效減少js庫中對選擇器的表達式進行解析的時間，而且也減少了js庫中的代碼量。

本申請實施例中，網頁通常通過瀏覽器或是相應的應用等客戶端進行展示，相應的js庫運行在客戶端中，也就是說，可由js庫作為實現前端事件代理的方法的執行主體，這裡並不構成對本申請的限定。

通常，js庫的語句「.on(事件，選擇器，代理函數)」是一種事件的代理語句，其中，「選擇器」和「事件」均以字符串的形式表達，如：在選擇器的位置，字符可以為a、p等，分別表示網頁中的連結、段落兩個元素；在事件的位置，字符串可以為click，其表示點擊事件。當然，該示例中的語句並不限於此，這裡僅是為說明進行舉例。

基於以上內容，下面將針對本申請實施例所提供的實現前端事件代理的方法進行具體說明：

如圖1a所示，為實現前端事件代理的過程(其應用場景如圖1b所示)，具體包括以下步驟：

s101：當監聽到網頁中發生的事件後，確定與所述事件相關的各層級節點。

監聽的過程可由js庫中所提供的監聽功能實現，在上例中，實質上是對選擇器位置上的字符串進行監聽，以確定事件是否觸發。在實際應用中，監聽功能可只設置於頂層，這是因為：由於事件觸發後，會向上層「冒泡」，當事件傳遞到設置有監聽功能的頂層後，則該事件將被監聽到，這裡並不構成對本申請的限定。

所述的層級節點，實質上是文檔對象模型(documentobjectmodel，dom)中的dom節點(為了便於描述，後續簡稱為：節點)。換言之，dom可將網頁後臺的js原始碼採用諸如樹形結構的方式進行表達，在dom生成的樹形結構中，樹形結構的每一層級與網頁js原始碼中的層級相匹配，並且，每一個節點表徵一種元素。

在使用事件代理的方式中，當事件觸發後，會以冒泡的方式向上層的節點傳遞，直到傳遞至具有處理函數的層級後，在該層級所對應的處理函數將會對該事件進行響應。因此，在本申請實施例中，可認為，與所述事件相關的各層級節點，包括：觸發事件的節點，以及該節點上傳路徑上的若干祖輩節點。

需要說明的是，在某些場景下，處理函數設置於頂層，那麼，與所述事件相關的各層級節點，就可以包括：觸發事件的節點，以及至頂層節點中的各節點。

s102：獲取所述各層級節點的節點數據。

dom定義了網頁中各元素的對象和屬性，所述的節點數據，可認為是節點中包含的對象的屬性數據。作為本申請實施例中的一種方式，節點數據可包括：元素(tag)、類(class)、元素標識(id)以及各類節點的關係(如：父子、兄弟、相鄰)等對象。

另需要說明的是，選擇器所表達的就是元素，所以，本申請實施例中，節點數據便可認為是選擇器。

s103：針對每一層級節點，根據獲取到的所述節點數據，與網頁腳本中預編譯的設定格式的對象進行比對匹配。

其中，預編譯的設定格式的對象，能夠反映不同層級節點數據所對應的對象。

考慮到現有技術中的方式js庫需要對選擇器進行解析，其過程中js庫可能會使用相關的方法實現對選擇器的解析，從而增加了耗時，故在本申請中，對網頁腳本中的選擇器進行預編譯，將選擇器轉換為一種簡易的語言進行表達(如：可將選擇器編譯為json格式的對象)，那麼，對於獲取到的各節點的節點數據而言，js庫將會使用節點數據與json對象進行比對匹配，而不再是調用額外的解析方法。

顯然，經過預編譯的過程，使得在事件觸發時，js庫可以無需再調用額外的解析方法對選擇器進行解析，而是對經過了預編譯後的對象進行解析，這樣的方式能夠有效地提升解析的速度，並且，由於js庫不需再調用額外的解析方法，也就可以起到減少js庫中代碼量的效果。

s104：當確定所述節點數據與所述對象相匹配時，對所述事件進行響應。

節點數據與對象相匹配，則表明該節點就是所要進行監聽的節點，進而可以對事件作出響應。

在本申請實施例中，所述的匹配，可認為是：節點數據的對象命中json對象。

通過上述步驟，採用將網頁腳本中的選擇器進行預編譯的方式，可將其編譯為特定格式的對象，這樣一來，當事件觸發後，js庫中針對事件代理語句中選擇器字符串的解析過程，就可以轉換為對特定格式的對象的匹配過程，顯然，這樣的方式使得js庫可以不再調用額外的解析方法，相較於現有技術而言，可提升對事件的響應速度，同時，由於js庫可不需再調用額外的解析方法，也就可以起到減少js庫中代碼量，使得js庫實現輕量化，體積更小。

在本申請實施例中，考慮到json格式作為一種便捷、簡易的表達語言，可以提升js庫解析的速度，因此，可以將網頁腳本中的選擇器進行預編譯為json格式的對象。那麼，在本申請實施例中，在實際應用場景下，主要依賴於兩部分內容實現：預編譯過程以及對預編譯後的對象的解析。下面將詳細說明這兩部分內容。

一、預編譯：

在本申請實施例中，考慮到json格式作為一種便捷、簡易的表達語言，可以提升js庫解析的速度，因此，預編譯的目標格式，就是json格式。

基於此，具體而言，預編譯設定格式的對象，包括：在所述網頁對應的網頁腳本中，確定該網頁腳本中包含的選擇器，對所述選擇器進行預編譯，生成json對象，將json對象替換所述網頁腳本中的選擇器，並將替換後的json對象確定為設定格式的對象。

其中，預編譯的對象是網頁腳本中的選擇器，故在本申請實施例中，將首先在網頁腳本中，確定出需要進行預編譯的選擇器。其過程可以為：確定所述網頁腳本對應的抽象語法樹(abstractsyntaxtree，ast)，在所述ast中，按照預設的字符標記，查找包含有該字符標記的節點，將查找到的所述節點所對應的內容確定為選擇器。

這裡需要說明的是，確定網頁腳本所對應的ast，實質上就是確定網頁中js原始碼的ast，在實際應用中，可以採用相應的解析工具實現，如：homunculus工具，這裡並不構成對本申請的限定。

ast可將js原始碼中的方法以樹形結構進行表達，通過ast能夠較為便捷地確定出選擇器。考慮到在事件代理的方法中，通常使用前述的.on函數，所以，可通過ast獲得針對.on函數的樹形結構(為了與前述的dom節點進行區別，後續將ast的樹形結構中的節點稱為ast節點)，如圖2a所示，事件代理方法中所使用的語句為node.on{『click』，『.name』，『function』}，其中『.name』就是選擇器，那麼，通過ast便可確定出帶有『.name』字符的ast節點，從而將該ast節點對應的內容確定為選擇器。

在確定出選擇器後，可以進一步地針對選擇器再進行解析，可以認為，對選擇器所進行的解析，能夠確定出選擇器的類型、屬性、結構等數據，以便對選擇器進行預編譯。具體而言，對所述各選擇器進行預編譯，生成json格式的字符串，包括：確定所述選擇器對應的ast，根據所述選擇器對應的ast，確定所述選擇器的類型，根據所述類型，對所述選擇器進行預編譯，生成json對象。

沿用如圖2a所示的示例，在實際應用中，確定出了選擇器後，可在其字符後加入「{}」，使得該選擇器的字符變為css選擇器字符串，在此基礎上，仍可以採用上述的homunculus工具實現對css選擇器字符串的解析，生成該選擇器的ast。進而，在該選擇器的ast的基礎上，將選擇器編譯為json對象。

在本申請實施例中，不同類型的選擇器可預編譯為不同的josn對象，具體地：

當選擇器為並列選擇器時，確定並列的每一選擇器對應的字符串，將每一選擇器對應的字符串編譯為該選擇器的鍵，並按照並列結構的順序，生成包含每一選擇器的鍵，以及預設的標識鍵值對的json對象。

在此情況下，並列的選擇器通常為類選擇器、元素選擇器、id選擇器中的至少一種。在字符表達上，上述的選擇器分別以小寫字母、.字符、#字符形式進行表達。

例如：並列的選擇器包括：.class，div，#id{}。可見，此時有三個選擇器(並列)，那麼，進行預編譯時，可將該並列的三個選擇器編譯為如圖2b所示的格式。其中，「_v：true」就是預設的標識鍵值對，其表示對應的選擇器出現。

當然，上述的三種選擇器也稱為基本選擇器，在實際應用中，對基本選擇器中的任一一種進行預編譯，都可以採用如圖2b所示的json對象。這裡並不構成對本申請的限定。

需要說明的是，如果是通配符選擇器(用「*」符號表示的選擇器)，其採用與元素選擇器相同的規則進行預編譯，這裡不再過多贅述。

此外，在實際應用中，選擇器還可能由基本選擇器構成的組合結構，那麼，所述選擇器的類型為組合結構；根據所述結構，對所述選擇器進行預編譯，生成json對象，包括：確定所述選擇器對應的字符串，將所述選擇器對應的字符串編譯為選擇器的鍵，並按照設定的組合順序，對選擇器的鍵排序，生成包含排序後的選擇器的鍵，以及預設的標識鍵值對的json對象。

具體而言，假設組合選擇器分別為：div.class#id{}以及div2#id2.class2{}，在進行預編譯時，會按照設定的順序，編譯為統一的格式，其結果如圖2c所示。當然，本示例中的順序並不構成對本申請的限定。

當選擇器的類型為關係型選擇器時，根據所述類型，對所述選擇器進行預編譯，生成json對象，包括：確定所述選擇器對應的字符串，將所述選擇器對應的字符串編譯為選擇器的鍵，並按照倒序排序，生成包含選擇器的鍵，以及預設的標識鍵值對的json對象。

本申請實施例中，關係型的選擇器，可包括：包含關係(字符表達上，使用空格)、子選擇器(字符表達上，使用連接符>)、相鄰選擇器(連接符為+)、兄弟選擇器(連接符為～)。

具體而言，如果為包含選擇器，如：diva{}，則按照倒序排序的方式，進行預編譯，結果如圖2c所示。

而如果其中包含關係連接符(>、+、～)，那麼，預編譯時，還會將關係連接符進行編譯，換言之，當所述關係結構中包含關係連接符時，將所述選擇器對應的字符串編譯為選擇器的鍵，還包括：將所述選擇器對應的字符串中的關係連接符，編譯為預設格式的關係鍵。

在本申請實施例中，會將關係連接符編譯為以「_」連接的鍵，具體如圖2d所示。

當選擇器為屬性選擇器時，根據所述類型，對所述選擇器進行預編譯，生成json對象，包括：確定所述選擇器對應的字符串；其中，所述字符串中包含鍵名字符串、屬性標識符以及屬性字符串；將鍵名字符串編譯為選擇器的鍵，將屬性標識符編譯為預設格式的標識鍵，並將屬性字符串編譯為多維數組，生成包含有該選擇器的鍵、預設格式的標識鍵以及包含有預設鍵及鍵值的多維數組的json對象。

屬性選擇器中包含「[]」標識符，該標識符中的字符為屬性字符串，如：div[attr]。在進行編譯時，將標識符編譯為「_[」的形式的標識鍵。

當然，在實際應用中，屬性選擇器可能為：div[attr]，div[attr2]{}或div[attr][attr2]{}等，所以，標識鍵「_[」所對應的值為多維數組，即，在編譯時，採用[]結構，例如：對於屬性選擇器div[attr]，div[attr2]{}，其編譯結果如圖2e所示，從圖中可見，「_[」所對應的值包含「[attr]，{「_v」:true}」以及「[attr2]，{「_v」:true}」兩項構成的數組。

如果選擇器是div[attr][attr2]{}，則編譯結果如圖2f所示，從圖中可見，「_[」所對應的值為「[attr]，[attr2]，{「_v」:true}」，換言之，[attr]，[attr2]構成了該數組的第一項。

作為此方式的延伸，如果屬性選擇器中包含比較運算符(如：＝、>、<等)，則多維數組中的第一項中就包含該比較運算符，以選擇器div[attr＝v]為例，其編譯結果如圖2g所示。

當然，如果選擇器中包含關係結構和屬性結構，則結合關係結構和屬性結構的編譯規則進行預編譯，這裡不再過多贅述。

當選擇器的類型為偽類選擇器時，根據所述類型，對所述選擇器進行預編譯，生成json對象，包括：確定所述選擇器對應的字符串；其中，所述字符串中包含鍵名字符串以及偽類字符串；將鍵名字符串編譯為選擇器的鍵，將偽類字符串編譯為多維數組，生成包含有該選擇器的鍵、偽類字符串以及包含有預設鍵及鍵值的多維數組的json對象。

如：選擇器div：hover{}，其編譯結果如圖2h所示。如果包含多個偽類，則將多個偽類構成一個多維數組。

以上是預編譯的過程，在進行了預編譯生成json對象後，js庫便會在事件觸發時，對json對象進行解析，其解析過程如下：

根據dom所提供的接口，獲取節點的屬性數據(如tag、class、id等)。進一步查看屬性數據對應的鍵是否出現在json對象中，若是，並且該鍵所對應的json對象包含標識鍵值對，則說明匹配命中，可以響應事件回調。

如：

node.on(『click』，『div』，callback)

其表示，節點中包含有對象「div」。同時假設，對於div{}，其json對象如圖2a中所示，那麼，當點擊該節點時，進行比對匹配後，可確定匹配命中，即可響應。

通配符表示任意，因此不用查看是否出現，只要有內容即為匹配成功。當然，在實際應用中，若沒有對應鍵(*為沒內容)，則匹配失敗，直接退出。

但如果有內容，而沒有_v:true標識鍵值對出現，則需進一步進行匹配：

方式一、使用瀏覽器接口獲取當前節點的父節點parent，將parent作為當前節點，進行上述匹配過程。

方式二、如果當前json對象中包含_>、_+，_～鍵中的一種，說明選擇器中有關係選擇符存在，對所有關係選擇器的解析流程一致，故只以其中一種舉例：當出現_+時，說明有相鄰關係選擇器出現，用dom標準接口獲取當前節點的前面緊鄰的節點prev，若無，則跳出，若有，則將節點prev作為當前節點，進行上述匹配過程。

方式三、如果當前json對象中包含_[鍵，說明選擇器中有屬性存在，當有_[鍵出現時，說明需要檢查屬性值，其為一個多維數組，進行逐維、逐項遍歷。

方式四、如果當前json對象中包含_:鍵，說明選擇器中有偽類存在，所有偽類處理方式相同，因此只以其中一種舉例，下同。當出現_:時，檢查其對應的屬性值，其為一個多維數組，先遍歷第一維，每一項是個長度為2的數組，第1項為存在的若干個偽類組，遍歷偽類組，偽類組的每項是偽類，檢測當前節點和偽類是否匹配，返回匹配結果是否成功。當偽類組全部成功時，第2項作為新的json對象，進行上述的匹配過程。

檢測方式為標準dom接口，每種偽類對應意義如下：

:root當前節點是否為根節點，即為body節點或者無parent；

:first-child當前節點是否為同級的第一個節點，即無prev；

:last-child當前節點是否為同級的最後一個節點，即無next；

:only-child當前節點是否為唯一一個節點，即無prev和next；

:nth-child(n)當前節點是否是第n個節點；

:nth-last-child(n)當前節點是否是倒數第n個節點；

:first-of-type當前節點是否為同級且相同類型的第一個節點，即所有的prev沒有相同類型；

:last-of-type當前節點是否為同級且相同類型的最後一個節點，即所有的next沒有相同類型；

:only-of-type當前節點是否為同級且相同類型的唯一一個節點，即所有的prev和next沒有相同類型；

:nth-of-type(n)當前節點是否是相同類型的第n個節點；

:nth-last-of-type(n)當前節點是否是相同類型的倒數第n個節點；

:empty當前節點是否沒有子節點；

:checked當前節點是否處於選中狀態；

:enabled當前節點是否處於可用狀態；

:disabled當前節點是否處于禁用狀態；

:target當前節點是否匹配當前錨點。

結合上述內容，顯然，當事件觸發後，js庫中針對事件代理語句中選擇器字符串的解析過程，就可以轉換為對json對象的匹配過程，這樣的方式使得js庫可以不再調用額外的解析方法，從而有效提升了對事件響應的效率。

以上為本申請實施例提供的實現前端事件代理的方法，基於同樣的思路，本申請實施例還提供一種實現前端事件代理的裝置。如圖3所示，實現前端事件代理的裝置包括：

確定模塊301，當監聽到網頁中發生的事件後，確定與所述事件相關的各層級節點。

獲取模塊302，獲取所述各層級節點的節點數據。

匹配模塊303，針對每一層級節點，根據獲取到的所述節點數據，與網頁腳本中預編譯的設定格式的對象進行比對匹配。其中，預編譯的設定格式的對象，能夠反映不同層級節點數據所對應的對象。

響應模塊304，當確定所述節點數據與所述對象相匹配時，對所述事件進行響應。

其中，所述設定格式，包括：json格式。

在此基礎上，所述裝置還包括：預編譯模塊305，在所述網頁對應的網頁腳本中，確定該網頁腳本中包含的選擇器，對所述選擇器進行預編譯，生成json對象，將json對象串替換所述網頁腳本中的選擇器，並將替換後的json對象確定為設定格式的對象。

進一步地，預編譯模塊305，確定所述網頁腳本對應的抽象語法樹ast，在所述ast中，按照預設的字符標記，查找包含有該字符標記的節點，將查找到的所述節點所對應的內容確定為選擇器。

預編譯模塊305，確定所述選擇器對應的ast，根據所述選擇器對應的ast，確定所述選擇器的類型，根據所述類型，對所述選擇器進行預編譯，生成json對象。

當所述選擇器的類型為並列構，預編譯模塊305，確定並列的每一選擇器對應的字符串，將每一選擇器對應的字符串編譯為該選擇器的鍵，並按照並列結構的順序，生成包含每一選擇器的鍵，以及預設的標識鍵值對的json對象。

其中，所述選擇器包括：類選擇器、元素選擇器及id選擇器中的至少一種。

當所述選擇器的類型為組合結構，預編譯模塊305，確定所述選擇器對應的字符串，將所述選擇器對應的字符串編譯為選擇器的鍵，並按照設定的組合順序，對選擇器的鍵排序，生成包含排序後的選擇器的鍵，以及預設的標識鍵值對的json對象。

當所述選擇器的結構為關係結構，預編譯模塊305，確定所述選擇器對應的字符串，將所述選擇器對應的字符串編譯為選擇器的鍵，並按照倒序排序，生成包含選擇器的鍵，以及預設的標識鍵值對的json對象。

當所述關係結構中包含關係連接符時，預編譯模塊305，將所述選擇器對應的字符串中的關係連接符，編譯為預設格式的關係鍵。

當所述選擇器的類型為屬性結構，預編譯模塊305，確定所述選擇器對應的字符串；其中，所述字符串中包含鍵名字符串、屬性標識符以及屬性字符串，將鍵名字符串編譯為選擇器的鍵，將屬性標識符編譯為預設格式的標識鍵，並將屬性字符串編譯為多維數組，生成包含有該選擇器的鍵、預設格式的標識鍵以及包含有預設鍵及鍵值的多維數組的json對象。

當所述選擇器的類型為偽類結構，預編譯模塊305，確定所述選擇器對應的字符串；其中，所述字符串中包含鍵名字符串以及偽類字符串，將鍵名字符串編譯為選擇器的鍵，將偽類字符串編譯為多維數組，生成包含有該選擇器的鍵、偽類字符串以及包含有預設鍵及鍵值的多維數組的json對象。

匹配模塊303，確定獲取到的所述節點數據對應的對象，確定所述json對象的鍵名以及標識鍵值對，根據所述節點數據對應的對象，以及網頁腳本中預編譯的json對象鍵名以及標識鍵值對，進行比對匹配。

在一個典型的配置中，計算設備包括一個或多個處理器(cpu)、輸入/輸出接口、網絡接口和內存。

內存可能包括計算機可讀介質中的非永久性存儲器，隨機存取存儲器(ram)和/或非易失性內存等形式，如只讀存儲器(rom)或快閃記憶體(flashram)。內存是計算機可讀介質的示例。

計算機可讀介質包括永久性和非永久性、可移動和非可移動媒體可以由任何方法或技術來實現信息存儲。信息可以是計算機可讀指令、數據結構、程序的模塊或其他數據。計算機的存儲介質的例子包括，但不限於相變內存(pram)、靜態隨機存取存儲器(sram)、動態隨機存取存儲器(dram)、其他類型的隨機存取存儲器(ram)、只讀存儲器(rom)、電可擦除可編程只讀存儲器(eeprom)、快閃記憶體或其他內存技術、只讀光碟只讀存儲器(cd-rom)、數字多功能光碟(dvd)或其他光學存儲、磁盒式磁帶，磁帶磁磁碟存儲或其他磁性存儲設備或任何其他非傳輸介質，可用於存儲可以被計算設備訪問的信息。按照本文中的界定，計算機可讀介質不包括暫存電腦可讀媒體(transitorymedia)，如調製的數據信號和載波。

還需要說明的是，術語「包括」、「包含」或者其任何其他變體意在涵蓋非排他性的包含，從而使得包括一系列要素的過程、方法、商品或者設備不僅包括那些要素，而且還包括沒有明確列出的其他要素，或者是還包括為這種過程、方法、商品或者設備所固有的要素。在沒有更多限制的情況下，由語句「包括一個……」限定的要素，並不排除在包括所述要素的過程、方法、商品或者設備中還存在另外的相同要素。

本領域技術人員應明白，本申請的實施例可提供為方法、系統或電腦程式產品。因此，本申請可採用完全硬體實施例、完全軟體實施例或結合軟體和硬體方面的實施例的形式。而且，本申請可採用在一個或多個其中包含有計算機可用程序代碼的計算機可用存儲介質(包括但不限於磁碟存儲器、cd-rom、光學存儲器等)上實施的電腦程式產品的形式。

以上所述僅為本申請的實施例而已，並不用於限制本申請。對於本領域技術人員來說，本申請可以有各種更改和變化。凡在本申請的精神和原理之內所作的任何修改、等同替換、改進等，均應包含在本申請的權利要求範圍之內。