html静态页面如何复用,一种前端页面模板复用的方法与流程
本發(fā)明涉及前端技術(shù)領(lǐng)域，特別涉及一種前端頁(yè)面模板復(fù)用的方法。
背景技術(shù)：
前端即網(wǎng)站前臺(tái)部分，運(yùn)行在pc端，移動(dòng)端等瀏覽器上展現(xiàn)給用戶瀏覽的網(wǎng)頁(yè)。前端技術(shù)指通過(guò)瀏覽器到用戶端計(jì)算機(jī)的統(tǒng)稱，存貯于服務(wù)器端的統(tǒng)稱為后端技術(shù)。前端開發(fā)主要職能就是把網(wǎng)站的界面更好地呈現(xiàn)給用戶。
前端技術(shù)一般分為前端設(shè)計(jì)和前端開發(fā)，前端設(shè)計(jì)一般可以理解為網(wǎng)站的視覺設(shè)計(jì)，前端開發(fā)則是網(wǎng)站的前臺(tái)代碼實(shí)現(xiàn)，包括基本的html和css以及javascript/ajax，現(xiàn)在最新的高級(jí)版本html5、css3，以及svg等。
前端技術(shù)的發(fā)展是互聯(lián)網(wǎng)自身發(fā)展變化的一個(gè)縮影。隨著互聯(lián)網(wǎng)技術(shù)的發(fā)展，html5，css3，前端框架的應(yīng)用，跨平臺(tái)響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)能夠適應(yīng)各種屏幕分辨率，完美的動(dòng)效設(shè)計(jì)，給用戶帶來(lái)極高的用戶體驗(yàn)。
在web1.0時(shí)代，由于網(wǎng)速和終端能力的限制，大部分網(wǎng)站只能呈現(xiàn)簡(jiǎn)單的圖文信息，并不能滿足用戶在界面上的需求，對(duì)界面技術(shù)的要求也不高。隨著硬件的完善、高性能瀏覽器的出現(xiàn)和寬帶的普及，技術(shù)可以在用戶體驗(yàn)方面實(shí)現(xiàn)更多種可能，前端技術(shù)領(lǐng)域迸發(fā)出旺盛的生命力。
隨著互聯(lián)網(wǎng)進(jìn)入web2.0時(shí)代，各種類似桌面軟件的web應(yīng)用大量涌現(xiàn)，前端由此發(fā)生了翻天覆地的變化。網(wǎng)頁(yè)不再只是承載單一的文字和圖片，各種富媒體讓網(wǎng)頁(yè)的內(nèi)容更加生動(dòng)，網(wǎng)頁(yè)上軟件化的交互形式為用戶提供了更好的使用體驗(yàn)，這些都是基于前端技術(shù)實(shí)現(xiàn)的。
近年來(lái)，手機(jī)成為人們生活中不可或缺的一部分，成為人們身體的延伸，人們迎來(lái)了體驗(yàn)為王的時(shí)代。移動(dòng)端的前端技術(shù)開發(fā)前景寬闊。此外，前端技術(shù)還能應(yīng)用于智能電視、智能手表甚至人工智能領(lǐng)域。移動(dòng)互聯(lián)網(wǎng)帶來(lái)了大量高性能的移動(dòng)終端設(shè)備以及快速的無(wú)線網(wǎng)絡(luò)，html5，node.js的廣泛應(yīng)用，各類框架類庫(kù)層出不窮。
在數(shù)據(jù)時(shí)代，隨著互聯(lián)網(wǎng)技術(shù)的迅速發(fā)展，產(chǎn)生了大量的數(shù)據(jù)，人們的工作和生活基本上都可以用數(shù)字化表示。為了直觀地將數(shù)據(jù)呈現(xiàn)到前端頁(yè)面上，并快速開發(fā)相同類型的頁(yè)面，采用一種有效地頁(yè)面復(fù)用方式就顯得越發(fā)重要。
傳統(tǒng)的頁(yè)面復(fù)用方式是由前端工程師根據(jù)業(yè)務(wù)需求編寫頁(yè)面，這些頁(yè)面與業(yè)務(wù)緊密相關(guān)，頁(yè)面樣式無(wú)法做到統(tǒng)一化，也就無(wú)法做到樣式的重復(fù)利用。正是這種繁雜重復(fù)的工作造成了頁(yè)面開發(fā)的低效化，又因?yàn)闃邮斤L(fēng)格的不規(guī)范導(dǎo)致樣式無(wú)法共享使用，降低了復(fù)用效率。
基于上述情況，本發(fā)明提出了一種前端頁(yè)面模板復(fù)用的方法。
技術(shù)實(shí)現(xiàn)要素：
本發(fā)明為了彌補(bǔ)現(xiàn)有技術(shù)的缺陷，提供了一種簡(jiǎn)單高效的前端頁(yè)面模板復(fù)用的方法。
本發(fā)明是通過(guò)如下技術(shù)方案實(shí)現(xiàn)的：
一種前端頁(yè)面模板復(fù)用的方法，其特征在于：包括生成模板頁(yè)面和利用模板生成頁(yè)面兩個(gè)部分，具體包括以下步驟：
第一步，根據(jù)具體需求制定出一套合適的頁(yè)面主題；
第二步，結(jié)合技術(shù)規(guī)范和頁(yè)面主題設(shè)計(jì)出可以復(fù)用的頁(yè)面樣式庫(kù)，使得頁(yè)面遇到的問(wèn)題都能在樣式庫(kù)中找到解決方案；
第三步，根據(jù)可能存在的應(yīng)用場(chǎng)景，設(shè)計(jì)出不同應(yīng)用場(chǎng)景下的頁(yè)面模板，為開發(fā)人員提供參考；
第四步，根據(jù)實(shí)際場(chǎng)景，挑選頁(yè)面，并將頁(yè)面中新加入的樣式經(jīng)過(guò)審核后加入樣式庫(kù)中。
所述第一步中，對(duì)頁(yè)面模板進(jìn)行結(jié)構(gòu)化分析，制定頁(yè)面相關(guān)元素的基本顯示方式作為頁(yè)面主題，包括頁(yè)面主題色、頁(yè)面呈現(xiàn)規(guī)則和頁(yè)面控件標(biāo)準(zhǔn)，從而使頁(yè)面模板處理變得清晰高效。
所述第二步中，由前端開發(fā)人員、具體業(yè)務(wù)組的人員以及ui(界面)設(shè)計(jì)人員共同參與設(shè)計(jì)頁(yè)面樣式庫(kù)；具體業(yè)務(wù)組人員和ui設(shè)計(jì)人員共同參與可以針對(duì)具體需求制定正確且符合需求的頁(yè)面樣式，避免開發(fā)人員對(duì)不同頁(yè)面使用不同樣式，使得樣式與每個(gè)單獨(dú)頁(yè)面聯(lián)系過(guò)于緊密。
所述第三步中，頁(yè)面模板的創(chuàng)建和頁(yè)面主題規(guī)范密切相關(guān)，每一個(gè)頁(yè)面控件的樣式都有具體的樣式規(guī)范；頁(yè)面模板要盡可能簡(jiǎn)單，并對(duì)頁(yè)面模板做統(tǒng)一的樣式說(shuō)明，每一個(gè)頁(yè)面模板都清晰明了地告訴開發(fā)人員在當(dāng)前情況下應(yīng)該應(yīng)用什么樣的頁(yè)面樣式。
所述第四步中，根據(jù)頁(yè)面具體呈現(xiàn)的不同內(nèi)容和頁(yè)面模板統(tǒng)一的樣式說(shuō)明，采用不同的頁(yè)面模板；在開發(fā)頁(yè)面之前正確選擇頁(yè)面模板，從而防止在開發(fā)頁(yè)面的過(guò)程中產(chǎn)生新的問(wèn)題，方便用戶對(duì)所有頁(yè)面模板做統(tǒng)一的樣式調(diào)整。
所述第四步中，登錄頁(yè)面的呈現(xiàn)形式與具體內(nèi)容頁(yè)面選用不同模板，具體內(nèi)容頁(yè)面中又分為文字?jǐn)?shù)據(jù)呈現(xiàn)頁(yè)面與圖表文字呈現(xiàn)頁(yè)面，所述文字?jǐn)?shù)據(jù)呈現(xiàn)頁(yè)面與圖表文字呈現(xiàn)頁(yè)面分別根據(jù)需要選取不同的頁(yè)面模板。
所述第四步中，在頁(yè)面開發(fā)過(guò)程中，當(dāng)頁(yè)面根據(jù)業(yè)務(wù)需求的不同對(duì)頁(yè)面樣式有不同的要求的情況時(shí)，在公有樣式庫(kù)中尋找到所需樣式，可以根據(jù)實(shí)際場(chǎng)景調(diào)整頁(yè)面樣式。
當(dāng)所述公有樣式庫(kù)中沒(méi)有所需樣式時(shí)，可以在當(dāng)前頁(yè)面中單獨(dú)定義樣式。
本發(fā)明的有益效果是：該前端頁(yè)面模板復(fù)用的方法，通過(guò)不斷補(bǔ)充樣式庫(kù)，制定不同場(chǎng)景下的模板頁(yè)面，不僅有效減少了頁(yè)面開發(fā)周期，能夠快速構(gòu)建同類型的頁(yè)面，同時(shí)還降低了代碼維護(hù)成本以及系統(tǒng)的頁(yè)面復(fù)雜度，最重要的是保持了頁(yè)面風(fēng)格的一致性，提升了用戶體驗(yàn)。
附圖說(shuō)明
附圖1為本發(fā)明前端頁(yè)面模板復(fù)用的方法示意圖。
具體實(shí)施方式
為了使本發(fā)明所要解決的技術(shù)問(wèn)題、技術(shù)方案及有益效果更加清楚明白，以下結(jié)合實(shí)施例，對(duì)本發(fā)明進(jìn)行詳細(xì)的說(shuō)明。應(yīng)當(dāng)說(shuō)明的是，此處所描述的具體實(shí)施例僅用以解釋本發(fā)明，并不用于限定本發(fā)明。
該前端頁(yè)面模板復(fù)用的方法，包括生成模板頁(yè)面和利用模板生成頁(yè)面兩個(gè)部分，具體包括以下步驟：
第一步，根據(jù)具體需求制定出一套合適的頁(yè)面主題；
第二步，結(jié)合技術(shù)規(guī)范和頁(yè)面主題設(shè)計(jì)出可以復(fù)用的頁(yè)面樣式庫(kù)，使得頁(yè)面遇到的問(wèn)題都能在樣式庫(kù)中找到解決方案；
第三步，根據(jù)可能存在的應(yīng)用場(chǎng)景，設(shè)計(jì)出不同應(yīng)用場(chǎng)景下的頁(yè)面模板，為開發(fā)人員提供參考；
第四步，根據(jù)實(shí)際場(chǎng)景，挑選頁(yè)面，并將頁(yè)面中新加入的樣式經(jīng)過(guò)審核后加入樣式庫(kù)中。
所述第一步中，對(duì)頁(yè)面模板進(jìn)行結(jié)構(gòu)化分析，制定頁(yè)面相關(guān)元素的基本顯示方式作為頁(yè)面主題，包括頁(yè)面主題色、頁(yè)面呈現(xiàn)規(guī)則和頁(yè)面控件標(biāo)準(zhǔn)，從而使頁(yè)面模板處理變得清晰高效。
所述第二步中，由前端開發(fā)人員、具體業(yè)務(wù)組的人員以及ui(界面)設(shè)計(jì)人員共同參與設(shè)計(jì)頁(yè)面樣式庫(kù)；具體業(yè)務(wù)組人員和ui設(shè)計(jì)人員共同參與可以針對(duì)具體需求制定正確且符合需求的頁(yè)面樣式，避免開發(fā)人員對(duì)不同頁(yè)面使用不同樣式，使得樣式與每個(gè)單獨(dú)頁(yè)面聯(lián)系過(guò)于緊密。
一份完整的頁(yè)面主題規(guī)范應(yīng)該能讓開發(fā)人員清晰明確地找到所需樣式具體標(biāo)準(zhǔn)，從而快速構(gòu)建起樣式相同的頁(yè)面。
所述第三步中，頁(yè)面模板的創(chuàng)建和頁(yè)面主題規(guī)范密切相關(guān)，每一個(gè)頁(yè)面控件的樣式都有具體的樣式規(guī)范；頁(yè)面模板要盡可能簡(jiǎn)單，并對(duì)頁(yè)面模板做統(tǒng)一的樣式說(shuō)明，每一個(gè)頁(yè)面模板都清晰明了地告訴開發(fā)人員在當(dāng)前情況下應(yīng)該應(yīng)用什么樣的頁(yè)面樣式。
模板創(chuàng)建人員不應(yīng)該為求方便，制定意義不明的模板，這會(huì)造成頁(yè)面開發(fā)時(shí)的混亂。
所述第四步中，根據(jù)頁(yè)面具體呈現(xiàn)的不同內(nèi)容和頁(yè)面模板統(tǒng)一的樣式說(shuō)明，采用不同的頁(yè)面模板；在開發(fā)頁(yè)面之前正確選擇頁(yè)面模板，從而防止在開發(fā)頁(yè)面的過(guò)程中產(chǎn)生新的問(wèn)題，方便用戶對(duì)所有頁(yè)面模板做統(tǒng)一的樣式調(diào)整。
所述第四步中，登錄頁(yè)面的呈現(xiàn)形式與具體內(nèi)容頁(yè)面選用不同模板，具體內(nèi)容頁(yè)面中又分為文字?jǐn)?shù)據(jù)呈現(xiàn)頁(yè)面與圖表文字呈現(xiàn)頁(yè)面，所述文字?jǐn)?shù)據(jù)呈現(xiàn)頁(yè)面與圖表文字呈現(xiàn)頁(yè)面分別根據(jù)需要選取不同的頁(yè)面模板。
所述第四步中，在頁(yè)面開發(fā)過(guò)程中，當(dāng)頁(yè)面根據(jù)業(yè)務(wù)需求的不同對(duì)頁(yè)面樣式有不同的要求的情況時(shí)，在公有樣式庫(kù)中尋找到所需樣式，可以根據(jù)實(shí)際場(chǎng)景調(diào)整頁(yè)面樣式。
當(dāng)所述公有樣式庫(kù)中沒(méi)有所需樣式時(shí)，可以在當(dāng)前頁(yè)面中單獨(dú)定義樣式。
與現(xiàn)有技術(shù)相比，該前端頁(yè)面模板復(fù)用的方法，具有以下特點(diǎn)：
第一、通過(guò)建立通用的樣式庫(kù)實(shí)現(xiàn)了頁(yè)面風(fēng)格的統(tǒng)一，將頁(yè)面樣式規(guī)范化、通用化生成了通用模板，保持了頁(yè)面風(fēng)格的一致性，提升了用戶體驗(yàn)。
第二、通過(guò)不斷補(bǔ)充樣式庫(kù)，制定不同場(chǎng)景下的模板頁(yè)面，能夠有效減少頁(yè)面開發(fā)周期，快速構(gòu)建同類型的頁(yè)面。
第三、依據(jù)業(yè)務(wù)需求，針對(duì)實(shí)際場(chǎng)景對(duì)相關(guān)頁(yè)面樣式進(jìn)行調(diào)整，實(shí)現(xiàn)了樣式的復(fù)用化，降低了代碼維護(hù)成本以及系統(tǒng)的頁(yè)面復(fù)雜度。
以上所述的實(shí)施例，只是本發(fā)明具體實(shí)施方式的一種，本領(lǐng)域的技術(shù)人員在本發(fā)明技術(shù)方案范圍內(nèi)進(jìn)行的通常變化和替換都應(yīng)包含在本發(fā)明的保護(hù)范圍內(nèi)。
總結(jié)
以上是生活随笔為你收集整理的html静态页面如何复用,一种前端页面模板复用的方法与流程的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： vue项目前端页面模板,基于vue的前端
- 下一篇： java 前端模板_前端项目模板