對運行頁面進行動態(tài)更新的制作方法
【專利摘要】一種方法包括解析文本源文檔來構(gòu)造文檔節(jié)點樹，使得文檔節(jié)點樹包括與文檔節(jié)點樹的每一節(jié)點相對應(yīng)的指示文本在文本源文檔內(nèi)的位置的文本偏移量。該方法包括從文檔節(jié)點樹構(gòu)造文檔對象模型（DOM）和表示該DOM的查看節(jié)點樹。查看節(jié)點樹的構(gòu)造包括將查看節(jié)點樹映射到文檔節(jié)點樹。該方法包括提供DOM的運行表示和以下之一：跟蹤對DOM的修改以提供第一改變信息以及跟蹤對文本源文檔的修改以提供第二改變信息。
【專利說明】對運行頁面進行動態(tài)更新
【背景技術(shù)】
[0001]web開發(fā)工具使得開發(fā)人員能夠診斷超文本標記語言(HTML)和層疊樣式表(CSS)問題。開發(fā)人員可動態(tài)地修改文檔對象模型(DOM)元素(包括CSS選擇器)并在瀏覽器中的運行頁面中立即查看所反映的改變。然而，為了將修改永久應(yīng)用到產(chǎn)生該頁面的標記文本源文檔，開發(fā)人員需要定位并適當?shù)匦薷呐c所需修改相關(guān)聯(lián)的標記文本或起源JavaScript.,然而，定位與所需修改相關(guān)聯(lián)的源代碼文本可能是困難的，因為相關(guān)聯(lián)的源代碼文本可能不是立即明顯的或可能源于開發(fā)人員不熟悉的代碼。另外，一旦定位了與所需修改相關(guān)聯(lián)的源代碼文本，就可能需要若干步驟來應(yīng)用該修改并在瀏覽器中實際上看到該修改的結(jié)果。

【發(fā)明內(nèi)容】

[0002]提供本概述是為了以簡化的形式介紹將在以下詳細描述中進一步描述的一些概念。本概述并不旨在標識出所要求保護的主題的關(guān)鍵特征或必要特征，也不旨在用于限定所要求保護的主題的范圍。
[0003]一個實施例提供一種方法，該方法包括解析文本源文檔來構(gòu)造文檔節(jié)點樹，使得文檔節(jié)點樹包括與文檔節(jié)點樹的每一節(jié)點相對應(yīng)的指示文本在文本源文檔內(nèi)的位置的文本偏移量。該方法包括從文檔節(jié)點樹構(gòu)造文檔對象模型(DOM)和表示該DOM的查看節(jié)點樹。查看節(jié)點樹的構(gòu)造包括將查看節(jié)點樹映射到文檔節(jié)點樹。該方法包括提供DOM的運行表示和以下之一:跟蹤對DOM的修改以提供第一改變信息以及跟蹤對文本源文檔的修改以提供第二改變信息。
[0004]附圖簡述
[0005]包括附圖來提供了對各實施例的進一步理解，且這些附圖被合并在本發(fā)明書內(nèi)并構(gòu)成其一部分。附圖示出各實施例，并且與說明書一起用于解釋本發(fā)明的原理。其他實施例和各實施例的許多預(yù)期優(yōu)點將隨著參考下面的詳細描述進行更好的理解而得到認識。附圖的元素不一定相對于彼此而縮放。相同的附圖標記指代對應(yīng)的類似部分。
[0006]圖1是示出web開發(fā)工具的一個實施例的框圖。
[0007]圖2是示出適于實現(xiàn)圖1中示出的web開發(fā)工具的各方面的計算設(shè)備/環(huán)境的框圖。
[0008]圖3是示出web開發(fā)工具的一個實施例的功能框圖。
[0009]圖4是示出映射到文檔節(jié)點樹的HTML文本的一個示例的框圖。
[0010]圖5是示出映射到查看節(jié)點樹的文檔節(jié)點樹的一個示例的框圖。
[0011]圖6是示出瀏覽器實例所表示的DOM的查看節(jié)點樹的一個示例的框圖。
[0012]圖7是示出在修改之前和之后的文檔節(jié)點樹的一個示例的框圖。
[0013]圖8是示出修改的改變記錄的一個示例的框圖。
[0014]圖9是示出用于基于對標記文本源文檔的修改對運行網(wǎng)頁進行動態(tài)更新并用于基于對運行網(wǎng)頁的修改對標記文本源文檔進行動態(tài)更新的方法的一個實施例的流程圖。[0015]詳細描述
[0016]在以下具體實施例中，對附圖進行了參考，附圖構(gòu)成了實施例的一部分且在其中作為示例示出了可在其中實踐本發(fā)明的各特定實施例?？梢岳斫?，可以使用其它實施例并且可以做出結(jié)構(gòu)上或邏輯上的改變而不背離本發(fā)明的范圍。因此，以下詳細描述并不旨在限制，并且本發(fā)明的范圍由所附權(quán)利要求來限定。
[0017]應(yīng)理解，此處描述的各示例性實施例的特征可相互組合，除非另外具體注明。
[0018]圖1是示出web開發(fā)工具100的一個實施例的框圖。web開發(fā)工具100包括文本源文檔102和該文本源文檔的運行表示104。在一個實施例中，文本源文檔102在網(wǎng)頁源代碼編輯器中被打開。在其他實施例中，文本源文檔102或文本源文檔102的各部分被顯示在網(wǎng)頁源代碼查看器中。在一個實施例中，文本源文檔102的運行表示104由瀏覽器提供。在其他實施例中，文本源文檔102的運行表示104由設(shè)計器、屬性窗格、或文本源文檔的運行表示的其他合適的可視化來提供。
[0019]對網(wǎng)頁源代碼的修改被應(yīng)用于該網(wǎng)頁的由運行表示104來表示的運行頁面實例，來對該運行頁面實例進行動態(tài)更新以包括對網(wǎng)頁源代碼的該修改。同樣，對網(wǎng)頁的運行頁面實例中的DOM元素的修改被應(yīng)用于網(wǎng)頁源代碼以對網(wǎng)頁源代碼進行動態(tài)更新來包括對該DOM元素的修改。以此方式，網(wǎng)頁開發(fā)人員可以修改瀏覽器中的網(wǎng)頁的運行實例中的DOM元素和/或修改網(wǎng)頁源代碼，并且這些修改分別被動態(tài)地應(yīng)用于網(wǎng)頁源代碼和/或網(wǎng)頁的運行實例。
[0020]文本源文檔102的網(wǎng)頁源代碼經(jīng)由鏈接112被鏈接到由運行表示104所表示的網(wǎng)頁的運行頁面實例中的相關(guān)聯(lián)的文檔對象模型(DOM)IlO元素。因此，通過選擇或突出顯示運行表示104中的DOM元素，與所選擇的或所突出顯示的DOM元素相關(guān)聯(lián)的網(wǎng)頁文本被選擇或突出顯示在文本源文檔102內(nèi)。同樣，通過選擇或突出顯示文本源文檔102內(nèi)的網(wǎng)頁文本的一部分，與網(wǎng)頁文本的所選擇的或突出顯示的部分相關(guān)聯(lián)的一個或多個DOM元素被選擇或突出顯示在運行表示104內(nèi)。以此方式，網(wǎng)頁開發(fā)人員可即時匹配DOM元素，因為它們與定義這些DOM元素的網(wǎng)頁文本源代碼一起被表示在網(wǎng)頁的運行實例中。
[0021]在一個實施例中，文本源文檔102被在源代碼編輯器中打開，這可包括適于打開、創(chuàng)建、編輯、以及保存網(wǎng)頁文本源文檔的任何合適的文本編輯器在一個實施例中，可被源代碼編輯器編輯的網(wǎng)頁文本源文檔包括標記文本，如超文本標記語言(HTML)、層疊樣式表(CSS)、可擴展標記語言(XML)、和/或可擴展超文本標記語言(XHTML)。網(wǎng)頁文本源文檔也可包括JavaScript或Jscript。如本文所使用的，“JS”被用于指示JavaScript和Jscript兩者。在其他實施例中，源代碼編輯器適于打開、創(chuàng)建、編輯以及保存包括其他合適的網(wǎng)頁標記文本和腳本語言的網(wǎng)頁文本源文檔。在一個實施例中，源代碼編輯器支持網(wǎng)頁文本源文檔的多個實例，使得相關(guān)或鏈接的各網(wǎng)頁文本源文檔可在源代碼編輯器中被同時打開。
[0022]在一個實施例中，運行表不104是適于表不D0M110的web瀏覽器。在一個實施例中，瀏覽器是遵循萬維網(wǎng)聯(lián)盟(W3C)的web瀏覽器。在一個實施例中，瀏覽器提供D0M110的瀏覽器不可知的表示，使得DOMl 10的表示不依賴于任何特定瀏覽器，如InternetExp1rer、FireFox、Chrome、Safar1、或者Opera。在另一實施例中，選擇瀏覽器使得D0M110的表示是基于所選瀏覽器的。瀏覽器可包括供用戶選擇D0M110的表示所基于的特定瀏覽器(如 Internet Explorer、FireFox、Chrome、Safar1、或者 Opera)的選項。在一個實施例中，瀏覽器支持DOM的多個實例，使得相關(guān)或鏈接的各網(wǎng)頁可同時運行在瀏覽器內(nèi)。運行表示1104還可包括運行腳本108和應(yīng)用程序編程接口(API)。腳本108和API106可以在運行表示104內(nèi)的D0M110中修改、刪除、和/或插入DOM元素。
[0023]圖2是示出適于實現(xiàn)先前參考圖1描述并示出的web開發(fā)工具100的各方面的計算設(shè)備/環(huán)境200的一個實施例的框圖。計算設(shè)備/環(huán)境200包括一個或多個處理單元212和系統(tǒng)存儲器214。取決于計算設(shè)備/環(huán)境200的確切配置和類型，存儲器214可以是易失性(如RAM)、非易失性(諸如ROM、閃存等)或兩者的結(jié)合。
[0024]計算設(shè)備/環(huán)境200還可具有附加的特征/功能。例如，計算設(shè)備/環(huán)境200還可包含附加存儲(可移動和/或不可移動)，包括但不限于磁盤、光盤或磁帶。這樣的附加存儲在圖2中由可移動存儲216和不可移動存儲218示出。計算機存儲介質(zhì)包括以用于存儲諸如計算機可讀指令、數(shù)據(jù)結(jié)構(gòu)、程序模塊或其他數(shù)據(jù)等的任何合適的方法或技術(shù)實現(xiàn)的易失性和非易失性、可移動和不可移動介質(zhì)。存儲器214、可移動存儲216、以及不可移動存儲218都是計算機存儲介質(zhì)(例如，儲存在被至少一個處理器執(zhí)行時使得該至少一個處理器執(zhí)行一種方法的計算機可執(zhí)行指令的計算機可讀存儲介質(zhì))的示例。計算機存儲介質(zhì)包括，但不限于，RAM、ROM、EEPR0M、閃存或其它存儲器技術(shù)、CD-ROM、數(shù)字多功能盤(DVD)或其它光盤存儲、磁帶盒、磁帶、磁盤存儲或其它磁性存儲設(shè)備、或能用于存儲所需信息且可以由計算設(shè)備/環(huán)境200訪問的任何其它介質(zhì)。任何這樣的計算機存儲介質(zhì)都可以是計算設(shè)備/環(huán)境200的一部分。
[0025]計算設(shè)備/環(huán)境200的各元件經(jīng)由一個或多個通信鏈路215通信耦合在一起。計算設(shè)備/環(huán)境200還包括允許計算設(shè)備/環(huán)境200與其它計算機/應(yīng)用226進行通信的一個或多個通信連接224。計算設(shè)備/環(huán)境200還可包括諸如鍵盤、定點設(shè)備(例如，鼠標)、筆、語音輸入設(shè)備、觸摸輸入設(shè)備等輸入設(shè)備222。計算設(shè)備/環(huán)境200還可包括諸如顯示器、揚聲器、打印機等輸出設(shè)備220。
[0026]圖2和以上討論旨在提供其中可實現(xiàn)一個或多個實施例的合適的計算環(huán)境的簡要概括描述，并且不旨在對各實施例的使用范圍或功能提出任何限制。
[0027]圖3是示出web開發(fā)工具300的一個實施例的功能框圖。在一個實施例中，web開發(fā)工具300提供先前參考圖1描述并示出的web開發(fā)工具100。web開發(fā)工具300包括標記文本302、標記解析器306、文檔節(jié)點樹310、D0M構(gòu)建器314、瀏覽器318、D0M修改監(jiān)聽器322、以及標記串行化器328。標記文本302被輸入到標記解析器306，如在304處所示。標記解析器306輸出文檔節(jié)點樹310，如在308處所示。文檔節(jié)點樹310被輸入到DOM構(gòu)建器314，如在312處所示。DOM構(gòu)建器314將DOM輸出給瀏覽器318，如在316處所示。DOM修改監(jiān)聽器322跟蹤瀏覽器318內(nèi)對DOM元素的改變，如在320處所示。DOM修改監(jiān)聽器322將改變信息輸出給文檔節(jié)點樹310，如在324處所示。標記串行化器328從文檔節(jié)點樹310接收改變信息，如在326處所示。標記串行化器328用經(jīng)串行化的改變信息來更新標記文本302，如在330處所示。
[0028]標記文本302包括HTML、CSS、XML、XHTML和/或其他合適的標記文本。在一個實施例中，包括標記文本302的源文檔在源代碼編輯器中被打開。在其他實施例中，web開發(fā)工具300訪問包括標記文本302的源文檔而不在源代碼編輯器中打開該源文檔。標記文本302定義用于提供網(wǎng)頁的任何合適數(shù)量的對象。在圖3所示的示例中，標記文本302包括HTML。該示例HTML定義用于提供包括文本“Hello”的DOM元素的一個對象。
[0029]由于標記文本302的文本特性，標記文本302的每一字符具有相對應(yīng)的行號(如在332處所示)以及該行的相對應(yīng)的相對字符號(如在334處所示)。例如，標記文本302中的字符“H”在行2、字符8處。標記文本302的每一字符還具有指示該字符相對于標記文本302的開頭的位置的字符號。例如，標記文本302中的字符“H”具有字符號26，因為它是標記文本302中的第26個字符。因而，標記文本302中的每一字符可被基于行號和該行內(nèi)的位置或基于指示該字符相對于標記文本302的開頭的位置的字符號來定位。同樣，標記文本302內(nèi)的一系列字符可基于行號范圍和在這些行內(nèi)的位置或基于字符號范圍來定位。如本文所使用的，這些行號范圍和這些行內(nèi)的位置或者字符號范圍被稱為“文本偏移量”。
[0030]標記文本302被標記解析器306解析以構(gòu)造文檔節(jié)點樹310。在一個實施例中，標記解析器306位于與源代碼編輯器相同的計算設(shè)備/環(huán)境上。在另一實施例中，標記解析器306位于與源代碼編輯器不同的計算設(shè)備/環(huán)境上。標記解析器306包括HTML解析器、CSS解析器、XML解析器、XHTML解析器、和/或其他合適的標記文本解析器。在一個實施例中，標記解析器306是遵循W3C的。在另一實施例中，標記解析器306基于與特定瀏覽器(如 Internet Explorer、FireFox、Chrome、Safar1、或者 Opera)相關(guān)聯(lián)的解析器。在其他實施例中，標記解析器306是包括與特定瀏覽器相關(guān)聯(lián)的基本實現(xiàn)以及基于對該特定瀏覽器運行時執(zhí)行和/或解析行為的知識對該解析實現(xiàn)的更改的混合解析器。
[0031]標記解析器306將來自標記文本302的與網(wǎng)頁相關(guān)的源文檔細節(jié)包括在文檔節(jié)點樹310中。除了 HTML對象和CSS對象外，標記解析器306包括來自標記文本302的其他細節(jié)，如可能被瀏覽器解析的文檔類型以及源內(nèi)評論。標記解析器306還將文本偏移量包括在文檔節(jié)點樹310中，指示標記文本302中源文檔細節(jié)的位置。文本偏移量將文檔節(jié)點樹310的每一節(jié)點映射到與該節(jié)點相關(guān)聯(lián)的標記文本。以此方式，在解析過程期間，維護文檔節(jié)點樹310和標記文本302之間的鏈接。這將標記解析器306與集成在瀏覽器內(nèi)的常規(guī)解析器區(qū)分開，常規(guī)解析器在呈現(xiàn)期間通常出于性能原因而丟棄或變換源文檔細節(jié)并且不維護源文檔和所呈現(xiàn)的文檔之間的任何鏈接。
[0032]在圖3所示的示例中，文檔節(jié)點樹310使用字符號范圍作為文本偏移量。例如，文檔節(jié)點樹310包括父節(jié)點“DIV”的文本偏移量“文本跨度:1-42”，這指示對象“DIV”在標記文本302中的位置。同樣，文檔節(jié)點樹310包括屬性“id”的文本偏移量“文本跨度:6-15”、子節(jié)點“P”的文本偏移量“文本跨度:23-34”、以及子節(jié)點“Hello”的文本偏移量“文本跨度:26-30”。因而，通過將每一對象的文本偏移量包括在文檔節(jié)點樹310內(nèi)，文檔節(jié)點樹310內(nèi)的每一對象被映射到與該對象相關(guān)聯(lián)的源文檔標記文本。
[0033]DOM構(gòu)建器314從文檔節(jié)點樹310構(gòu)造DOM和表示DOM的查看節(jié)點樹。DOM構(gòu)建器314將查看節(jié)點樹的每一節(jié)點映射到文檔節(jié)點樹的對應(yīng)節(jié)點，使得DOM的每一元素被鏈接到文檔節(jié)點樹310中的相關(guān)聯(lián)的對象并從而鏈接到與該對象相關(guān)聯(lián)的源文檔標記文本。在一個實施例中，DOM構(gòu)建器314將事件監(jiān)聽器注入DOM中以跟蹤對該DOM的修改。
[0034]在一個實施例中，DOM構(gòu)建器314構(gòu)造JS元素。一旦執(zhí)行，JS元素可構(gòu)造和/或修改DOM元素和查看節(jié)點樹內(nèi)的對應(yīng)節(jié)點，這可不具有文檔節(jié)點樹310內(nèi)的對應(yīng)節(jié)點。
[0035]在一個實施例中，DOM構(gòu)建器314構(gòu)造不依賴于任何特定瀏覽器(如InternetExplorer、FireFox、Chrome、Safari或者Opera)的瀏覽器不可知的D0M。在另一實施例中，DOM構(gòu)建器314被選擇使得DOM是基于所選瀏覽器來構(gòu)造的。DOM構(gòu)建器314可包括供用戶選擇DOM的構(gòu)造所基于的特定瀏覽器(如Internet Exp1rer>FireFox>Chrome>Safaris或者Opera)的選項。所構(gòu)造的DOM由瀏覽器318表示。在一個實施例中，瀏覽器318是遵循W3C的瀏覽器。在圖3所示的示例中，瀏覽器318顯示包括文本“Hello”的DOM元素，如標記文本302所定義的。
[0036]查看節(jié)點樹和文檔節(jié)點樹310將瀏覽器318內(nèi)的DOM元素鏈接到標記文本302。例如，通過選擇或突出顯示瀏覽器318內(nèi)的“Hello”，標記文本302內(nèi)的相關(guān)聯(lián)的標記文本被選擇或突出顯示。反過來，通過選擇或突出顯示標記文本302內(nèi)的“
Hello〈/p>”,瀏覽器318中相關(guān)聯(lián)的DOM元素“Hello”被選擇或突出顯示。
[0037]DOM修改監(jiān)聽器322跟蹤對瀏覽器318內(nèi)DOM元素的改變，如DOM變化。在一個實施例中，DOM修改監(jiān)聽器322跟蹤由于API106和/或腳本108 (圖1)而對DOM元素的改變。在一個實施例中，DOM修改監(jiān)聽器322生成對DOM元素的每一改變的改變記錄。每一改變記錄通過查看節(jié)點樹的節(jié)點和應(yīng)用于該節(jié)點的改變來標識經(jīng)修改的DOM元素。改變記錄還可標識已被刪除或插入的DOM元素。DOM修改監(jiān)聽器322隨后基于改變記錄來更新文檔節(jié)點樹310中的對應(yīng)節(jié)點。
[0038]在一個實施例中，可通過用戶經(jīng)由屬性面板或其他合適的機制來修改元素屬性和/或樣式屬性經(jīng)由文檔節(jié)點樹310作出對DOM元素的改變。在這一實施例中，屬性面板生成對元素的每一改變的改變記錄。每一改變記錄通過文檔節(jié)點樹的節(jié)點和應(yīng)用于該節(jié)點的改變來標識要修改的元素。改變記錄基于改變記錄來更新文檔節(jié)點樹310中的節(jié)點。DOM構(gòu)建器314隨后基于經(jīng)更新的文檔節(jié)點樹310來更新DOM和表示DOM的查看節(jié)點樹，使得在瀏覽器318中的DOM的表示包括該修改。
[0039]標記串行化器328將文檔節(jié)點樹310中的改變信息串行化以用于更新標記文本302。標記串行化器328將對文檔節(jié)點樹310的改變(例如，由于來自DOM修改監(jiān)聽器322或來自屬性面板的改變記錄)格式化以包括修改標記文本302來與經(jīng)更新的文檔節(jié)點樹310相匹配所需的信息。在一個實施例中，標記串行化器328所提供的信息包括指示標記文本302中要作出該改變的位置的文本偏移量以及要放置在所指示的位置處的新值。在一個實施例中，標記串行化器328將對文檔節(jié)點樹310的多個改變的改變信息組合成單個經(jīng)串行化的數(shù)據(jù)文件，以響應(yīng)于用戶動作在批處理過程中更新標記文本302。在另一實施例中，標記串行化器328可在包括多個數(shù)據(jù)文件的批處理過程中更新標記文本302。
[0040]還可對源代碼編輯器內(nèi)的標記文本302作出改變。在一個實施例中，在對標記文本302做出改變之后，標記解析器306執(zhí)行對標記文本302的部分解析以更新文檔節(jié)點樹310。在另一實施例中，在對標記文本302做出改變之后，標記解析器306執(zhí)行對標記文本302的完整解析以更新文檔節(jié)點樹310。DOM構(gòu)建器314隨后更新DOM和表示該DOM的查看節(jié)點樹，使得對標記文本302的改變被反映在瀏覽器318中。
[0041]圖4是示出映射到文檔節(jié)點樹404的HTML文本402的一個示例400的框圖。為了從HTML文本402構(gòu)造文檔節(jié)點樹404，HTML文本402被標記文本解析器解析，如先前參考圖3描述并示出的標記解析器306。在圖4所示的示例中，HTML文本402被解析，使得文檔節(jié)點樹404包括父節(jié)點“DIV”和子節(jié)點“SPAN”及“P”。子節(jié)點“SPAN (跨度)”包括進一步的子節(jié)點“TEXT (Hello)(文本(你好))”。子節(jié)點“P”包括進一步的子節(jié)點“TEXT (fforId)(文本(世界))”和具有值“f00”的屬性“Class (類)”。
[0042]因而，文檔節(jié)點樹404按結(jié)構(gòu)化樹格式來維護HTML文本402源文檔細節(jié)。如先前參考圖3描述并示出的，文檔節(jié)點樹404還包括每一父節(jié)點和子節(jié)點的文本偏移量，以分別指示與每一父節(jié)點和子節(jié)點相關(guān)聯(lián)的HTML文本在HTML文本402內(nèi)的特定位置。
[0043]圖5是示出映射到查看節(jié)點樹508的文檔節(jié)點樹506的一個示例500的框圖。文檔節(jié)點樹506按結(jié)構(gòu)化樹格式來提供標記文檔502的源文檔細節(jié)。查看節(jié)點樹508表示HTML實例管理器504中DOM的一個實例。在一個實施例中，HTML實例管理器504可以管理查看節(jié)點樹的多個實例。在一個實施例中，在HTML實例管理器504內(nèi)表示DOM的查看節(jié)點樹508是基于所選瀏覽器的。HTML實例管理器504可包括供用戶選擇查看節(jié)點樹508所基于的特定瀏覽器(如 Internet Explorer、FireFox、Chrome、Safar1、或者 Opera)的選項。
[0044]查看節(jié)點樹508的每一節(jié)點包括將每一節(jié)點映射到文檔節(jié)點樹506中的相關(guān)聯(lián)的節(jié)點的標識符。在一個實施例中，該標識符被先前參考圖3描述并示出的DOM構(gòu)建器314分配給查看節(jié)點樹的每一節(jié)點。在一個實施例中，該標識符是數(shù)字。在圖5所示的示例中，查看節(jié)點樹508的標識符“ 105”被映射到文檔節(jié)點樹506的父節(jié)點“DIV”。同樣，標識符“ 106”被映射到子節(jié)點“SPAN”且標識符“ 107”被映射到子節(jié)點“TEXT (Hello) ”。因而，查看節(jié)點樹的每一標識符將查看節(jié)點樹的一節(jié)點鏈接到文檔節(jié)點樹中的相關(guān)聯(lián)的節(jié)點。
[0045]圖6是示出瀏覽器實例614所表示的DOM的查看節(jié)點樹610的一個示例600的框圖。應(yīng)用602包括HTML實例管理器608，該HTML實例管理器608管理查看節(jié)點樹610。在一個實施例中，HTML實例管理器608管理查看節(jié)點樹的多個實例。應(yīng)用606包括實例管理器612，該實例管理器612管理瀏覽器實例614。在一個實施例中，實例管理器612管理多個瀏覽器實例。瀏覽器實例614表示DOM的實例。應(yīng)用602通過通信鏈路(COM) 604通信耦合到應(yīng)用606。
[0046]查看節(jié)點樹610的每一節(jié)點的標識符被鏈接到瀏覽器實例614所表示的相關(guān)聯(lián)的DOM元素，如查看節(jié)點樹610中每一“D0M代理”所指示的。因而，瀏覽器實例614所表示的每一 DOM元素被鏈接或映射到查看節(jié)點樹610的一節(jié)點。因此，瀏覽器實例614中表示的每一 DOM元素被通過查看節(jié)點樹和文檔節(jié)點樹鏈接到標記文本源文檔中的標記文本。
[0047]在圖6所示的示例中，查看節(jié)點樹610的標識符“105”被鏈接到瀏覽器實例614所表示的DOM元素的標識符“ 105”的DOM代理。同樣，標識符“ 106”被鏈接到標識符“ 106”的DOM代理且標識符“107”被鏈接到標識符“107”的DOM代理。在該示例中，查看節(jié)點樹610包括將子節(jié)點“TEXT (Hello) ”(圖5)鏈接到瀏覽器實例614內(nèi)的DOM元素“Hello”的標識符“107”。
[0048]圖7是示出在修改之前和之后的文檔節(jié)點樹的一個示例的框圖。文檔節(jié)點樹702是修改之前的且文檔節(jié)點樹704是修改之后的。在這一示例中，對對象〈Pstyle= “font-size: 10pt” >Hello〈/p>作出了改變，以將字體大小從在706處所示的IOpt(磅)改為在708處所示的25pt。在修改之前，標記文本已被解析來構(gòu)造文檔節(jié)點樹702，并且文檔節(jié)點樹702已被用來構(gòu)造在瀏覽器中表示的D0M。
[0049]在一個實施例中，修改是對標記文本作出的。經(jīng)修改的標記文本隨后被部分地解析或完全地解析。在一個實施例中，在解析期間使用樹差異(diffing)算法以確定對文檔節(jié)點樹的改變。在圖7所示的示例中，在解析之后，文檔節(jié)點樹704被提供，其中對象〈Pstyle= “font-size: 10pt，，>Hello〈/p> 已被改變成 <p style= “font-size:25pt”>Hello〈/P>。根據(jù)對文檔節(jié)點樹的改變，生成如圖8所示的改變記錄800。
[0050]圖8是示出修改的改變記錄800的一個示例的框圖。示例改變記錄800是針對先前參考圖7描述并示出的對字體大小的修改的。在其他示例中，改變記錄800可被用來修改其他合適的值、屬性、和/或樣式，或用來插入和/或刪除DOM元素。改變記錄800包括對其作出了修改的節(jié)點“STYLE (樣式)”、被修改的值或?qū)傩浴癴ont-size (字體大小)”、所指示的屬性的舊值“10pt”、以及所指示的屬性的新值“25pt”。使用改變記錄800，文檔節(jié)點樹被更新且改變被轉(zhuǎn)發(fā)給實例管理器(圖5)以更新瀏覽器所表示的查看節(jié)點樹和D0M。因此，在對標記文本進行了修改之后，標記文本、文檔節(jié)點樹、以及瀏覽器所表示的DOM被同步。[0051 ] 在另一實施例中，對DOM元素的改變是通過元素屬性和/或樣式屬性來作出的。在一個實施例中，元素屬性和/或樣式屬性經(jīng)由web開發(fā)工具的屬性窗格或其他合適的機制被修改。如上所述，屬性窗格可被用來改變文檔節(jié)點樹中的(而非標記文本中的)元素屬性和/或樣式屬性。在這一實施例中，圖8中不出的改變記錄800是由屬性窗格響應(yīng)于對兀素屬性和/或樣式屬性的修改而生成的。使用改變記錄800，文檔節(jié)點樹被更新且改變被轉(zhuǎn)發(fā)給實例管理器(圖5)以更新瀏覽器所表示的查看節(jié)點樹和D0M。另外，與修改相關(guān)聯(lián)的標記文本也基于文檔節(jié)點樹與標記文本之間通過文檔節(jié)點樹中的文本偏移量提供的映射被更新。在該示例中，文本“10pt”的位置處的標記文本被用文本“25pt”替換。因此，在對元素屬性和/或樣式屬性進行了修改之后，標記文本、文檔節(jié)點樹、以及瀏覽器所表示的DOM被同步。
[0052]在又一實施例中，對DOM元素的改變通過DOM變化事件來檢測。DOM變化事件所檢測到的對DOM元素的改變可以是由于例如JS的執(zhí)行。在一個實施例中，對DOM元素的改變也通過基于用戶動作或定時器來分析表示DOM的查看節(jié)點樹以找出改變來確定。DOM變化事件所檢測到的或通過對查看節(jié)點樹的分析而確定的每一改變被用來生成圖8中示出的改變記錄800。通過使用改變記錄800，文檔節(jié)點樹和標記文本被更新。因此，在對DOM進行了修改之后，標記文本、文檔節(jié)點樹、以及瀏覽器所表示的DOM被同步。
[0053]圖9是示出用于基于對標記文本源文檔的修改對運行網(wǎng)頁進行動態(tài)更新并用于基于對運行網(wǎng)頁的修改對標記文本源文檔進行動態(tài)更新的方法900的一個實施例的流程圖。在902，標記文本源文檔(例如，先前參考圖3描述并示出的標記文本302)在源代碼編輯器中被打開。在904，構(gòu)造映射到標記文本源文檔的文檔節(jié)點樹(例如，先前參考圖3描述并示出的文檔節(jié)點樹310)。在906，構(gòu)造DOM和表示映射到文檔節(jié)點樹的DOM的查看節(jié)點樹(例如，先前參考圖5描述并示出的查看節(jié)點樹508)。在908，在瀏覽器中表示DOM(例如，先前參考圖1描述并示出的運行表示104)。
[0054]在910，跟蹤對DOM元素的修改以提供第一改變信息(例如，如先前參考圖8描述并示出的改變記錄800)。第一改變信息可由DOM修改監(jiān)聽器322 (圖3)來提供或通過用戶對元素屬性和/或樣式屬性的修改來提供。在912，第一改變信息被應(yīng)用于標記文本源文檔以更新該標記文本源文檔。第一改變信息通過首先基于該第一改變信息來更新文檔節(jié)點樹并隨后基于該第一改變信息和文檔節(jié)點樹中的文本偏移量來更新標記文本源文檔，而被應(yīng)用于標記文本源文檔。
[0055]在914，跟蹤對標記文本源文檔的修改以提供第二改變信息(例如，如先前參考圖8描述并示出的改變記錄800)。在916，第二改變信息被應(yīng)用于DOM元素以更新瀏覽器中所表示的DOM元素。第二改變信息通過首先基于該第二改變信息來更新文檔節(jié)點樹并隨后基于文檔節(jié)點樹來更新DOM和表示該DOM的查看節(jié)點樹，而被應(yīng)用于DOM元素。
[0056]各實施例提供了用于將瀏覽器中表示的DOM元素與用來構(gòu)造該DOM元素的標記文本源文檔中的標記文本相鏈接的web開發(fā)工具。標記文本源文檔被逐段解析以構(gòu)造D0M，使得初始源代碼與所構(gòu)造的DOM元素之間的精確映射得到維護。使用所公開的web開發(fā)工具，對應(yīng)的源代碼可基于對運行頁面中的DOM元素的修改而被動態(tài)更新，且運行頁面中的對應(yīng)DOM元素可基于對源代碼的修改而被動態(tài)更新。
[0057]盡管此處說明并描述了具體實施例，但本領(lǐng)域技術(shù)人員可以理解，可用各種替換和/或等價實現(xiàn)來替換所示出并描述的具體實施例而不背離本發(fā)明的范圍。本申請旨在覆蓋此處討論的具體實施例的任何改編或變型。因此，本發(fā)明旨在僅由權(quán)利要求書及其等效方案來限制。
【權(quán)利要求】
1.一種方法，包括: 解析文本源文檔來構(gòu)造文檔節(jié)點樹，使得所述文檔節(jié)點樹包括與所述文檔節(jié)點樹的每一節(jié)點相對應(yīng)的指示文本在所述文本源文檔內(nèi)的位置的文本偏移量； 根據(jù)所述文檔節(jié)點樹來構(gòu)造文檔對象模型(DOM)和表示所述DOM的查看節(jié)點樹,構(gòu)造所述查看節(jié)點樹包括將所述查看節(jié)點樹映射到所述文檔節(jié)點樹； 提供所述DOM的運行表示；以及 以下之一:跟蹤對所述DOM的修改以提供第一改變信息以及跟蹤對所述文本源文檔的修改以提供第二改變信息。
2.如權(quán)利要求1所述的方法，其特征在于，還包括: 以下之一:將所述第一改變信息應(yīng)用于所述文本源文檔以更新所述文本源文檔以及將所述第二改變信息應(yīng)用于所述DOM以更新所述DOM的運行表示。
3.如權(quán)利要求1所述的方法，其特征在于，跟蹤對所述DOM的修改包括跟蹤DOM變化。
4.如權(quán)利要求1所述的方法，其特征在于，所述第一改變信息標識所述文檔節(jié)點樹的與對所述DOM的修改相對應(yīng)的要編輯、刪除、或插入數(shù)據(jù)的節(jié)點。
5.如權(quán)利要求1所述的方法，其特征在于，所述第二改變信息標識所述文檔節(jié)點樹的與對所述文本源文檔的修改相對應(yīng)的要編輯、刪除、或插入數(shù)據(jù)的節(jié)點。
6.如權(quán)利要求1所述的方法，其特征在于，跟蹤對所述DOM的修改包括跟蹤通過以下之一所應(yīng)用的用戶編輯:屬性面板以及對所述DOM的運行表示的直接操縱。
7.如權(quán)利要求1所述的方法，其特征在于，將所述查看節(jié)點樹映射到所述文檔節(jié)點樹包括向所述查看節(jié)點樹中的每一節(jié)點分配一標識符，所述查看節(jié)點樹的每一標識符映射到所述文檔節(jié)點樹的對應(yīng)節(jié)點，以及 其中所述第一改變信息包括所述查看節(jié)點樹中的與所述DOM的修改相對應(yīng)的節(jié)點的標識符。
8.如權(quán)利要求1所述的方法，其特征在于，還包括: 將多個DOM修改的第一改變信息串行化。
9.如權(quán)利要求8所述的方法，其特征在于，還包括: 將經(jīng)串行化的第一改變信息應(yīng)用于所述文本源文檔以更新所述文本源文檔。
10.一種存儲用于控制計算設(shè)備以便執(zhí)行一種方法的計算機可執(zhí)行指令的計算機可讀存儲介質(zhì)，所述方法包括: 解析標記文本源文檔以構(gòu)造文檔節(jié)點樹，使得所述文檔節(jié)點樹的每一節(jié)點包括文本偏移量和標記文本源文檔細節(jié)，所述文檔節(jié)點樹的每一節(jié)點中的文本偏移量指示所述標記文本源文檔內(nèi)的與所述文檔節(jié)點樹的每一節(jié)點相對應(yīng)的標記文本的位置； 根據(jù)所述文檔節(jié)點樹來構(gòu)造文檔對象模型(DOM)和表示所述DOM的查看節(jié)點樹,構(gòu)造所述查看節(jié)點樹包括將所述查看節(jié)點樹映射到所述文檔節(jié)點樹； 提供所述DOM的運行表示，使得每一 DOM元素經(jīng)由所述查看節(jié)點樹和所述文檔節(jié)點樹被鏈接到與該DOM元素相關(guān)聯(lián)的標記文本； 跟蹤對DOM元素的修改以提供第一改變信息；以及 跟蹤對所述標記文本源文檔的修改以提供第二改變信息。
【文檔編號】G06F17/27GK103635897SQ201280030637
【公開日】2014年3月12日 申請日期:2012年6月6日 優(yōu)先權(quán)日:2011年6月23日
【發(fā)明者】M·C·范寧, M·豪爾, G·林斯各特, E·特沃倫 申請人:微軟公司