用于提供多個視圖的瀏覽器級背景頁面的制作方法
【專利說明】
[0001] 相關(guān)申請案的奪叉參考
[0002] 本申請案主張2012年8月9日申請的標題為"用于提供多視圖的瀏覽器級背景頁 面（BROWSER-LEVEL BACKGROUND PAGE FOR PROVIDING MULTIPLE VIEWS) "的第 13/570, 962 號美國非臨時專利申請案的優(yōu)先權(quán)且為其接續(xù)案，所述申請案的揭示內(nèi)容的全文以引用方 式并入本文中。
技術(shù)領(lǐng)域
[0003] 本說明書通常涉及一種模型-視圖-控制器框架。
【背景技術(shù)】
[0004] 通常，網(wǎng)絡(luò)應(yīng)用程序現(xiàn)嘗試遵循用戶接口的模型-視圖-控制器（MVC)設(shè)計模式。 MVC設(shè)計模式將應(yīng)用程序劃分成三個責(zé)任區(qū)域：(a)模型：表示應(yīng)用程序狀態(tài)的域?qū)ο蠡驍?shù) 據(jù)結(jié)構(gòu)；(b)視圖，其觀察狀態(tài)并為用戶生成輸出；及（c)控制器，其將用戶輸入翻譯成操作 模型。網(wǎng)絡(luò)應(yīng)用程序常常遇到的一個問題為表示網(wǎng)絡(luò)應(yīng)用程序的文檔對象模型（DOM)樹是 統(tǒng)一的且不提供任何封裝抽象化。這導(dǎo)致難以維持基元數(shù)據(jù)類型（例如，模型及視圖）的 邏輯分離。
[0005] 對MVC設(shè)計模式的一種變通方案為由用戶接口開發(fā)人員提供替代操作手段。然 而，這個變通方案導(dǎo)致大量用戶接口專用API。因此，需要一種用以解決本發(fā)明技術(shù)的缺點 且提供其它新穎及創(chuàng)新特征的系統(tǒng)及方法。

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

[0006] 根據(jù)一個一般方面，一種用于實施網(wǎng)絡(luò)應(yīng)用程序的方法可包含使用計算裝置的處 理器，將網(wǎng)絡(luò)應(yīng)用程序的網(wǎng)頁的一個元素投影到所述網(wǎng)頁的視圖中，所述視圖為所述網(wǎng)頁 的模型的視覺表示，所述模型包含應(yīng)用程序數(shù)據(jù)及規(guī)則?？刂破骺烧{(diào)解輸入并將輸入轉(zhuǎn)換 成針對所述視圖或所述模型的命令。所述控制器可使用表示影子文檔對象模型子樹中界定 的位置的插入點調(diào)換投影在所述網(wǎng)頁的所述視圖中的所述一個元素與另一元素，而不影響 所述網(wǎng)頁的文檔對象模型樹。
[0007] 根據(jù)另一一般方面，一種系統(tǒng)可包含存儲器；及處理器，所述處理器可操作地耦合 到所述存儲器且經(jīng)配置以執(zhí)行代碼以：提供包含模型列表的HTML文檔，其中所述列表中的 每一模型為所述HTML文檔的主體的子代；在所述HTML文檔的所述主體中創(chuàng)建影子文檔對 象模型子樹，所述影子文檔對象模型子樹包含一或多個插入點；及使用所述一或多個插入 點的匹配準則，指定在網(wǎng)頁的視圖中顯示所述模型列表中的哪個模型。
[0008] 根據(jù)又一一般方面，一種非暫時性計算機可讀媒體可含有導(dǎo)致計算裝置進行如下 操作的可執(zhí)行代碼：使用所述計算裝置的處理器，將網(wǎng)頁的一個元素投影到所述網(wǎng)頁的視 圖中；及使用所述處理器，使用表示影子文檔對象模型子樹中界定的位置的插入點調(diào)換投 影在所述網(wǎng)頁的所述視圖中的所述一個元素與另一元素，而不通知瀏覽器級背景頁面。所 述瀏覽器級背景頁面可為缺乏其自身用戶接口且充當(dāng)網(wǎng)絡(luò)應(yīng)用程序的所有視圖的容器的 腳本文件，包含所述網(wǎng)頁的所述視圖。由所述網(wǎng)絡(luò)應(yīng)用程序所創(chuàng)建的每一窗口可展示所述 瀏覽器級背景頁面的不同視圖。
[0009] 在附圖及下文描述中闡述一或多個實施方案的細節(jié)。從【具體實施方式】、【附圖說明】 及權(quán)利要求書，其它特征將顯而易見。
【附圖說明】
[0010] 圖1為網(wǎng)絡(luò)應(yīng)用程序框架的實例框圖。
[0011] 圖2為影子文檔對象模型框架的實例框圖。
[0012] 圖3為另一影子文檔對象模型框架的實例框圖。
[0013] 圖4A為根據(jù)此處所描述技術(shù)的網(wǎng)絡(luò)應(yīng)用程序的用戶接口的實例。
[0014] 圖4B為根據(jù)此處所描述技術(shù)的網(wǎng)絡(luò)應(yīng)用程序的另一用戶接口的實例。
[0015] 圖5A、5B及5C包含圖4A及4B的網(wǎng)絡(luò)應(yīng)用程序的代碼的實例。
[0016] 圖6為說明圖1至5的系統(tǒng)的實例操作的流程圖。
[0017] 圖7為展示可用于實施根據(jù)圖1至6的系統(tǒng)及方法的實例或代表性計算裝置及相 關(guān)元件的框圖。
[0018] 各個圖式中的相似參考符號指示相似元件。
【具體實施方式】
[0019] 文檔對象模型（DOM)為表示HTML、XHTML及XML文檔中的對象及與所述對象交互 的跨平臺且獨立于語言的規(guī)約。如本文中所使用，"文檔"是指DOM的原始文檔。"節(jié)點"是 指參與樹的任何DOM對象。DOM "樹"是指由DOM對象組成的任何樹。DOM樹中的對象可通 過對所述對象使用方法來尋址及操控。"D0M結(jié)構(gòu)"是指DOM樹或DMO樹的片段。
[0020] 網(wǎng)絡(luò)應(yīng)用程序可遵循將應(yīng)用程序劃分成三個責(zé)任區(qū)域的用戶接口的模型-視 圖-控制器（MVC)設(shè)計模式：(a)模型：表示應(yīng)用程序狀態(tài)的域?qū)ο蠡驍?shù)據(jù)結(jié)構(gòu)；(b)視圖， 其觀察狀態(tài)并為用戶生成輸出；及（c)控制器，其將用戶輸入翻譯成操作模型。網(wǎng)絡(luò)應(yīng)用程 序常常遇到的一個問題為表示網(wǎng)絡(luò)應(yīng)用程序的DOM樹是統(tǒng)一的且不提供任何封裝抽象化。 這導(dǎo)致難以維持基元數(shù)據(jù)類型（例如，模型及視圖）的邏輯分離。
[0021] 使用"影子D0M"（例如，參考圖1至7更詳細描述的插入點及其匹配準則）的實 施方案，可能在視圖基元數(shù)據(jù)類型與模型基元數(shù)據(jù)類型之間提供更佳關(guān)注點分離。借助于 影子DOM，HTML文檔由一系列模型組成，且每一模型為文檔主體的子代。影子DOM子樹創(chuàng)建 在文檔主體上。這個子樹表示視圖。在這個子樹中，一或多個插入點用作視圖中的窗孔，模 型位通過其予以透視，且插入點的匹配準則被控制器用于指定在視圖中顯示哪個模型。匹 配準則可由〈內(nèi)容〉HTML元素上的"選擇"屬性來表示。
[0022] 在控制器（例如，網(wǎng)絡(luò)應(yīng)用程序）修改這個屬性值時，匹配準則發(fā)生改變，此情況 又觸發(fā)代替這個〈內(nèi)容〉HTML元素的呈現(xiàn)內(nèi)容發(fā)生改變。網(wǎng)絡(luò)應(yīng)用程序的開發(fā)人員可指定 文檔中的DOM元素為視圖并改變匹配準則以匹配這些DOM元素中的任一者以代替〈內(nèi)容 >HTML元素顯現(xiàn)所述DOM元素，借此在視圖內(nèi)容與如何控制其選擇之間提供清晰分離。模型 位從不改變或由控制器（或視圖）以任何方式得知，即使在視圖改變時也不改變。因此，可 操控、修改及增強網(wǎng)絡(luò)應(yīng)用程序的用戶接口及用戶接口的組件，而無需改變網(wǎng)絡(luò)應(yīng)用程序 模型的文檔標記的基本代碼。
[0023] 圖1為網(wǎng)絡(luò)應(yīng)用程序框架的實例框圖。在這個背景下，"網(wǎng)絡(luò)應(yīng)用程序"可經(jīng)配置 以為用戶執(zhí)行單個任務(wù)或多個任務(wù)。在這個實施方案中，網(wǎng)絡(luò)應(yīng)用程序可經(jīng)配置以由網(wǎng)頁 瀏覽器執(zhí)行或解譯。這等同包含機器可執(zhí)行代碼且經(jīng)配置以由處理器直接執(zhí)行或經(jīng)由客戶 端裝置的操作系統(tǒng)執(zhí)行的本機應(yīng)用程序，而網(wǎng)絡(luò)應(yīng)用程序可不能在沒有網(wǎng)頁瀏覽器的協(xié)助 下執(zhí)行或顯示。因此，網(wǎng)絡(luò)應(yīng)用程序可在具有專用用戶接口的瀏覽器內(nèi)部運行，且通常提供 比獨立網(wǎng)站更豐富及具交互性但沒有桌面應(yīng)用程序那么繁瑣及麻煩的功能性及體驗。網(wǎng)絡(luò) 應(yīng)用程序的實例包含在瀏覽器內(nèi)部運行的游戲、照片編輯器及視頻播放器。
[0024] 網(wǎng)絡(luò)應(yīng)用程序開發(fā)人員經(jīng)常需要提供DOM結(jié)構(gòu)的封裝。雖然為一個文檔樹的部 分，但可存在許多DOM功能片段（或DOM子樹），以及關(guān)于這些獨立操作片段的假設(shè)。這種 類型的封裝被稱為"功能封裝"，與基于應(yīng)用程序內(nèi)的數(shù)據(jù)及狀態(tài)的可信及有保證的安全性 處理有限信息流的"可信封裝"相對。功能封裝在文檔樹中建立功能邊界。功能邊界（或 "邊界"）為兩個松散耦合的功能單元之間的功能關(guān)注點的輪廓。
[0025] 網(wǎng)絡(luò)應(yīng)用程序用戶接口可由若干用戶接口元件（或"小部件"）組成，每一用戶接 口元件表示DOM子樹。在小部件的任務(wù)為托管其它小部件的情況中，小部件可需要獲悉其 DOM子樹終止于何處及另一小部件的DOM子樹開始于何處。
[0026] 這需要在由外部角色（例如，耗用這些小部件的網(wǎng)絡(luò)應(yīng)用程序）操作一在文檔樹 中添加、移動或移除一小部件時觀察文檔樹中的功能邊界是否甚至更大。除非小部件顧客 準確知道如何設(shè)計小部件的DOM結(jié)構(gòu)，否則顧客不可能對小部件進行合理操作。
[0027] 如圖1中所描繪的實施方案中展示，實例應(yīng)用程序容器110可包含"導(dǎo)航"小部件 112、"聊天"小部件114、"視圖觸發(fā)器1"小部件116、"視圖觸發(fā)器2"小部件118、"更多視 圖"小部件120及"選定視圖"小部件122。
[0028] 在網(wǎng)絡(luò)應(yīng)用程序模型化為DOM子樹時，如圖1中所展示，應(yīng)用程序容器節(jié)點IlOA 可包含作為其子代子樹的節(jié)點聊天114A，其又包含作為其子節(jié)點的視圖面板116A及導(dǎo) 航112A。視圖面板116A可包含作為其子代的視圖觸發(fā)器1117A、視圖117B、視圖觸發(fā)器 2118A、視圖118B等等、直到由視圖觸發(fā)器N 120A所說明的任何數(shù)目的視圖觸發(fā)器、及視圖 N 120B。
[0029] 圖2為影子文檔對象模型（DOM)框架的實例框圖。如圖2中所展示，作為實例，文 檔樹210可包含影子宿主212及一或多個子節(jié)點213、214、215、216、217及218。文檔樹210 可包含任何數(shù)目的子節(jié)點。影子DOM子樹220可例如由開發(fā)文檔樹210的網(wǎng)絡(luò)應(yīng)用程序開 發(fā)人員創(chuàng)建。
[0030] "影子D0M"結(jié)構(gòu)容許多個影子DOM子樹220 (除文檔樹210外）在被呈現(xiàn)（例如， 通過瀏覽器的呈現(xiàn)器進程，如下文更詳細描述）時合成一個更大樹。多個影子DOM子樹220 的存在是通過使文檔樹210中的任何元素托管一或多個額外DOM子樹（例如，影子DOM子 樹220)來實現(xiàn)。這些影子DOM子樹220可通過建立封裝邊界同時保留標準DOM可組合性 語義的規(guī)則集合來管制。
[0031] 影子DOM子樹220之間的封裝邊界被稱為影子邊界230。托管影子DOM子樹的元 素被稱為影子宿主212,且影子DOM子樹的根節(jié)點被稱為影子根240。影子根240可具有一 或多個子節(jié)點，例如節(jié)點242、243、244、245、246及247。
[0032] 在一些實施方案中，實施圖1及2中所描述的網(wǎng)絡(luò)應(yīng)用程序的網(wǎng)頁瀏覽器可在多 進程架構(gòu)中操作，使得單個瀏覽器進程管理網(wǎng)頁瀏覽器的所有標簽、窗口及"chrome"（例 如，用戶接口，例如搜索欄、圖標、網(wǎng)頁瀏覽器的網(wǎng)頁外區(qū)域）。瀏覽器進程可創(chuàng)建許多單 獨呈現(xiàn)器進程（也被稱為"呈現(xiàn)器"），其可各負責(zé)呈現(xiàn)網(wǎng)頁。呈現(xiàn)器進程可含有用于處理 HTML、JavaScript、CSS、圖像等等的所有復(fù)雜邏輯。每一呈現(xiàn)器進程在沙盒中運行，此情 況意味著幾乎不可直接訪問計算裝置的磁盤、網(wǎng)絡(luò)或顯示器。與網(wǎng)絡(luò)應(yīng)用程序的所有交互 (包含用戶輸入事件及屏幕繪制）可經(jīng)受瀏覽器進程。這使瀏覽器進程監(jiān)控呈現(xiàn)器的可疑 活動，從而如果其懷疑