本發(fā)明涉及前端開發(fā)技術(shù)領(lǐng)域，具體來講是一種在前端實現(xiàn)行為、數(shù)據(jù)、視圖聯(lián)動的方法及系統(tǒng)。

背景技術(shù)：

前端對于網(wǎng)站來說，通常是指網(wǎng)站的前臺部分，包括網(wǎng)站的表現(xiàn)層和結(jié)構(gòu)層。因此前端技術(shù)一般分為前端設(shè)計和前端開發(fā)，前端設(shè)計一般可以理解為網(wǎng)站的視覺設(shè)計，前端開發(fā)則是網(wǎng)站的前臺代碼實現(xiàn)，包括基本的HTML(HyperText Markup Language，超文本標(biāo)記語言)、CSS(Cascading Style Sheets，層疊樣式表)以及JavaScript/ajax。在前端開發(fā)領(lǐng)域，越來越多的業(yè)務(wù)邏輯與數(shù)據(jù)處理被強行接入。前端從最初處理簡單的表單提交與數(shù)據(jù)交互，變成如今以MVC(Model-View-Controller，模型-視圖-控制器)，MVVM(Model-View-ViewModel，模型-視圖-視圖模型)等規(guī)范為主的單頁面應(yīng)用(SPA，Single Page Application)，對開發(fā)人員的要求非常高。

前端從根本意義上來講，是一種受外部驅(qū)動的宿主靜態(tài)語言。外部驅(qū)動包括：用戶行為、瀏覽器行為、服務(wù)器行為；宿主為瀏覽器。前端的整個運行過程主要包括：用戶與視圖交互，發(fā)出瀏覽器內(nèi)的請求；根據(jù)請求進行數(shù)據(jù)處理后，重新繪制視圖達到用戶預(yù)期的效果；其中數(shù)據(jù)處理的過程中可能會與服務(wù)器進行交互。

前端的核心的功能是事件管理。如圖1所示，目前，前端通用的實現(xiàn)事件管理功能的方案為：事件彈射器(Observer)，事件彈射器對外提供的API(Application Programming Interface，應(yīng)用編程接口)有：1、新增(增量新增事件)；2、銷毀(銷毀注冊事件)；3、通知(批量執(zhí)行事件所對應(yīng)的函數(shù)隊列)。

事件彈射器在某種程度上確實解決了一些事件管理上的問題，但在真實的前端開發(fā)過程中，開發(fā)人員可以在多個不同的代碼模塊進行個性化的事件注冊，而事件名稱和事件處理沒有統(tǒng)一規(guī)范，使得代碼調(diào)試和維護變得非常復(fù)雜，維護成本也高，一次視圖層的大改版極可能導(dǎo)致整體前端代碼的重構(gòu)，且在執(zhí)行事件的過程中，一個事件函數(shù)出錯極可能導(dǎo)致后續(xù)的函數(shù)無法執(zhí)行。

技術(shù)實現(xiàn)要素：

本發(fā)明的目的是為了克服上述背景技術(shù)的不足，提供一種在前端實現(xiàn)行為、數(shù)據(jù)、視圖聯(lián)動的方法及系統(tǒng)，能使前端達到行為、數(shù)據(jù)、視圖的聯(lián)動效果，降低了前端代碼開發(fā)和調(diào)試的復(fù)雜度，便于擴展和維護。

為達到以上目的，本發(fā)明提供一種在前端實現(xiàn)行為、數(shù)據(jù)、視圖聯(lián)動的方法，包括以下步驟：S1：獲取用戶與服務(wù)器之間的交互數(shù)據(jù)，根據(jù)獲取的交互數(shù)據(jù)建立數(shù)據(jù)模型，所述數(shù)據(jù)模型包括若干個由數(shù)據(jù)對象生成的數(shù)據(jù)實例，每個數(shù)據(jù)實例對應(yīng)一條交互數(shù)據(jù)，每條交互數(shù)據(jù)對應(yīng)一個視圖，即數(shù)據(jù)實例與視圖對應(yīng)，轉(zhuǎn)入步驟S2；S2：根據(jù)數(shù)據(jù)模型建立視圖模型，轉(zhuǎn)入步驟S3；S3：當(dāng)需要展示供用戶進行交互操作的首個視圖頁面時，利用已有的視圖腳本對視圖模型進行處理，生成視圖模型對應(yīng)的HTML代碼；通過生成的HTML代碼進行首個視圖頁面的渲染，展示首個視圖頁面，轉(zhuǎn)入步驟S4；S4：用戶利用展示的首個視圖頁面進行交互操作，生成操作數(shù)據(jù)；通過視圖腳本將所述操作數(shù)據(jù)更新到當(dāng)前視圖對應(yīng)的數(shù)據(jù)實例中，轉(zhuǎn)入步驟S5；S5：將所述操作數(shù)據(jù)提交給服務(wù)器，結(jié)束。

在上述技術(shù)方案的基礎(chǔ)上，每個數(shù)據(jù)實例中包含數(shù)據(jù)模型字段、數(shù)據(jù)模型字段的默認值和數(shù)據(jù)模型字段的數(shù)據(jù)處理方式。

在上述技術(shù)方案的基礎(chǔ)上，步驟S2中所述根據(jù)數(shù)據(jù)模型建立視圖模型的具體過程為：將建立的數(shù)據(jù)模型中各數(shù)據(jù)實例的數(shù)據(jù)模型字段依次綁定到視圖模型中，從而建立視圖模型。

在上述技術(shù)方案的基礎(chǔ)上，步驟S3具體包括以下操作：

S301：利用已有的視圖腳本解析視圖模型，找出視圖模型中所有與數(shù)據(jù)模型字段綁定的DOM元素，并給所有的DOM元素加上唯一標(biāo)識，轉(zhuǎn)入步驟S302；

S302：利用視圖腳本收集當(dāng)前視圖模型中DOM元素與數(shù)據(jù)模型字段的關(guān)聯(lián)關(guān)系；同時，利用視圖腳本給所有被收集到的DOM元素綁定變更事件，轉(zhuǎn)入步驟S303；

S303：利用視圖腳本將視圖模型中綁定的數(shù)據(jù)模型字段更改為數(shù)據(jù)模型字段的默認值，并轉(zhuǎn)換為HTML代碼，同時根據(jù)視圖模型關(guān)聯(lián)的數(shù)據(jù)模型生成一個數(shù)據(jù)實例，轉(zhuǎn)入步驟S304；

S304：將視圖腳本解析后的HTML代碼插入到網(wǎng)站對應(yīng)的由開發(fā)者預(yù)先設(shè)定的區(qū)塊中，并根據(jù)生成的數(shù)據(jù)實例進行首個視圖頁面的渲染，展示首個視圖頁面。

在上述技術(shù)方案的基礎(chǔ)上，步驟S5中，將所述操作數(shù)據(jù)提交給服務(wù)器時，采用實時提交的方式或用戶行為觸發(fā)提交的方式進行提交。

本發(fā)明同時還提供一種在前端實現(xiàn)行為、數(shù)據(jù)、視圖聯(lián)動的系統(tǒng)，包括數(shù)據(jù)模型建立模塊、視圖模型建立模塊、首視圖展示模塊、交互更新模塊和數(shù)據(jù)提交模塊；所述數(shù)據(jù)模型建立模塊用于：獲取用戶與服務(wù)器之間的交互數(shù)據(jù)，根據(jù)獲取的交互數(shù)據(jù)建立數(shù)據(jù)模型，所述數(shù)據(jù)模型包括若干個由數(shù)據(jù)對象生成的數(shù)據(jù)實例，每個數(shù)據(jù)實例對應(yīng)一條交互數(shù)據(jù)，每條交互數(shù)據(jù)對應(yīng)一個視圖，即數(shù)據(jù)實例與視圖對應(yīng)；所述視圖模型建立模塊用于：根據(jù)數(shù)據(jù)模型建立視圖模型；所述首視圖展示模塊用于：當(dāng)需要展示供用戶進行交互操作的首個視圖頁面時，利用已有的視圖腳本對視圖模型進行處理，生成視圖模型對應(yīng)的HTML代碼；通過生成的HTML代碼進行首個視圖頁面的渲染，展示首個視圖頁面；所述交互更新模塊用于：當(dāng)用戶利用展示的首個視圖頁面進行交互操作，生成操作數(shù)據(jù)后；通過視圖腳本將所述操作數(shù)據(jù)更新到當(dāng)前視圖對應(yīng)的數(shù)據(jù)實例中；所述數(shù)據(jù)提交模塊用于：將用戶交互的操作數(shù)據(jù)提交給服務(wù)器。

在上述技術(shù)方案的基礎(chǔ)上，所述數(shù)據(jù)模型建立模塊建立的數(shù)據(jù)模型中，每個數(shù)據(jù)實例中包含數(shù)據(jù)模型字段、數(shù)據(jù)模型字段的默認值和數(shù)據(jù)模型字段的數(shù)據(jù)處理方式。

在上述技術(shù)方案的基礎(chǔ)上，所述視圖模型建立模塊根據(jù)數(shù)據(jù)模型建立視圖模型的具體過程為：將建立的數(shù)據(jù)模型中各數(shù)據(jù)實例的數(shù)據(jù)模型字段依次綁定到視圖模型中，從而建立視圖模型。

在上述技術(shù)方案的基礎(chǔ)上，所述首視圖展示模塊展示首個視圖頁面的具體過程為：利用已有的視圖腳本解析視圖模型，找出視圖模型中所有與數(shù)據(jù)模型字段綁定的DOM元素，并給所有的DOM元素加上唯一標(biāo)識；利用視圖腳本收集當(dāng)前視圖模型中DOM元素與數(shù)據(jù)模型字段的關(guān)聯(lián)關(guān)系，同時，利用視圖腳本給所有被收集到的DOM元素綁定變更事件；利用視圖腳本將視圖模型中綁定的數(shù)據(jù)模型字段更改為數(shù)據(jù)模型字段的默認值，并轉(zhuǎn)換為HTML代碼，同時根據(jù)視圖模型關(guān)聯(lián)的數(shù)據(jù)模型生成一個數(shù)據(jù)實例；將視圖腳本解析后的HTML代碼插入到網(wǎng)站對應(yīng)的由開發(fā)者預(yù)先設(shè)定的區(qū)塊中，并根據(jù)生成的數(shù)據(jù)實例進行首個視圖頁面的渲染，展示首個視圖頁面。

在上述技術(shù)方案的基礎(chǔ)上，所述數(shù)據(jù)提交模塊將用戶交互的操作數(shù)據(jù)提交給服務(wù)器時，采用實時提交的方式或用戶行為觸發(fā)提交的方式進行提交。

本發(fā)明的有益效果在于：

本發(fā)明中，能根據(jù)獲取的用戶與服務(wù)器之間的交互數(shù)據(jù)建立數(shù)據(jù)模型；根據(jù)該數(shù)據(jù)模型能建立視圖模型；當(dāng)需要展示供用戶進行交互操作的首個視圖頁面時，利用已有的視圖腳本對所述視圖模型進行處理，生成視圖模型對應(yīng)的HTML代碼，通過生成的HTML代碼進行首個視圖頁面的渲染，展示首個視圖頁面；當(dāng)用戶利用展示的首個視圖頁面進行與網(wǎng)站視圖的交互操作并生成操作數(shù)據(jù)后，能通過視圖腳本將所述操作數(shù)據(jù)更新到當(dāng)前視圖對應(yīng)的數(shù)據(jù)實例中；并將該操作數(shù)據(jù)提交給服務(wù)器。整個視圖交互過程達到一種行為、數(shù)據(jù)、視圖的聯(lián)動效果。與現(xiàn)有技術(shù)相比，采用本發(fā)明的方法使得開發(fā)人員僅能對數(shù)據(jù)模型和視圖模型進行修改，交互過程中的數(shù)據(jù)和視圖的更新維護通過數(shù)據(jù)模型、視圖模型及視圖腳本自動實現(xiàn)，不但降低了前端代碼開發(fā)和調(diào)試的復(fù)雜度，而且便于擴展和維護。

附圖說明

圖1為背景技術(shù)中前端通用的實現(xiàn)事件管理功能的方案示意圖；

圖2為本發(fā)明實施例中在前端實現(xiàn)行為、數(shù)據(jù)、視圖聯(lián)動的方法的流程圖；

圖3為本發(fā)明實施例中在前端實現(xiàn)行為、數(shù)據(jù)、視圖聯(lián)動的系統(tǒng)的結(jié)構(gòu)框圖。

具體實施方式

下面結(jié)合附圖及具體實施例對本發(fā)明作進一步的詳細描述。

參見圖1所示，本發(fā)明實施例提供一種在前端實現(xiàn)行為、數(shù)據(jù)、視圖聯(lián)動的方法，包括以下步驟：

步驟S1：獲取用戶與服務(wù)器之間的交互數(shù)據(jù)，根據(jù)獲取的交互數(shù)據(jù)建立數(shù)據(jù)模型，轉(zhuǎn)入步驟S2。

可以理解的是，所述數(shù)據(jù)模型包括若干個由數(shù)據(jù)對象生成的數(shù)據(jù)實例，每個數(shù)據(jù)實例對應(yīng)一條交互數(shù)據(jù)，每條交互數(shù)據(jù)對應(yīng)一個視圖(即數(shù)據(jù)實例與視圖對應(yīng))。其中，每個數(shù)據(jù)實例中包含數(shù)據(jù)模型字段、數(shù)據(jù)模型字段的默認值和數(shù)據(jù)模型字段的數(shù)據(jù)處理方式。

步驟S2：根據(jù)數(shù)據(jù)模型建立視圖模型，轉(zhuǎn)入步驟S3。具體來說，根據(jù)數(shù)據(jù)模型建立視圖模型的具體過程為：將建立的數(shù)據(jù)模型中各數(shù)據(jù)實例的數(shù)據(jù)模型字段依次綁定到視圖模型中，從而建立視圖模型。

步驟S3：當(dāng)需要展示供用戶進行交互操作的首個視圖頁面時，利用已有的視圖腳本對視圖模型進行處理，生成視圖模型對應(yīng)的HTML代碼；通過生成的HTML代碼進行首個視圖頁面的渲染，展示首個視圖頁面，轉(zhuǎn)入步驟S4。

實際操作時，步驟S3具體包括以下操作：

步驟S301：利用已有的視圖腳本解析視圖模型，找出視圖模型中所有與數(shù)據(jù)模型字段綁定的DOM(Document Object Model，文檔對象模型)元素，并給所有的DOM元素加上唯一標(biāo)識，其中唯一標(biāo)識的屬性名稱為data-id，唯一標(biāo)識的屬性值為客戶端當(dāng)前時間的時間戳，轉(zhuǎn)入步驟S302；

步驟S302：利用視圖腳本收集當(dāng)前視圖模型中DOM元素與數(shù)據(jù)模型字段的關(guān)聯(lián)關(guān)系；同時，利用視圖腳本給所有被收集到的DOM元素綁定變更事件(原生支持)，轉(zhuǎn)入步驟S303；可以理解的是，關(guān)聯(lián)關(guān)系收集完后的結(jié)果為：一個數(shù)據(jù)模型字段對應(yīng)多個DOM元素唯一標(biāo)識；

步驟S303：利用視圖腳本將視圖模型中綁定的數(shù)據(jù)模型字段更改為數(shù)據(jù)模型字段的默認值，并轉(zhuǎn)換為HTML代碼，同時根據(jù)視圖模型關(guān)聯(lián)的數(shù)據(jù)模型生成一個數(shù)據(jù)實例，轉(zhuǎn)入步驟S304；

步驟S304：將視圖腳本解析后的HTML代碼插入到網(wǎng)站對應(yīng)的由開發(fā)者預(yù)先設(shè)定的區(qū)塊中，并根據(jù)生成的數(shù)據(jù)實例進行首個視圖頁面的渲染，展示首個視圖頁面。

步驟S4：用戶利用展示的首個視圖頁面進行與網(wǎng)站視圖的交互操作，生成操作數(shù)據(jù)；通過視圖腳本將所述操作數(shù)據(jù)更新到當(dāng)前視圖對應(yīng)的數(shù)據(jù)實例中，轉(zhuǎn)入步驟S5。具體來說，用戶在利用展示的首個視圖頁面進行與網(wǎng)站視圖的交互操作生成操作數(shù)據(jù)的過程，實際是更改DOM元素的屬性值的過程，該過程會觸發(fā)該DOM元素綁定的變更事件，視圖腳本會將當(dāng)前變更的DOM元素的屬性值更新到當(dāng)前視圖對應(yīng)的數(shù)據(jù)實例中。

步驟S5：將所述操作數(shù)據(jù)提交給服務(wù)器，結(jié)束。

可以理解的是，步驟S5中，將所述操作數(shù)據(jù)提交給服務(wù)器時，可采用實時提交的方式或用戶行為觸發(fā)提交的方式進行提交。其中：

實時提交的方式為：一旦生成操作數(shù)據(jù)(即用戶更改了DOM元素的屬性值)后，立即將生成的操作數(shù)據(jù)(即更改的DOM元素的屬性值)提交給服務(wù)器。該方式在前端開發(fā)時，只需要開發(fā)者在數(shù)據(jù)模型中配置數(shù)據(jù)模型字段的數(shù)據(jù)處理方式，當(dāng)用戶更改了DOM元素的屬性值會觸發(fā)DOM元素的變更事件，視圖腳本在變更事件的邏輯中會默認調(diào)用數(shù)據(jù)模型字段的數(shù)據(jù)處理方式，以此實現(xiàn)用戶數(shù)據(jù)的實時提交(更新)。

用戶行為觸發(fā)提交的方式為：當(dāng)用戶觸發(fā)開發(fā)者預(yù)留的提交入口，提交入口的函數(shù)將調(diào)用視圖腳本中獲取視圖模板的數(shù)據(jù)實例，并將數(shù)據(jù)實例提交給服務(wù)器。例如，假設(shè)提交入口是“提交按鈕”，則用戶點擊“提交按鈕”觸發(fā)“提交按鈕”的函數(shù)，該函數(shù)將調(diào)用視圖腳本中獲取視圖模板的數(shù)據(jù)實例，并將數(shù)據(jù)實例提交給服務(wù)器。

參見圖2所示，本發(fā)明實施例還提供一種用于直播網(wǎng)站的直播房間推薦系統(tǒng)。該系統(tǒng)包括數(shù)據(jù)模型建立模塊、視圖模型建立模塊、首視圖展示模塊、交互更新模塊和數(shù)據(jù)提交模塊。

其中，數(shù)據(jù)模型建立模塊用于：獲取用戶與服務(wù)器之間的交互數(shù)據(jù)，根據(jù)獲取的交互數(shù)據(jù)建立數(shù)據(jù)模型，所述數(shù)據(jù)模型包括若干個由數(shù)據(jù)對象生成的數(shù)據(jù)實例，每個數(shù)據(jù)實例對應(yīng)一條交互數(shù)據(jù)，每條交互數(shù)據(jù)對應(yīng)一個視圖，即數(shù)據(jù)實例與視圖對應(yīng)。

視圖模型建立模塊用于：根據(jù)數(shù)據(jù)模型建立視圖模型。

首視圖展示模塊用于：當(dāng)需要展示供用戶進行交互操作的首個視圖頁面時，利用已有的視圖腳本對視圖模型進行處理，生成視圖模型對應(yīng)的HTML代碼；通過生成的HTML代碼進行首個視圖頁面的渲染，展示首個視圖頁面。

交互更新模塊用于：當(dāng)用戶利用展示的首個視圖頁面進行與網(wǎng)站視圖的交互操作，生成操作數(shù)據(jù)后；通過視圖腳本將所述操作數(shù)據(jù)更新到當(dāng)前視圖對應(yīng)的數(shù)據(jù)實例中。

數(shù)據(jù)提交模塊用于：將用戶交互的操作數(shù)據(jù)提交給服務(wù)器。

需要說明的是：上述實施例提供的系統(tǒng)在進行操作時，僅以上述各功能模塊的劃分進行舉例說明，實際應(yīng)用中，可以根據(jù)需要而將上述功能分配由不同的功能模塊完成，即將系統(tǒng)的內(nèi)部結(jié)構(gòu)劃分成不同的功能模塊，以完成以上描述的全部或者部分功能。

本發(fā)明不局限于上述實施方式，對于本技術(shù)領(lǐng)域的普通技術(shù)人員來說，在不脫離本發(fā)明原理的前提下，還可以做出若干改進和潤飾，這些改進和潤飾也視為本發(fā)明的保護范圍之內(nèi)。

本說明書中未作詳細描述的內(nèi)容屬于本領(lǐng)域?qū)I(yè)技術(shù)人員公知的現(xiàn)有技術(shù)。