一種基于MVVM架構(gòu)的Web前端展現(xiàn)系統(tǒng)的制作方法
【技術(shù)領(lǐng)域】
[0001 ]本發(fā)明涉及Web前端展現(xiàn)技術(shù)領(lǐng)域，更具體地說(shuō)，涉及一種基于MVVM架構(gòu)的Web前端展現(xiàn)系統(tǒng)。
【背景技術(shù)】
[0002]傳統(tǒng)的JS框架如JQuery、ExtJS等框架，使用JS代碼實(shí)現(xiàn)對(duì)HTML頁(yè)面上的dom元素進(jìn)行動(dòng)態(tài)生成、修改、刪除，這種方式極大發(fā)揮了 JS代碼對(duì)前端展現(xiàn)的控制能力，但是由于UI的設(shè)計(jì)和開(kāi)發(fā)人員掌握的技巧往往是HTML標(biāo)簽和css樣式編寫(xiě)，缺乏對(duì)JS的了解，而JS代碼編寫(xiě)人員對(duì)于業(yè)務(wù)邏輯比較清晰，但是開(kāi)發(fā)的界面缺乏美感，二者難以協(xié)調(diào)。KendoU1、JQuery EasyU1、JQueryUI'Bootstrap等成熟的UI展現(xiàn)框架，用戶進(jìn)行頁(yè)面操作，引起某個(gè)組件的內(nèi)容發(fā)生變化時(shí)，開(kāi)發(fā)人員需要在代碼中跟蹤和判斷這種變化，并根據(jù)變化執(zhí)行后臺(tái)邏輯修改數(shù)據(jù)內(nèi)容；同時(shí)，當(dāng)后臺(tái)的數(shù)據(jù)內(nèi)容變化，開(kāi)發(fā)人員需要判斷該內(nèi)容對(duì)應(yīng)的組件及參數(shù)并修改，從而引起頁(yè)面展現(xiàn)內(nèi)容的同步更新。這種開(kāi)發(fā)方式，當(dāng)業(yè)務(wù)邏輯和數(shù)據(jù)內(nèi)容較為復(fù)雜，關(guān)聯(lián)到多個(gè)頁(yè)面組件時(shí)，往往容易引起混亂。
[0003]因此，如何提高界面顯示的豐富性，提高開(kāi)發(fā)效率是現(xiàn)在需要解決的問(wèn)題。

【發(fā)明內(nèi)容】

[0004]本發(fā)明的目的在于提供一種基于MVVM架構(gòu)的Web前端展現(xiàn)系統(tǒng)，以提高界面顯示的豐富性，提高開(kāi)發(fā)效率。
[0005]為實(shí)現(xiàn)上述目的，本發(fā)明實(shí)施例提供了如下技術(shù)方案:
[0006]一種基于MVVM架構(gòu)的Web前端展現(xiàn)系統(tǒng)，包括:
[0007]基礎(chǔ)核心框架，HTML自定義標(biāo)簽公共組件庫(kù)和展現(xiàn)交互模塊；
[0008]所述基礎(chǔ)核心框架，用于封裝KnockoutAPI，對(duì)外提供Knockout基本功能，以實(shí)現(xiàn)MVVM架構(gòu)模式的基礎(chǔ)核心功能；其中，所述基礎(chǔ)核心框架基于Knockout、JQuery和Require三個(gè)框架；
[0009]所述HTML自定義標(biāo)簽公共組件庫(kù)基于所述基礎(chǔ)核心框架，結(jié)合Bootstrap ui框架和Highcharts ui框架，以自定義前端HTML標(biāo)簽的方式實(shí)現(xiàn)通用組件；
[0010]所述展現(xiàn)交互模塊包括:展現(xiàn)視圖單元和自定義展現(xiàn)交互單元;所述展現(xiàn)視圖單元，包含視圖展現(xiàn)內(nèi)容的視圖模型，以及后臺(tái)業(yè)務(wù)數(shù)據(jù)和業(yè)務(wù)邏輯處理數(shù)據(jù);所述自定義展現(xiàn)交互單元，用于展現(xiàn)頁(yè)面進(jìn)行切割后的獨(dú)立展現(xiàn)交互部分，每個(gè)模塊可在不同頁(yè)面多次調(diào)用，實(shí)現(xiàn)頁(yè)面邏輯的整合。
[0011 ]優(yōu)選的，所述基礎(chǔ)核心框架用于將所述HTML自定義標(biāo)簽公共組件庫(kù)中的公共組件與所述展現(xiàn)交互模塊進(jìn)行統(tǒng)一管理和維護(hù)。
[0012]優(yōu)選的，所述HTML自定義標(biāo)簽公共組件庫(kù)中每個(gè)公共組件包括:
[0013]組件視圖和組件視圖模型；
[0014]其中，所述組件視圖和所述組件視圖模型通過(guò)所述基礎(chǔ)核心框架進(jìn)行雙向綁定，并通過(guò)注冊(cè)成為所述基礎(chǔ)核心框架內(nèi)的組件。
[0015]優(yōu)選的，所述展現(xiàn)視圖單元包括:
[0016]視圖和視圖模型；其中，所述視圖與所述視圖模型通過(guò)所述核心框架進(jìn)行雙向綁定，并通過(guò)注冊(cè)成為所述基礎(chǔ)核心框架內(nèi)的模塊。
[0017]優(yōu)選的，組件間通過(guò)所述基礎(chǔ)核心框架提供的消息訂閱機(jī)制進(jìn)行調(diào)用事件和傳遞參數(shù)。
[0018]優(yōu)選的，所述基礎(chǔ)核心框架用于對(duì)路徑的解析和對(duì)js瀏覽器兼容性的處理。
[0019]優(yōu)選的，所述HTML自定義標(biāo)簽公共組件庫(kù)采用Knockout的component機(jī)制，以每個(gè)組件名稱命名標(biāo)簽，以每個(gè)自定義標(biāo)簽的params屬性的方式來(lái)定義組件的參數(shù)和事件。
[0020]優(yōu)選的，所述HTML自定義標(biāo)簽公共組件庫(kù)包括:
[0021]容器類組件、數(shù)據(jù)容器類組件、對(duì)話框類組件、編輯器類組件、HTML5組件、交互類組件、導(dǎo)航類組件和排版類組件。
[0022]通過(guò)以上方案可知，本發(fā)明實(shí)施例提供的一種基于MVVM架構(gòu)的Web前端展現(xiàn)系統(tǒng)，包括:基礎(chǔ)核心框架，HTML自定義標(biāo)簽公共組件庫(kù)和展現(xiàn)交互模塊;基礎(chǔ)核心框架，用于封裝KnockoutAPI，對(duì)外提供Knockout基本功能，以實(shí)現(xiàn)MVVM架構(gòu)模式的基礎(chǔ)核心功能;其中，所述基礎(chǔ)核心框架基于Knockout和JQuery、Require三個(gè)框架;HTML自定義標(biāo)簽公共組件庫(kù)基于基礎(chǔ)核心框架，結(jié)合Bootstrap ui框架和Highcharts ui框架，以自定義前端HTML標(biāo)簽的方式實(shí)現(xiàn)通用組件;展現(xiàn)交互模塊包括:展現(xiàn)視圖單元和自定義展現(xiàn)交互單元;展現(xiàn)視圖單元，包含視圖展現(xiàn)內(nèi)容的視圖模型以及后臺(tái)業(yè)務(wù)數(shù)據(jù)和業(yè)務(wù)邏輯處理數(shù)據(jù)；自定義展現(xiàn)交互單元，用于展現(xiàn)頁(yè)面進(jìn)行切割后的獨(dú)立展現(xiàn)交互部分，每個(gè)模塊可在不同頁(yè)面多次調(diào)用，實(shí)現(xiàn)頁(yè)面邏輯的整合。
[0023]可見(jiàn)，本發(fā)明在MVVM架構(gòu)的基礎(chǔ)上，使用Knockout開(kāi)發(fā)基礎(chǔ)核心框架，融合并集成響應(yīng)式布局、路由、通知/訂閱、AMD規(guī)范等內(nèi)容，利用knockoutJS的特性，完成對(duì)UI體驗(yàn)的提升;通過(guò)結(jié)合Bootstrap實(shí)現(xiàn)自定義標(biāo)簽式公共組件庫(kù)，使開(kāi)發(fā)更便捷，更直觀，為用戶提供展現(xiàn)交互模塊中頁(yè)面視圖與視圖模型的組織方式，快速構(gòu)建單頁(yè)面、輕應(yīng)用;并且本發(fā)明實(shí)現(xiàn)了JS API為輔，前端HTML標(biāo)簽解析為主的前端展現(xiàn)方式，更有利于UI人員發(fā)揮其優(yōu)勢(shì)進(jìn)行界面布局設(shè)計(jì)，同時(shí)使JS開(kāi)發(fā)人員更關(guān)注業(yè)務(wù)邏輯和用戶操作對(duì)業(yè)務(wù)數(shù)據(jù)的影響，并且通過(guò)采用視圖模型來(lái)進(jìn)行業(yè)務(wù)數(shù)據(jù)和界面視圖的動(dòng)態(tài)更新和同步，不必關(guān)心業(yè)務(wù)數(shù)據(jù)和界面之間的關(guān)聯(lián)，有效的提高了開(kāi)發(fā)效率。
【附圖說(shuō)明】
[0024]為了更清楚地說(shuō)明本發(fā)明實(shí)施例或現(xiàn)有技術(shù)中的技術(shù)方案，下面將對(duì)實(shí)施例或現(xiàn)有技術(shù)描述中所需要使用的附圖作簡(jiǎn)單地介紹，顯而易見(jiàn)地，下面描述中的附圖僅僅是本發(fā)明的一些實(shí)施例，對(duì)于本領(lǐng)域普通技術(shù)人員來(lái)講，在不付出創(chuàng)造性勞動(dòng)的前提下，還可以根據(jù)這些附圖獲得其他的附圖。
[0025]圖1為本發(fā)明實(shí)施例公開(kāi)的一種基于MVVM架構(gòu)的Web前端展現(xiàn)系統(tǒng)結(jié)構(gòu)示意圖。
【具體實(shí)施方式】
[0026]下面將結(jié)合本發(fā)明實(shí)施例中的附圖，對(duì)本發(fā)明實(shí)施例中的技術(shù)方案進(jìn)行清楚、完整地描述，顯然，所描述的實(shí)施例僅僅是本發(fā)明一部分實(shí)施例，而不是全部的實(shí)施例?；诒景l(fā)明中的實(shí)施例，本領(lǐng)域普通技術(shù)人員在沒(méi)有作出創(chuàng)造性勞動(dòng)前提下所獲得的所有其他實(shí)施例，都屬于本發(fā)明保護(hù)的范圍。
[0027]本發(fā)明實(shí)施例公開(kāi)了一種基于MVVM架構(gòu)的Web前端展現(xiàn)系統(tǒng)，以提高界面顯示的豐富性，提尚開(kāi)發(fā)效率。
[0028]參見(jiàn)圖1，本發(fā)明實(shí)施例提供的一種基于MVVM架構(gòu)的Web前端展現(xiàn)系統(tǒng)，包括:
[0029]基礎(chǔ)核心框架100，HTML自定義標(biāo)簽公共組件庫(kù)200和展現(xiàn)交互模塊300;
[°03°] 所述基礎(chǔ)核心框架100，用于封裝KnockoutAPI，對(duì)外提供Knockout基本功能，以實(shí)現(xiàn)MVVM架構(gòu)模式的基礎(chǔ)核心功能；其中，所述基礎(chǔ)核心框架100基于Knockout、JQuery和Require三個(gè)框架；
[0031]具體的，基礎(chǔ)核心框架100負(fù)責(zé)解析應(yīng)用的路徑、加載基礎(chǔ)資源、注冊(cè)并管理組件、參數(shù)初始化、封裝Knockout API方法。
[0032]優(yōu)選的，所述基礎(chǔ)核心框架用于將所述HTML自定義標(biāo)簽公共組件庫(kù)中的公共組件與所述展現(xiàn)交互模塊進(jìn)行統(tǒng)一管理和維護(hù)。
[0033]具體的，基礎(chǔ)核心框架100對(duì)KnockoutAPI進(jìn)行封裝，使用更為符合開(kāi)發(fā)人員理解思維的方式重新命名API，并對(duì)展現(xiàn)交互模塊和公共組件開(kāi)發(fā)中一些公共功能進(jìn)行封裝為通用API?；A(chǔ)核心框架100依賴于Knockout，通過(guò)封裝KnockoutAPI，對(duì)外提供Knockout基本功能，通過(guò)注冊(cè)并管理展現(xiàn)交互模塊功能來(lái)實(shí)現(xiàn)對(duì)公共標(biāo)簽庫(kù)200的統(tǒng)一管理和展現(xiàn)交互模塊的統(tǒng)一管理。
[0034]優(yōu)選的，所述基礎(chǔ)核心框架用于對(duì)路徑的解析和對(duì)js瀏覽器兼容性的處理。
[0035]優(yōu)選的，組件間通過(guò)所述基礎(chǔ)核心框架提供的消息訂閱機(jī)制進(jìn)行調(diào)用事件和傳遞參數(shù)。
[0036]具體的，基礎(chǔ)核心框架100提供消息訂閱機(jī)制，組件間除了通過(guò)自定義標(biāo)簽的params屬性進(jìn)行參數(shù)傳遞，還可以通過(guò)消息訂閱機(jī)制進(jìn)行，這種方式為組件通信提供了新的解決方案，組件間事件調(diào)用不再需要逐層傳遞，而是通過(guò)消息訂閱直接調(diào)用事件和傳遞參數(shù)，大大提高了開(kāi)發(fā)效率。
[0037]所述HTML自定義標(biāo)簽公共組件庫(kù)200基于所述基礎(chǔ)核心框架100，結(jié)合Bootstrapui框架和Highcharts ui框架，以自定義前端HTML標(biāo)簽的方式實(shí)現(xiàn)通用組件；
[0038]優(yōu)選的，所述HTML自定義標(biāo)簽公共組件庫(kù)包括:
[0039]容器類組件、數(shù)據(jù)容器類組件、對(duì)話框類組件、編輯器類組件、HTML5組件、交互類組件、導(dǎo)航類組件和排版類組件。
[0040]具體的，HTML自定義標(biāo)簽公共組件庫(kù)200基于基礎(chǔ)核心框架，并結(jié)合Bootstrap、Highcharts等ui框架，實(shí)現(xiàn)通用的ui組件，包括:容器類組件(折疊面板組件、標(biāo)簽頁(yè)組件)、數(shù)據(jù)容器類組件(表格組件、表單組件、圖表展示組件)、對(duì)話框類組件(模態(tài)對(duì)話框組件、消息對(duì)話框組件、彈出對(duì)話框組件)、編輯器類組件(日歷組件、常用編輯組件、下拉框組件、日期選擇組件)、HTML5組件(富文本編輯器組件)、交互類組件(進(jìn)度條組件、工具欄組件)、導(dǎo)航類組件(面包肩導(dǎo)航組件、菜單欄組件、導(dǎo)航條組件、分頁(yè)導(dǎo)航組件、樹(shù)組件)、排版類組件(幻燈片組件、文章標(biāo)題組件)。這些組件均通過(guò)自定義標(biāo)簽的方式對(duì)外提供，用戶使用組件和使用原生HTML標(biāo)簽一樣方便。如[0041 ]〈tabcontainer params = ,,
[0042]tabContents:params.data.tabContents.value，
[0043]seIectedTabRoute:param