本發(fā)明涉及前端開發(fā)技術(shù)領(lǐng)域,具體來講是一種在前端實(shí)現(xiàn)行為、數(shù)據(jù)、視圖聯(lián)動的方法及系統(tǒng)。
背景技術(shù):
前端對于網(wǎng)站來說,通常是指網(wǎng)站的前臺部分,包括網(wǎng)站的表現(xiàn)層和結(jié)構(gòu)層。因此前端技術(shù)一般分為前端設(shè)計(jì)和前端開發(fā),前端設(shè)計(jì)一般可以理解為網(wǎng)站的視覺設(shè)計(jì),前端開發(fā)則是網(wǎng)站的前臺代碼實(shí)現(xiàn),包括基本的HTML(HyperText Markup Language,超文本標(biāo)記語言)、CSS(Cascading Style Sheets,層疊樣式表)以及JavaScript/ajax。在前端開發(fā)領(lǐng)域,越來越多的業(yè)務(wù)邏輯與數(shù)據(jù)處理被強(qiáng)行接入。前端從最初處理簡單的表單提交與數(shù)據(jù)交互,變成如今以MVC(Model-View-Controller,模型-視圖-控制器),MVVM(Model-View-ViewModel,模型-視圖-視圖模型)等規(guī)范為主的單頁面應(yīng)用(SPA,Single Page Application),對開發(fā)人員的要求非常高。
前端從根本意義上來講,是一種受外部驅(qū)動的宿主靜態(tài)語言。外部驅(qū)動包括:用戶行為、瀏覽器行為、服務(wù)器行為;宿主為瀏覽器。前端的整個(gè)運(yùn)行過程主要包括:用戶與視圖交互,發(fā)出瀏覽器內(nèi)的請求;根據(jù)請求進(jìn)行數(shù)據(jù)處理后,重新繪制視圖達(dá)到用戶預(yù)期的效果;其中數(shù)據(jù)處理的過程中可能會與服務(wù)器進(jìn)行交互。
前端的核心的功能是事件管理。如圖1所示,目前,前端通用的實(shí)現(xiàn)事件管理功能的方案為:事件彈射器(Observer),事件彈射器對外提供的API(Application Programming Interface,應(yīng)用編程接口)有:1、新增(增量新增事件);2、銷毀(銷毀注冊事件);3、通知(批量執(zhí)行事件所對應(yīng)的函數(shù)隊(duì)列)。
事件彈射器在某種程度上確實(shí)解決了一些事件管理上的問題,但在真實(shí)的前端開發(fā)過程中,開發(fā)人員可以在多個(gè)不同的代碼模塊進(jìn)行個(gè)性化的事件注冊,而事件名稱和事件處理沒有統(tǒng)一規(guī)范,使得代碼調(diào)試和維護(hù)變得非常復(fù)雜,維護(hù)成本也高,一次視圖層的大改版極可能導(dǎo)致整體前端代碼的重構(gòu),且在執(zhí)行事件的過程中,一個(gè)事件函數(shù)出錯(cuò)極可能導(dǎo)致后續(xù)的函數(shù)無法執(zhí)行。
技術(shù)實(shí)現(xiàn)要素:
本發(fā)明的目的是為了克服上述背景技術(shù)的不足,提供一種在前端實(shí)現(xiàn)行為、數(shù)據(jù)、視圖聯(lián)動的方法及系統(tǒng),能使前端達(dá)到行為、數(shù)據(jù)、視圖的聯(lián)動效果,降低了前端代碼開發(fā)和調(diào)試的復(fù)雜度,便于擴(kuò)展和維護(hù)。
為達(dá)到以上目的,本發(fā)明提供一種在前端實(shí)現(xiàn)行為、數(shù)據(jù)、視圖聯(lián)動的方法,包括以下步驟:S1:獲取用戶與服務(wù)器之間的交互數(shù)據(jù),根據(jù)獲取的交互數(shù)據(jù)建立數(shù)據(jù)模型,所述數(shù)據(jù)模型包括若干個(gè)由數(shù)據(jù)對象生成的數(shù)據(jù)實(shí)例,每個(gè)數(shù)據(jù)實(shí)例對應(yīng)一條交互數(shù)據(jù),每條交互數(shù)據(jù)對應(yīng)一個(gè)視圖,即數(shù)據(jù)實(shí)例與視圖對應(yīng),轉(zhuǎn)入步驟S2;S2:根據(jù)數(shù)據(jù)模型建立視圖模型,轉(zhuǎn)入步驟S3;S3:當(dāng)需要展示供用戶進(jìn)行交互操作的首個(gè)視圖頁面時(shí),利用已有的視圖腳本對視圖模型進(jìn)行處理,生成視圖模型對應(yīng)的HTML代碼;通過生成的HTML代碼進(jìn)行首個(gè)視圖頁面的渲染,展示首個(gè)視圖頁面,轉(zhuǎn)入步驟S4;S4:用戶利用展示的首個(gè)視圖頁面進(jìn)行交互操作,生成操作數(shù)據(jù);通過視圖腳本將所述操作數(shù)據(jù)更新到當(dāng)前視圖對應(yīng)的數(shù)據(jù)實(shí)例中,轉(zhuǎn)入步驟S5;S5:將所述操作數(shù)據(jù)提交給服務(wù)器,結(jié)束。
在上述技術(shù)方案的基礎(chǔ)上,每個(gè)數(shù)據(jù)實(shí)例中包含數(shù)據(jù)模型字段、數(shù)據(jù)模型字段的默認(rèn)值和數(shù)據(jù)模型字段的數(shù)據(jù)處理方式。
在上述技術(shù)方案的基礎(chǔ)上,步驟S2中所述根據(jù)數(shù)據(jù)模型建立視圖模型的具體過程為:將建立的數(shù)據(jù)模型中各數(shù)據(jù)實(shí)例的數(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)系;同時(shí),利用視圖腳本給所有被收集到的DOM元素綁定變更事件,轉(zhuǎn)入步驟S303;
S303:利用視圖腳本將視圖模型中綁定的數(shù)據(jù)模型字段更改為數(shù)據(jù)模型字段的默認(rèn)值,并轉(zhuǎn)換為HTML代碼,同時(shí)根據(jù)視圖模型關(guān)聯(lián)的數(shù)據(jù)模型生成一個(gè)數(shù)據(jù)實(shí)例,轉(zhuǎn)入步驟S304;
S304:將視圖腳本解析后的HTML代碼插入到網(wǎng)站對應(yīng)的由開發(fā)者預(yù)先設(shè)定的區(qū)塊中,并根據(jù)生成的數(shù)據(jù)實(shí)例進(jìn)行首個(gè)視圖頁面的渲染,展示首個(gè)視圖頁面。
在上述技術(shù)方案的基礎(chǔ)上,步驟S5中,將所述操作數(shù)據(jù)提交給服務(wù)器時(shí),采用實(shí)時(shí)提交的方式或用戶行為觸發(fā)提交的方式進(jìn)行提交。
本發(fā)明同時(shí)還提供一種在前端實(shí)現(xiàn)行為、數(shù)據(jù)、視圖聯(lián)動的系統(tǒng),包括數(shù)據(jù)模型建立模塊、視圖模型建立模塊、首視圖展示模塊、交互更新模塊和數(shù)據(jù)提交模塊;所述數(shù)據(jù)模型建立模塊用于:獲取用戶與服務(wù)器之間的交互數(shù)據(jù),根據(jù)獲取的交互數(shù)據(jù)建立數(shù)據(jù)模型,所述數(shù)據(jù)模型包括若干個(gè)由數(shù)據(jù)對象生成的數(shù)據(jù)實(shí)例,每個(gè)數(shù)據(jù)實(shí)例對應(yīng)一條交互數(shù)據(jù),每條交互數(shù)據(jù)對應(yīng)一個(gè)視圖,即數(shù)據(jù)實(shí)例與視圖對應(yīng);所述視圖模型建立模塊用于:根據(jù)數(shù)據(jù)模型建立視圖模型;所述首視圖展示模塊用于:當(dāng)需要展示供用戶進(jìn)行交互操作的首個(gè)視圖頁面時(shí),利用已有的視圖腳本對視圖模型進(jìn)行處理,生成視圖模型對應(yīng)的HTML代碼;通過生成的HTML代碼進(jìn)行首個(gè)視圖頁面的渲染,展示首個(gè)視圖頁面;所述交互更新模塊用于:當(dāng)用戶利用展示的首個(gè)視圖頁面進(jìn)行交互操作,生成操作數(shù)據(jù)后;通過視圖腳本將所述操作數(shù)據(jù)更新到當(dāng)前視圖對應(yīng)的數(shù)據(jù)實(shí)例中;所述數(shù)據(jù)提交模塊用于:將用戶交互的操作數(shù)據(jù)提交給服務(wù)器。
在上述技術(shù)方案的基礎(chǔ)上,所述數(shù)據(jù)模型建立模塊建立的數(shù)據(jù)模型中,每個(gè)數(shù)據(jù)實(shí)例中包含數(shù)據(jù)模型字段、數(shù)據(jù)模型字段的默認(rèn)值和數(shù)據(jù)模型字段的數(shù)據(jù)處理方式。
在上述技術(shù)方案的基礎(chǔ)上,所述視圖模型建立模塊根據(jù)數(shù)據(jù)模型建立視圖模型的具體過程為:將建立的數(shù)據(jù)模型中各數(shù)據(jù)實(shí)例的數(shù)據(jù)模型字段依次綁定到視圖模型中,從而建立視圖模型。
在上述技術(shù)方案的基礎(chǔ)上,所述首視圖展示模塊展示首個(gè)視圖頁面的具體過程為:利用已有的視圖腳本解析視圖模型,找出視圖模型中所有與數(shù)據(jù)模型字段綁定的DOM元素,并給所有的DOM元素加上唯一標(biāo)識;利用視圖腳本收集當(dāng)前視圖模型中DOM元素與數(shù)據(jù)模型字段的關(guān)聯(lián)關(guān)系,同時(shí),利用視圖腳本給所有被收集到的DOM元素綁定變更事件;利用視圖腳本將視圖模型中綁定的數(shù)據(jù)模型字段更改為數(shù)據(jù)模型字段的默認(rèn)值,并轉(zhuǎn)換為HTML代碼,同時(shí)根據(jù)視圖模型關(guān)聯(lián)的數(shù)據(jù)模型生成一個(gè)數(shù)據(jù)實(shí)例;將視圖腳本解析后的HTML代碼插入到網(wǎng)站對應(yīng)的由開發(fā)者預(yù)先設(shè)定的區(qū)塊中,并根據(jù)生成的數(shù)據(jù)實(shí)例進(jìn)行首個(gè)視圖頁面的渲染,展示首個(gè)視圖頁面。
在上述技術(shù)方案的基礎(chǔ)上,所述數(shù)據(jù)提交模塊將用戶交互的操作數(shù)據(jù)提交給服務(wù)器時(shí),采用實(shí)時(shí)提交的方式或用戶行為觸發(fā)提交的方式進(jìn)行提交。
本發(fā)明的有益效果在于:
本發(fā)明中,能根據(jù)獲取的用戶與服務(wù)器之間的交互數(shù)據(jù)建立數(shù)據(jù)模型;根據(jù)該數(shù)據(jù)模型能建立視圖模型;當(dāng)需要展示供用戶進(jìn)行交互操作的首個(gè)視圖頁面時(shí),利用已有的視圖腳本對所述視圖模型進(jìn)行處理,生成視圖模型對應(yīng)的HTML代碼,通過生成的HTML代碼進(jìn)行首個(gè)視圖頁面的渲染,展示首個(gè)視圖頁面;當(dāng)用戶利用展示的首個(gè)視圖頁面進(jìn)行與網(wǎng)站視圖的交互操作并生成操作數(shù)據(jù)后,能通過視圖腳本將所述操作數(shù)據(jù)更新到當(dāng)前視圖對應(yīng)的數(shù)據(jù)實(shí)例中;并將該操作數(shù)據(jù)提交給服務(wù)器。整個(gè)視圖交互過程達(dá)到一種行為、數(shù)據(jù)、視圖的聯(lián)動效果。與現(xiàn)有技術(shù)相比,采用本發(fā)明的方法使得開發(fā)人員僅能對數(shù)據(jù)模型和視圖模型進(jìn)行修改,交互過程中的數(shù)據(jù)和視圖的更新維護(hù)通過數(shù)據(jù)模型、視圖模型及視圖腳本自動實(shí)現(xiàn),不但降低了前端代碼開發(fā)和調(diào)試的復(fù)雜度,而且便于擴(kuò)展和維護(hù)。
附圖說明
圖1為背景技術(shù)中前端通用的實(shí)現(xiàn)事件管理功能的方案示意圖;
圖2為本發(fā)明實(shí)施例中在前端實(shí)現(xiàn)行為、數(shù)據(jù)、視圖聯(lián)動的方法的流程圖;
圖3為本發(fā)明實(shí)施例中在前端實(shí)現(xiàn)行為、數(shù)據(jù)、視圖聯(lián)動的系統(tǒng)的結(jié)構(gòu)框圖。
具體實(shí)施方式
下面結(jié)合附圖及具體實(shí)施例對本發(fā)明作進(jìn)一步的詳細(xì)描述。
參見圖1所示,本發(fā)明實(shí)施例提供一種在前端實(shí)現(xiàn)行為、數(shù)據(jù)、視圖聯(lián)動的方法,包括以下步驟:
步驟S1:獲取用戶與服務(wù)器之間的交互數(shù)據(jù),根據(jù)獲取的交互數(shù)據(jù)建立數(shù)據(jù)模型,轉(zhuǎn)入步驟S2。
可以理解的是,所述數(shù)據(jù)模型包括若干個(gè)由數(shù)據(jù)對象生成的數(shù)據(jù)實(shí)例,每個(gè)數(shù)據(jù)實(shí)例對應(yīng)一條交互數(shù)據(jù),每條交互數(shù)據(jù)對應(yīng)一個(gè)視圖(即數(shù)據(jù)實(shí)例與視圖對應(yīng))。其中,每個(gè)數(shù)據(jù)實(shí)例中包含數(shù)據(jù)模型字段、數(shù)據(jù)模型字段的默認(rèn)值和數(shù)據(jù)模型字段的數(shù)據(jù)處理方式。
步驟S2:根據(jù)數(shù)據(jù)模型建立視圖模型,轉(zhuǎn)入步驟S3。具體來說,根據(jù)數(shù)據(jù)模型建立視圖模型的具體過程為:將建立的數(shù)據(jù)模型中各數(shù)據(jù)實(shí)例的數(shù)據(jù)模型字段依次綁定到視圖模型中,從而建立視圖模型。
步驟S3:當(dāng)需要展示供用戶進(jìn)行交互操作的首個(gè)視圖頁面時(shí),利用已有的視圖腳本對視圖模型進(jìn)行處理,生成視圖模型對應(yīng)的HTML代碼;通過生成的HTML代碼進(jìn)行首個(gè)視圖頁面的渲染,展示首個(gè)視圖頁面,轉(zhuǎn)入步驟S4。
實(shí)際操作時(shí),步驟S3具體包括以下操作:
步驟S301:利用已有的視圖腳本解析視圖模型,找出視圖模型中所有與數(shù)據(jù)模型字段綁定的DOM(Document Object Model,文檔對象模型)元素,并給所有的DOM元素加上唯一標(biāo)識,其中唯一標(biāo)識的屬性名稱為data-id,唯一標(biāo)識的屬性值為客戶端當(dāng)前時(shí)間的時(shí)間戳,轉(zhuǎn)入步驟S302;
步驟S302:利用視圖腳本收集當(dāng)前視圖模型中DOM元素與數(shù)據(jù)模型字段的關(guān)聯(lián)關(guān)系;同時(shí),利用視圖腳本給所有被收集到的DOM元素綁定變更事件(原生支持),轉(zhuǎn)入步驟S303;可以理解的是,關(guān)聯(lián)關(guān)系收集完后的結(jié)果為:一個(gè)數(shù)據(jù)模型字段對應(yīng)多個(gè)DOM元素唯一標(biāo)識;
步驟S303:利用視圖腳本將視圖模型中綁定的數(shù)據(jù)模型字段更改為數(shù)據(jù)模型字段的默認(rèn)值,并轉(zhuǎn)換為HTML代碼,同時(shí)根據(jù)視圖模型關(guān)聯(lián)的數(shù)據(jù)模型生成一個(gè)數(shù)據(jù)實(shí)例,轉(zhuǎn)入步驟S304;
步驟S304:將視圖腳本解析后的HTML代碼插入到網(wǎng)站對應(yīng)的由開發(fā)者預(yù)先設(shè)定的區(qū)塊中,并根據(jù)生成的數(shù)據(jù)實(shí)例進(jìn)行首個(gè)視圖頁面的渲染,展示首個(gè)視圖頁面。
步驟S4:用戶利用展示的首個(gè)視圖頁面進(jìn)行與網(wǎng)站視圖的交互操作,生成操作數(shù)據(jù);通過視圖腳本將所述操作數(shù)據(jù)更新到當(dāng)前視圖對應(yīng)的數(shù)據(jù)實(shí)例中,轉(zhuǎn)入步驟S5。具體來說,用戶在利用展示的首個(gè)視圖頁面進(jìn)行與網(wǎng)站視圖的交互操作生成操作數(shù)據(jù)的過程,實(shí)際是更改DOM元素的屬性值的過程,該過程會觸發(fā)該DOM元素綁定的變更事件,視圖腳本會將當(dāng)前變更的DOM元素的屬性值更新到當(dāng)前視圖對應(yīng)的數(shù)據(jù)實(shí)例中。
步驟S5:將所述操作數(shù)據(jù)提交給服務(wù)器,結(jié)束。
可以理解的是,步驟S5中,將所述操作數(shù)據(jù)提交給服務(wù)器時(shí),可采用實(shí)時(shí)提交的方式或用戶行為觸發(fā)提交的方式進(jìn)行提交。其中:
實(shí)時(shí)提交的方式為:一旦生成操作數(shù)據(jù)(即用戶更改了DOM元素的屬性值)后,立即將生成的操作數(shù)據(jù)(即更改的DOM元素的屬性值)提交給服務(wù)器。該方式在前端開發(fā)時(shí),只需要開發(fā)者在數(shù)據(jù)模型中配置數(shù)據(jù)模型字段的數(shù)據(jù)處理方式,當(dāng)用戶更改了DOM元素的屬性值會觸發(fā)DOM元素的變更事件,視圖腳本在變更事件的邏輯中會默認(rèn)調(diào)用數(shù)據(jù)模型字段的數(shù)據(jù)處理方式,以此實(shí)現(xiàn)用戶數(shù)據(jù)的實(shí)時(shí)提交(更新)。
用戶行為觸發(fā)提交的方式為:當(dāng)用戶觸發(fā)開發(fā)者預(yù)留的提交入口,提交入口的函數(shù)將調(diào)用視圖腳本中獲取視圖模板的數(shù)據(jù)實(shí)例,并將數(shù)據(jù)實(shí)例提交給服務(wù)器。例如,假設(shè)提交入口是“提交按鈕”,則用戶點(diǎn)擊“提交按鈕”觸發(fā)“提交按鈕”的函數(shù),該函數(shù)將調(diào)用視圖腳本中獲取視圖模板的數(shù)據(jù)實(shí)例,并將數(shù)據(jù)實(shí)例提交給服務(wù)器。
參見圖2所示,本發(fā)明實(shí)施例還提供一種用于直播網(wǎng)站的直播房間推薦系統(tǒng)。該系統(tǒng)包括數(shù)據(jù)模型建立模塊、視圖模型建立模塊、首視圖展示模塊、交互更新模塊和數(shù)據(jù)提交模塊。
其中,數(shù)據(jù)模型建立模塊用于:獲取用戶與服務(wù)器之間的交互數(shù)據(jù),根據(jù)獲取的交互數(shù)據(jù)建立數(shù)據(jù)模型,所述數(shù)據(jù)模型包括若干個(gè)由數(shù)據(jù)對象生成的數(shù)據(jù)實(shí)例,每個(gè)數(shù)據(jù)實(shí)例對應(yīng)一條交互數(shù)據(jù),每條交互數(shù)據(jù)對應(yīng)一個(gè)視圖,即數(shù)據(jù)實(shí)例與視圖對應(yīng)。
視圖模型建立模塊用于:根據(jù)數(shù)據(jù)模型建立視圖模型。
首視圖展示模塊用于:當(dāng)需要展示供用戶進(jìn)行交互操作的首個(gè)視圖頁面時(shí),利用已有的視圖腳本對視圖模型進(jìn)行處理,生成視圖模型對應(yīng)的HTML代碼;通過生成的HTML代碼進(jìn)行首個(gè)視圖頁面的渲染,展示首個(gè)視圖頁面。
交互更新模塊用于:當(dāng)用戶利用展示的首個(gè)視圖頁面進(jìn)行與網(wǎng)站視圖的交互操作,生成操作數(shù)據(jù)后;通過視圖腳本將所述操作數(shù)據(jù)更新到當(dāng)前視圖對應(yīng)的數(shù)據(jù)實(shí)例中。
數(shù)據(jù)提交模塊用于:將用戶交互的操作數(shù)據(jù)提交給服務(wù)器。
需要說明的是:上述實(shí)施例提供的系統(tǒng)在進(jìn)行操作時(shí),僅以上述各功能模塊的劃分進(jìn)行舉例說明,實(shí)際應(yīng)用中,可以根據(jù)需要而將上述功能分配由不同的功能模塊完成,即將系統(tǒng)的內(nèi)部結(jié)構(gòu)劃分成不同的功能模塊,以完成以上描述的全部或者部分功能。
本發(fā)明不局限于上述實(shí)施方式,對于本技術(shù)領(lǐng)域的普通技術(shù)人員來說,在不脫離本發(fā)明原理的前提下,還可以做出若干改進(jìn)和潤飾,這些改進(jìn)和潤飾也視為本發(fā)明的保護(hù)范圍之內(nèi)。
本說明書中未作詳細(xì)描述的內(nèi)容屬于本領(lǐng)域?qū)I(yè)技術(shù)人員公知的現(xiàn)有技術(shù)。