本發(fā)明涉及復(fù)雜web應(yīng)用中大量前端元素?cái)?shù)據(jù)、業(yè)務(wù)邏輯以及界面之間的管理，尤其涉及一種雙向數(shù)據(jù)綁定的特性。
背景技術(shù)：
：：早期的web應(yīng)用以瀏覽為主，業(yè)務(wù)邏輯基本上僅限于表單的提交，javascript的作用體現(xiàn)在對(duì)表單的控制上，復(fù)雜度較低。90年代末，ajax橫空出世，意味著瀏覽器已經(jīng)可以承載更復(fù)雜的應(yīng)用功能，2010年后，伴隨著“web3.0”的浪潮，facebook、微博等各類大型web應(yīng)用走向成熟，其程序的框架插件眾多、體系繁復(fù)，復(fù)雜度達(dá)到了一個(gè)新的水準(zhǔn)，往往讓開發(fā)維護(hù)無(wú)所適從。為了更好地在前端進(jìn)行模塊化開發(fā)，合理組織業(yè)務(wù)數(shù)據(jù)，讓界面和業(yè)務(wù)數(shù)據(jù)之間高效交互，MVVM框架應(yīng)運(yùn)而生，而雙向數(shù)據(jù)綁定是MVVM框架的核心特性，也是管理web應(yīng)用中復(fù)雜對(duì)象、數(shù)據(jù)、界面及其之間依賴關(guān)系的關(guān)鍵所在。現(xiàn)有MVVM框架的雙向數(shù)據(jù)綁定特性主要使用數(shù)據(jù)循環(huán)臟檢測(cè)的方式實(shí)現(xiàn)，代表性的有AngularJs、Backbone等。數(shù)據(jù)循環(huán)臟檢測(cè)實(shí)現(xiàn)方式在每次事件觸發(fā)中都將對(duì)所有監(jiān)聽器進(jìn)行遍歷，頁(yè)面上的指令和監(jiān)聽數(shù)據(jù)越多，遍歷時(shí)間越長(zhǎng)，頁(yè)面可能由于循環(huán)時(shí)間過(guò)長(zhǎng)而出現(xiàn)假死情況。而且，單個(gè)頁(yè)面中能夠承載的監(jiān)聽數(shù)據(jù)量也十分有限。本發(fā)明提出一種基于訪問(wèn)器劫持方法的雙向數(shù)據(jù)綁定特性實(shí)現(xiàn)方法，相比傳統(tǒng)方法，效率更高，邏輯更清晰直觀，且單頁(yè)面支持監(jiān)聽數(shù)據(jù)量也更多。本發(fā)明中涉及到的名詞解釋。web應(yīng)用：Web應(yīng)用程序是一種可以通過(guò)Web訪問(wèn)的應(yīng)用程序。Web應(yīng)用程序的一個(gè)最大好處是用戶很容易訪問(wèn)應(yīng)用程序。用戶只需要有瀏覽器即可，不需要再安裝其他軟件。MVVM框架：MVVM是Model-ViewModel-View的簡(jiǎn)寫，被認(rèn)為是前端開發(fā)領(lǐng)域最先進(jìn)的設(shè)計(jì)模式，能夠做到關(guān)注點(diǎn)分離，降低數(shù)據(jù)、用戶界面與業(yè)務(wù)邏輯之間的耦合程度。MVVM框架就是符合MVVM思想的前端框架。雙向數(shù)據(jù)綁定：雙向數(shù)據(jù)綁定是MVVM框架的核心特性，其內(nèi)涵是：界面的改變能夠反應(yīng)在數(shù)據(jù)上，而數(shù)據(jù)改變后同時(shí)能夠更新頁(yè)面。技術(shù)實(shí)現(xiàn)要素：本發(fā)明的目的是克服現(xiàn)有技術(shù)的不足，提供一種效率更高，更易于使用的數(shù)據(jù)雙向綁定實(shí)現(xiàn)方法?；谠L問(wèn)器劫持的前端數(shù)據(jù)雙向綁定實(shí)現(xiàn)方法，包括如下步驟：1)在界面模板的標(biāo)簽內(nèi)添加各類必要的綁定屬性，并指定與該屬性綁定的監(jiān)聽數(shù)據(jù)名；2)新建監(jiān)聽數(shù)據(jù)的所屬的ViewModel對(duì)象，初始化其下的監(jiān)聽數(shù)據(jù)；3)掃描界面標(biāo)簽上的綁定屬性，當(dāng)綁定屬性綁定的監(jiān)聽數(shù)據(jù)名與該標(biāo)簽所屬ViewModel下的與監(jiān)聽數(shù)據(jù)名相同時(shí)，將該標(biāo)簽對(duì)應(yīng)的DOM對(duì)象和監(jiān)聽數(shù)據(jù)進(jìn)行綁定；4)利用Object.defineProperty接口，為需要監(jiān)聽的數(shù)據(jù)設(shè)置writable屬性為true；設(shè)置enumerable屬性為true；設(shè)置configurable屬性為true；5)利用Object.defineProperty接口，為需要監(jiān)聽的數(shù)據(jù)設(shè)置初始值；6)利用Object.defineProperty接口，為需要監(jiān)聽的數(shù)據(jù)設(shè)置屬性的重寫器；為需要監(jiān)聽的數(shù)據(jù)設(shè)置屬性的讀取器，實(shí)現(xiàn)前端數(shù)據(jù)雙向綁定。以上方案中，各步驟可采用如下具體方法：步驟1)中綁定屬性以“gs”作為前綴，以“-”作為連接符，具體分類包括：1)作用域?qū)傩裕阂浴癵s-controller-”開頭，后接用戶自定義的ViewModel類名稱，用于和具體的ViewModel對(duì)象相互綁定；2)數(shù)據(jù)填充屬性：用于將數(shù)據(jù)打印到頁(yè)面上；3)插入移除屬性：用于控制不同情況下數(shù)據(jù)的顯示與否；4)特性屬性：用于控制各種html標(biāo)簽支持的特性；5)樣式屬性：用于控制CSS樣式；6)事件屬性：以“gs-event-”開頭，后接W3C標(biāo)準(zhǔn)事件名稱，用于進(jìn)行事件綁定；7)循環(huán)屬性：用于根據(jù)可供循環(huán)操作的數(shù)據(jù)，在界面中重復(fù)輸出內(nèi)容。步驟2)中，ViewModel對(duì)象為設(shè)定作用域下，MVVM設(shè)計(jì)模式中的ViewModel對(duì)象，用于聯(lián)結(jié)View對(duì)象和Model對(duì)象，在該作用域下的所有監(jiān)聽數(shù)據(jù)都作為該對(duì)象的子對(duì)象存在，作用域的劃分根據(jù)用戶的標(biāo)記來(lái)確定，并且作用域互相嵌套。步驟3)中綁定過(guò)程包括：1)掃描：在得到文檔樹后，由頂向下，先找到元素節(jié)點(diǎn)，然后優(yōu)先處理skip、important、controller三個(gè)綁定標(biāo)記，繼而掃描特性標(biāo)記、最后掃描文本節(jié)點(diǎn)，并遞歸這一過(guò)程，直至掃描結(jié)束，最終得到一個(gè)包含綁定節(jié)點(diǎn)所有必要信息的對(duì)象；2)轉(zhuǎn)換求值函數(shù)：通過(guò)對(duì)特性標(biāo)記的分析，得到具體的求值對(duì)象和求值邏輯，生成求值函數(shù)；3)訂閱：采用觀察者模式，將上一步轉(zhuǎn)換生成的求值函數(shù)納入監(jiān)聽數(shù)據(jù)的觀察列表，當(dāng)數(shù)據(jù)改變時(shí)，觀察列表中的所有求值函數(shù)都將被順序調(diào)用。步驟6)中，所述的重寫器在監(jiān)聽數(shù)據(jù)被讀取時(shí)被調(diào)用，用于數(shù)據(jù)的規(guī)范化處理，包括去空格、去回車、去特殊符號(hào)、空位補(bǔ)完；所述的讀取器含有能夠訪問(wèn)訂閱列表的回調(diào)方法，當(dāng)監(jiān)聽數(shù)據(jù)改變時(shí)，由該方法主動(dòng)執(zhí)行訂閱列表中保存的所有求值函數(shù)。本發(fā)明與現(xiàn)有技術(shù)相比具有的有益效果是：1)前端雙向數(shù)據(jù)綁定特性能夠有效地管理數(shù)據(jù)、界面和業(yè)務(wù)之間的復(fù)雜邏輯和依賴響應(yīng)關(guān)系，能夠做到關(guān)注點(diǎn)分離，簡(jiǎn)化前端復(fù)雜度，提高前端開發(fā)人員的開發(fā)效率和維護(hù)效率。2)在現(xiàn)有技術(shù)下(數(shù)值循環(huán)臟檢測(cè))，每次事件觸發(fā)都將對(duì)所有監(jiān)聽器進(jìn)行遍歷，頁(yè)面上的指令和監(jiān)聽數(shù)據(jù)越多，遍歷時(shí)間越長(zhǎng)，頁(yè)面可能由于循環(huán)時(shí)間過(guò)長(zhǎng)而出現(xiàn)假死情況。本發(fā)明克服了這一問(wèn)題，大大提升了監(jiān)聽效率，并將單頁(yè)面最大監(jiān)聽數(shù)據(jù)數(shù)從2000個(gè)上升到12000個(gè)。附圖說(shuō)明圖1是一種實(shí)現(xiàn)本發(fā)明的技術(shù)流程圖示意圖；圖2是本發(fā)明的應(yīng)用實(shí)例，表明當(dāng)輸入框輸入導(dǎo)致數(shù)據(jù)改變時(shí)，界面隨之改變；具體實(shí)施方式下面結(jié)合附圖和實(shí)施例對(duì)本發(fā)明做進(jìn)一步闡述。如圖1所示，基于訪問(wèn)器劫持的前端數(shù)據(jù)雙向綁定實(shí)現(xiàn)方法具體步驟如下：1)在界面模板的標(biāo)簽內(nèi)添加各類必要的綁定屬性，并指明與該屬性綁定的監(jiān)聽數(shù)據(jù)名。具體包括：(1)設(shè)定作用域?qū)傩裕阂浴癵s-controller-”開頭，后接用戶自定義的ViewModel類名稱，用于和具體的ViewModel對(duì)象相互綁定。(2)設(shè)定數(shù)據(jù)填充屬性：用于將數(shù)據(jù)打印到頁(yè)面上。(3)設(shè)定插入移除屬性：用于控制不同情況下數(shù)據(jù)的顯示與否。(4)設(shè)定特性屬性：用于控制各種html標(biāo)簽支持的特性。(5)設(shè)定樣式屬性：用于控制CSS樣式。(6)設(shè)定事件屬性：以“gs-event-”開頭，后接各種W3C標(biāo)準(zhǔn)事件名稱，用于進(jìn)行事件綁定。(7)設(shè)定循環(huán)屬性：用于根據(jù)數(shù)組等可供循環(huán)操作的數(shù)據(jù)，在界面中重復(fù)輸出內(nèi)容。2)新建監(jiān)聽數(shù)據(jù)的所屬的ViewModel對(duì)象，申明和初始化其下的監(jiān)聽數(shù)據(jù)。其中，該對(duì)象即為設(shè)定作用域下，MVVM設(shè)計(jì)模式中的ViewModel對(duì)象，用于聯(lián)結(jié)View對(duì)象(界面)和Model對(duì)象(數(shù)據(jù))，在該作用域下的所有監(jiān)聽數(shù)據(jù)都作為該對(duì)象的子對(duì)象存在，作用域的劃分根據(jù)用戶的標(biāo)記來(lái)確定，并且作用域可以互相嵌套。3)掃描界面標(biāo)簽上的綁定屬性，當(dāng)綁定屬性綁定的監(jiān)聽數(shù)據(jù)名與該標(biāo)簽所屬ViewModel下的與監(jiān)聽數(shù)據(jù)名相同時(shí)，將該標(biāo)簽對(duì)應(yīng)的DOM對(duì)象和監(jiān)聽數(shù)據(jù)進(jìn)行綁定。具體包括三個(gè)子步驟：(1)掃描：在得到文檔樹后，由頂向下，先找到元素節(jié)點(diǎn)，然后優(yōu)先處理skip、important、controller等三個(gè)綁定標(biāo)記，繼而掃描特性標(biāo)記、最后掃描文本節(jié)點(diǎn)，并遞歸這一過(guò)程，直至掃描結(jié)束，最終得到一個(gè)包含綁定節(jié)點(diǎn)所有必要信息的對(duì)象。(2)轉(zhuǎn)換求值函數(shù)：求值函數(shù)就是指監(jiān)聽數(shù)據(jù)改變時(shí)，對(duì)決定界面顯示效果的某一個(gè)值(屬性、樣式、文本)進(jìn)行修改的函數(shù)，這一步驟通過(guò)對(duì)特性標(biāo)記的分析，得到具體的求值對(duì)象和求值邏輯，生成求值函數(shù)。(3)訂閱：采用觀察者模式，將上一步轉(zhuǎn)換生成的求值函數(shù)納入監(jiān)聽數(shù)據(jù)的觀察列表，當(dāng)數(shù)據(jù)改變時(shí)，觀察列表中的所有求值函數(shù)都將被順序調(diào)用。4)利用ECMAScript262v5標(biāo)準(zhǔn)發(fā)布的Object.defineProperty(定義標(biāo)準(zhǔn)屬性)接口，為需要監(jiān)聽的數(shù)據(jù)設(shè)置writable屬性為true；設(shè)置enumerable屬性為true；設(shè)置configurable屬性為true。該步驟本質(zhì)上包含三方面的內(nèi)容：(1)writable屬性描述符用于描述該屬性是否可寫，如果設(shè)置成false，則任何對(duì)該屬性改寫的操作都無(wú)效(2)enumerable屬性描述符用于描述該屬性是否可以遍歷，如果設(shè)置成false，就不能在for-in循環(huán)中遍歷出來(lái)或在Object.keys接口中被列舉出來(lái)。(3)configurable屬性描述符用于描述該屬性是否可刪除，如果為false，則任何嘗試刪除目標(biāo)屬性或修改屬性以下特性(包括writable、enumerable和configurable本身)的行為都將被無(wú)效化。(4)由于雙向數(shù)據(jù)綁定要求滿足對(duì)監(jiān)聽數(shù)據(jù)的修改和遍歷，所以以上三個(gè)屬性描述符均要設(shè)置為true。5)利用Object.defineProperty接口，為需要監(jiān)聽的數(shù)據(jù)設(shè)置初始值。6)利用Object.defineProperty接口，為需要監(jiān)聽的數(shù)據(jù)設(shè)置屬性的重寫器(get方法)；為需要監(jiān)聽的數(shù)據(jù)設(shè)置屬性的讀取器(set方法)。步驟6)實(shí)際包含兩方面內(nèi)容：(1)重寫器(get方法)：重寫器會(huì)在監(jiān)聽數(shù)據(jù)被讀取時(shí)被調(diào)用，其目的主要在于數(shù)據(jù)的規(guī)范化處理，包括去空格、去回車、去特殊符號(hào)、空位補(bǔ)完等。(2)讀取器(set方法)：讀取器是該發(fā)明實(shí)現(xiàn)的核心，當(dāng)數(shù)據(jù)修改時(shí)，讀取器會(huì)被調(diào)用。在本發(fā)明中，讀取器被賦予一個(gè)能夠訪問(wèn)訂閱列表的回調(diào)方法，當(dāng)監(jiān)聽數(shù)據(jù)改變時(shí)，該方法就會(huì)主動(dòng)執(zhí)行訂閱列表中保存的所有求值函數(shù)。下面基于上述方法，結(jié)合實(shí)施例進(jìn)行進(jìn)一步說(shuō)明，實(shí)施例中部分具體參數(shù)和結(jié)果如下：第一步，在界面模板的標(biāo)簽內(nèi)添加各類必要的綁定屬性，并指明與該屬性綁定的監(jiān)聽數(shù)據(jù)名。各類綁定屬性如表1所示。代碼如下：<divms-controller＝"hello"><h1gs-text＝"name"></h1></div>表1綁定屬性表第二步，新建監(jiān)聽數(shù)據(jù)的所屬的ViewModel對(duì)象，申明和初始化其下的監(jiān)聽數(shù)據(jù)。代碼如下：varmodel＝gs.define('hello',function(vm){vm.name＝null；})；第三步，掃描界面標(biāo)簽上的綁定屬性，當(dāng)綁定屬性綁定的監(jiān)聽數(shù)據(jù)名與該標(biāo)簽所屬ViewModel下的與監(jiān)聽數(shù)據(jù)名相同時(shí)，將該標(biāo)簽對(duì)應(yīng)的DOM對(duì)象和監(jiān)聽數(shù)據(jù)進(jìn)行綁定。第四步，利用ECMAScript262v5標(biāo)準(zhǔn)發(fā)布的Object.defineProperty(定義標(biāo)準(zhǔn)屬性)接口，為需要監(jiān)聽的數(shù)據(jù)設(shè)置writable屬性為true；設(shè)置enumerable屬性為true；設(shè)置configurable屬性為true。主要代碼為：第五步，利用Object.defineProperty接口，為需要監(jiān)聽的數(shù)據(jù)設(shè)置初始值。主要代碼為：Object.defineProperty(vm,‘name‘,{"value":"GISLab"})；第六步，利用Object.defineProperty接口，為需要監(jiān)聽的數(shù)據(jù)設(shè)置屬性的重寫器(get方法)；為需要監(jiān)聽的數(shù)據(jù)設(shè)置屬性的讀取器(set方法)。主要代碼為：本實(shí)施例的結(jié)果如圖2所示，表明當(dāng)輸入框輸入導(dǎo)致數(shù)據(jù)改變時(shí)，界面隨之改變，完美地實(shí)現(xiàn)了前端數(shù)據(jù)雙向綁定。由此可見(jiàn)，本發(fā)明能夠確保當(dāng)界面內(nèi)容變化時(shí)，綁定的數(shù)據(jù)隨之變化；而數(shù)據(jù)變化時(shí)，界面內(nèi)容也同時(shí)發(fā)生變化，從而實(shí)現(xiàn)對(duì)web應(yīng)用中數(shù)據(jù)、界面以及它們之間復(fù)雜相互依賴關(guān)系的管理。它利用先進(jìn)的前端工程技術(shù)，簡(jiǎn)化了前端開發(fā)人員的工作，提高了前端開發(fā)和前端維護(hù)的效率。當(dāng)前第1頁(yè)1 2 3 當(dāng)前第1頁(yè)1 2 3