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

背景技術：

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

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

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

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

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

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

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

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

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

在上述技術方案的基礎上，步驟S3具體包括以下操作：

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

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

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

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

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

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

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

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

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

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

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

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

附圖說明

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

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

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

具體實施方式

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

本說明書中未作詳細描述的內(nèi)容屬于本領域專業(yè)技術人員公知的現(xiàn)有技術。