一種基于訪問器劫持的前端數(shù)據(jù)雙向綁定實(shí)現(xiàn)方法【專利摘要】本發(fā)明公開了一種基于訪問器劫持的前端數(shù)據(jù)雙向綁定實(shí)現(xiàn)方法，包括以下步驟：1)在HTML的標(biāo)簽內(nèi)添加各類必要的綁定屬性，并指明與該屬性綁定的監(jiān)聽數(shù)據(jù)名。2)新建監(jiān)聽數(shù)據(jù)的所屬的ViewModel對(duì)象，申明和初始化其下的監(jiān)聽數(shù)據(jù)。3)掃描HTML標(biāo)簽上的綁定屬性4)利用Object.defineProperty接口，為需要監(jiān)聽的數(shù)據(jù)設(shè)置writable屬性為true；設(shè)置enumerable屬性為true；設(shè)置configurable屬性為true；為需要監(jiān)聽的數(shù)據(jù)設(shè)置初始值；為需要監(jiān)聽的數(shù)據(jù)設(shè)置屬性的重寫器(get方法)；為需要監(jiān)聽的數(shù)據(jù)設(shè)置屬性的讀取器(set方法)。本發(fā)明方法能夠?qū)崿F(xiàn)對(duì)web應(yīng)用中數(shù)據(jù)、界面以及它們之間復(fù)雜相互依賴關(guān)系的有效管理，效率更高，邏輯更清晰直觀，單頁(yè)面支持監(jiān)聽數(shù)據(jù)量也更多。【專利說明】一種基于訪問器劫持的前端數(shù)據(jù)雙向綁定實(shí)現(xiàn)方法
技術(shù)領(lǐng)域：
[0001]本發(fā)明涉及復(fù)雜web應(yīng)用中大量前端元素?cái)?shù)據(jù)、業(yè)務(wù)邏輯以及界面之間的管理，尤其涉及一種基于訪問器劫持的前端數(shù)據(jù)雙向綁定實(shí)現(xiàn)方法?！?br>背景技術(shù)：
】[0002]早期的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ù)無所適從。為了更好地在前端進(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)鍵所在。[0003]現(xiàn)有MVVM框架的雙向數(shù)據(jù)綁定特性主要使用數(shù)據(jù)循環(huán)臟檢測(cè)的方式實(shí)現(xiàn)，代表性的有AngularJ&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í)間過長(zhǎng)而出現(xiàn)假死情況。而且，單個(gè)頁(yè)面中能夠承載的監(jiān)聽數(shù)據(jù)量也十分有限?！?br/>發(fā)明內(nèi)容】[0004]本發(fā)明的目的是克服現(xiàn)有技術(shù)的不足，提供一種基于訪問器劫持的前端數(shù)據(jù)雙向綁定實(shí)現(xiàn)方法，能夠確保當(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)系的管理。本發(fā)明利用先進(jìn)的前端工程技術(shù)，簡(jiǎn)化了前端開發(fā)人員的工作，提高了前端開發(fā)和前端維護(hù)的效率。效率更高，邏輯更清晰直觀，且單頁(yè)面支持監(jiān)聽數(shù)據(jù)量也更多。[0005]本發(fā)明中涉及到的名詞解釋。[0006]web應(yīng)用:Web應(yīng)用程序是一種可以通過Web訪問的應(yīng)用程序。Web應(yīng)用程序的一個(gè)最大好處是用戶很容易訪問應(yīng)用程序。用戶只需要有瀏覽器即可，不需要再安裝其他軟件。[0007]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思想的前端框架。[0008]雙向數(shù)據(jù)綁定:雙向數(shù)據(jù)綁定是MVVM框架的核心特性，其內(nèi)涵是:界面的改變能夠反應(yīng)在數(shù)據(jù)上，而數(shù)據(jù)改變后同時(shí)能夠更新頁(yè)面。[0009]本發(fā)明的目的是通過以下技術(shù)方案來實(shí)現(xiàn)的：一種基于讀取器劫持的前端數(shù)據(jù)雙向綁定實(shí)現(xiàn)方法，具體步驟如下：[0010]1)在ΗTML的標(biāo)簽內(nèi)添加各類必要的綁定屬性，并指明與該屬性綁定的監(jiān)聽數(shù)據(jù)名。[0011]2)新建監(jiān)聽數(shù)據(jù)的所屬的ViewModel對(duì)象，申明和初始化其下的監(jiān)聽數(shù)據(jù)。[0012]3)掃描HTML標(biāo)簽上的綁定屬性，當(dāng)綁定屬性綁定的監(jiān)聽數(shù)據(jù)名與該標(biāo)簽所屬ViewModel下的與監(jiān)聽數(shù)據(jù)名相同時(shí)，將該標(biāo)簽對(duì)應(yīng)的D0M對(duì)象和監(jiān)聽數(shù)據(jù)進(jìn)行綁定。[0013]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。[0014]5)利用Object.defineProperty接口，為需要監(jiān)聽的數(shù)據(jù)設(shè)置初始值。[0015]6)利用Object.defineProperty接口，為需要監(jiān)聽的數(shù)據(jù)設(shè)置屬性的重寫器(get方法）；為需要監(jiān)聽的數(shù)據(jù)設(shè)置屬性的讀取器(set方法）。[0016]進(jìn)一步地，所述的步驟1)包括：（1)設(shè)定作用域?qū)傩裕阂?gs-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)容。[0017]進(jìn)一步地，所述的步驟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)記來確定，并且作用域可以互相嵌套。[0018]進(jìn)一步地，所述的步驟3)包括：[0019]⑴掃描:在得到文檔樹后，由頂向下，先找到元素節(jié)點(diǎn)，繼而掃描特性標(biāo)記、最后掃描文本節(jié)點(diǎn)，并遞歸這一過程，直至掃描結(jié)束，最終得到一個(gè)包含綁定節(jié)點(diǎn)所有必要信息的對(duì)象。[0020](2)轉(zhuǎn)換求值函數(shù):求值函數(shù)就是指監(jiān)聽數(shù)據(jù)改變時(shí)，對(duì)決定界面顯示效果的某一個(gè)值(屬性、樣式、文本)進(jìn)行修改的函數(shù)，這一步驟通過對(duì)特性標(biāo)記的分析，得到具體的求值對(duì)象和求值邏輯，生成求值函數(shù)。[0021](3)訂閱:采用觀察者模式，將上一步轉(zhuǎn)換生成的求值函數(shù)納入監(jiān)聽數(shù)據(jù)的觀察列表，當(dāng)數(shù)據(jù)改變時(shí)，觀察列表中的所有求值函數(shù)都將被順序調(diào)用。[0022]進(jìn)一步地，所述的步驟4)包含三方面的內(nèi)容：（l)writable屬性描述符用于描述該屬性是否可寫，如果設(shè)置成false，則任何對(duì)該屬性改寫的操作都無效。（2)enumerable屬性描述符用于描述該屬性是否可以遍歷，如果設(shè)置成false，就不能在for-in循環(huán)中遍歷出來或在Object.keys接口中被列舉出來。（3Configurable屬性描述符用于描述該屬性是否可刪除，如果為false，則任何嘗試刪除目標(biāo)屬性或修改屬性以下特性（包括writable、enumerable和configurable本身）的行為都將被無效化。（4)由于雙向數(shù)據(jù)綁定要求滿足對(duì)監(jiān)聽數(shù)據(jù)的修改和遍歷，所以以上三個(gè)屬性描述符均要設(shè)置為true。[0023]進(jìn)一步地，所述的步驟6)包含兩方面內(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è)能夠訪問訂閱列表的回調(diào)方法，當(dāng)監(jiān)聽數(shù)據(jù)改變時(shí)，該方法就會(huì)主動(dòng)執(zhí)行訂閱列表中保存的所有求值函數(shù)。[0024]本發(fā)明與現(xiàn)有技術(shù)相比具有的有益成果是：[0025]1)前端雙向數(shù)據(jù)綁定特性能夠有效地管理數(shù)據(jù)、界面和業(yè)務(wù)之間的復(fù)雜邏輯和依賴響應(yīng)關(guān)系，能夠做到關(guān)注點(diǎn)分離，簡(jiǎn)化前端復(fù)雜度，提高前端開發(fā)人員的開發(fā)效率和維護(hù)效率。[0026]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í)間過長(zhǎng)而出現(xiàn)假死情況。本發(fā)明克服了這一問題，大大提升了監(jiān)聽效率，并將單頁(yè)面最大監(jiān)聽數(shù)據(jù)數(shù)從2000個(gè)上升到12000個(gè)?！靖綀D說明】[0027]圖1是一種實(shí)現(xiàn)本發(fā)明方法的流程圖?！揪唧w實(shí)施方式】[0028]下面結(jié)合附圖和具體實(shí)施例對(duì)本發(fā)明作進(jìn)一步詳細(xì)說明。[0029]本發(fā)明提出的基于訪問器劫持的前端數(shù)據(jù)雙向綁定實(shí)現(xiàn)方法，具體步驟如下：[0030]1)在界面模板的標(biāo)簽內(nèi)添加各類必要的綁定屬性，并指明與該屬性綁定的監(jiān)聽數(shù)據(jù)名。[0031]2)新建監(jiān)聽數(shù)據(jù)的所屬的ViewModel對(duì)象，申明和初始化其下的監(jiān)聽數(shù)據(jù)。[0032]3)掃描界面標(biāo)簽上的綁定屬性，當(dāng)綁定屬性綁定的監(jiān)聽數(shù)據(jù)名與該標(biāo)簽所屬ViewModel下的與監(jiān)聽數(shù)據(jù)名相同時(shí)，將該標(biāo)簽對(duì)應(yīng)的D0M對(duì)象和監(jiān)聽數(shù)據(jù)進(jìn)行綁定。[0033]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。[0034]5)利用Object.defineProperty接口，為需要監(jiān)聽的數(shù)據(jù)設(shè)置初始值。[0035]6)利用Object.defineProperty接口，為需要監(jiān)聽的數(shù)據(jù)設(shè)置屬性的重寫器(get方法）；為需要監(jiān)聽的數(shù)據(jù)設(shè)置屬性的讀取器(set方法）。[0036]所述的步驟1)包括：[0037](1)設(shè)定作用域?qū)傩裕阂?gs-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)容。[0038]所述的步驟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)記來確定，并且作用域可以互相嵌套。[0039]所述的步驟3)包括：[0040](1)掃描：在得到文檔樹后，由頂向下，先找到元素節(jié)點(diǎn)，然后優(yōu)先處理skip、important、controller等三個(gè)綁定標(biāo)記，繼而掃描特性標(biāo)記、最后掃描文本節(jié)點(diǎn)，并遞歸這一過程，直至掃描結(jié)束，最終得到一個(gè)包含綁定節(jié)點(diǎn)所有必要信息的對(duì)象。[0041](2)轉(zhuǎn)換求值函數(shù):求值函數(shù)就是指監(jiān)聽數(shù)據(jù)改變時(shí)，對(duì)決定界面顯示效果的某一個(gè)值(屬性、樣式、文本)進(jìn)行修改的函數(shù)，這一步驟通過對(duì)特性標(biāo)記的分析，得到具體的求值對(duì)象和求值邏輯，生成求值函數(shù)。[0042](3)訂閱:采用觀察者模式，將上一步轉(zhuǎn)換生成的求值函數(shù)納入監(jiān)聽數(shù)據(jù)的觀察列表，當(dāng)數(shù)據(jù)改變時(shí)，觀察列表中的所有求值函數(shù)都將被順序調(diào)用。[0043]所述的步驟4)包含三方面的內(nèi)容：（l)writable屬性描述符用于描述該屬性是否可寫，如果設(shè)置成false，則任何對(duì)該屬性改寫的操作都無效（2)enumerable屬性描述符用于描述該屬性是否可以遍歷，如果設(shè)置成false，就不能在for-in循環(huán)中遍歷出來或在Object.keys接口中被列舉出來。（3)configurable屬性描述符用于描述該屬性是否可刪除，如果為false，則任何嘗試刪除目標(biāo)屬性或修改屬性以下特性（包括writable、enumerable和configurable本身）的行為都將被無效化。（4)由于雙向數(shù)據(jù)綁定要求滿足對(duì)監(jiān)聽數(shù)據(jù)的修改和遍歷，所以以上三個(gè)屬性描述符均要設(shè)置為true。[0044]所述的步驟6)包含兩方面內(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è)能夠訪問訂閱列表的回調(diào)方法，當(dāng)監(jiān)聽數(shù)據(jù)改變時(shí)，該方法就會(huì)主動(dòng)執(zhí)行訂閱列表中保存的所有求值函數(shù)。[0045]實(shí)施例[0046]第一步，在界面模板的標(biāo)簽內(nèi)添加各類必要的綁定屬性，并指明與該屬性綁定的監(jiān)聽數(shù)據(jù)名。各類綁定屬性如表1所示。代碼如下：[0047]〈divms-controller="hello">[0048]<hlgs-text="name">〈/hl>[0049]</div>[0050]表1綁定屬性表[0053]第二步，新建監(jiān)聽數(shù)據(jù)的所屬的ViewModel對(duì)象，申明和初始化其下的監(jiān)聽數(shù)據(jù)。代碼如下：[0054]varmodel=gs.define('hello',function(vm){[0055]vm.name=null；[0056]})；[0057]第三步，掃描界面標(biāo)簽上的綁定屬性，當(dāng)綁定屬性綁定的監(jiān)聽數(shù)據(jù)名與該標(biāo)簽所屬ViewModel下的與監(jiān)聽數(shù)據(jù)名相同時(shí)，將該標(biāo)簽對(duì)應(yīng)的D0M對(duì)象和監(jiān)聽數(shù)據(jù)進(jìn)行綁定。[0058]第四步，利用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。主要代碼為：[0000]第五步，利用0bject.defineProperty接口，為需要監(jiān)聽的數(shù)據(jù)設(shè)置初始值。主要代碼為：[0061]Object.defineProperty(vm,<name<,{[0062]"value":"GISLab"[0063]})；[0064]第六步，利用0bject.defineProperty接口，為需要監(jiān)聽的數(shù)據(jù)設(shè)置屬性的重寫器(get方法）；為需要監(jiān)聽的數(shù)據(jù)設(shè)置屬性的讀取器(set方法）。主要代碼為：【主權(quán)項(xiàng)】1.一種基于訪問器劫持的前端數(shù)據(jù)雙向綁定實(shí)現(xiàn)方法，其特征在于，包括如下步驟：1)在HTML的標(biāo)簽內(nèi)添加各類必要的綁定屬性，并指明與該屬性綁定的監(jiān)聽數(shù)據(jù)名。2)新建監(jiān)聽數(shù)據(jù)所屬的ViewModel對(duì)象，申明和初始化其下的監(jiān)聽數(shù)據(jù)。3)掃描HTML標(biāo)簽上的綁定屬性，當(dāng)綁定屬性綁定的監(jiān)聽數(shù)據(jù)名與該標(biāo)簽所屬ViewModel下的監(jiān)聽數(shù)據(jù)名相同時(shí)，將該標(biāo)簽對(duì)應(yīng)的D0M對(duì)象和監(jiān)聽數(shù)據(jù)進(jìn)行綁定。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。5)利用Object.defineProperty接口，為需要監(jiān)聽的數(shù)據(jù)設(shè)置初始值。6)利用Object.defineProperty接口，為需要監(jiān)聽的數(shù)據(jù)設(shè)置屬性的重寫器（get方法）；為需要監(jiān)聽的數(shù)據(jù)設(shè)置屬性的讀取器(set方法）。2.根據(jù)權(quán)利要求1所述的方法，其特征在于，所述步驟1)具體為：綁定屬性以"gs"作為前綴，以作為連接符，具體分為多類，包括：(1)作用域?qū)傩裕阂?gs-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ù)數(shù)組等可供循環(huán)操作的數(shù)據(jù)，在界面中重復(fù)輸出內(nèi)谷。3.根據(jù)權(quán)利要求1所述的方法，其特征在于，步驟2)中的對(duì)象即為設(shè)定作用域下，MVVM設(shè)計(jì)模式中的ViewMode1對(duì)象，用于聯(lián)結(jié)View對(duì)象(界面)和Mode1對(duì)象(數(shù)據(jù)），在該作用域下的所有監(jiān)聽數(shù)據(jù)都作為該對(duì)象的子對(duì)象存在，作用域的劃分根據(jù)用戶的標(biāo)記來確定，并且作用域可以互相嵌套。4.根據(jù)權(quán)利要求1所述的方法，其特征在于，步驟3)中的綁定過程主要包括：(1)掃描:在得到文檔樹后，由頂向下，先找到元素節(jié)點(diǎn)，繼而掃描特性標(biāo)記、最后掃描文本節(jié)點(diǎn)，并遞歸這一過程，直至掃描結(jié)束，最終得到一個(gè)包含綁定節(jié)點(diǎn)所有必要信息的對(duì)象。(2)轉(zhuǎn)換求值函數(shù):求值函數(shù)指監(jiān)聽數(shù)據(jù)改變時(shí)，對(duì)決定界面顯示效果的某一個(gè)值（屬性、樣式、文本)進(jìn)行修改的函數(shù)，這一步驟通過對(duì)特性標(biāo)記的分析，得到具體的求值對(duì)象和求值邏輯，生成求值函數(shù)。(3)訂閱：采用觀察者模式，將上一步轉(zhuǎn)換生成的求值函數(shù)納入監(jiān)聽數(shù)據(jù)的觀察列表，當(dāng)數(shù)據(jù)改變時(shí)，觀察列表中的所有求值函數(shù)都將被順序調(diào)用。5.根據(jù)權(quán)利要求1所述的方法，其特征在于，步驟4)中包含三方面的內(nèi)容：(1Writable屬性描述符用于描述該屬性是否可寫，如果設(shè)置成false，則任何對(duì)該屬性改寫的操作都無效。(2)enumerable屬性描述符用于描述該屬性是否可以遍歷，如果設(shè)置成false，就不能在for-in循環(huán)中遍歷出來或在Object.keys接口中被列舉出來。(3)configurable屬性描述符用于描述該屬性是否可刪除，如果為false，則任何嘗試刪除目標(biāo)屬性或修改屬性以下特性(包括writableenumerable和configurable本身）的行為都將被無效化。由于雙向數(shù)據(jù)綁定要求滿足對(duì)監(jiān)聽數(shù)據(jù)的修改和遍歷，所以以上三個(gè)屬性描述符均要設(shè)置為true。6.根據(jù)權(quán)利要求1所述的方法，其特征在于步驟6)包含兩部分內(nèi)容：（1)重寫器(get方法）：重寫器會(huì)在監(jiān)聽數(shù)據(jù)被讀取時(shí)被調(diào)用，其目的主要在于數(shù)據(jù)的規(guī)范化處理，包括去空格、去回車、去特殊符號(hào)、空位補(bǔ)完等。（2)讀取器(set方法）：當(dāng)數(shù)據(jù)修改時(shí)，讀取器會(huì)被調(diào)用。讀取器被賦予一個(gè)能夠訪問訂閱列表的回調(diào)方法，當(dāng)監(jiān)聽數(shù)據(jù)改變時(shí)，主動(dòng)執(zhí)行訂閱列表中保存的所有求值函數(shù)?！疚臋n編號(hào)】G06F9/44GK105867919SQ201610183393【公開日】2016年8月17日【申請(qǐng)日】2016年3月28日【發(fā)明人】杜震洪,張豐,劉仁義,徐溯陽(yáng)【申請(qǐng)人】浙江大學(xué)