本發(fā)明涉及前端技術領域，特別涉及一種前端頁面模板復用的方法。

背景技術：

前端即網(wǎng)站前臺部分，運行在pc端，移動端等瀏覽器上展現(xiàn)給用戶瀏覽的網(wǎng)頁。前端技術指通過瀏覽器到用戶端計算機的統(tǒng)稱，存貯于服務器端的統(tǒng)稱為后端技術。前端開發(fā)主要職能就是把網(wǎng)站的界面更好地呈現(xiàn)給用戶。

前端技術一般分為前端設計和前端開發(fā)，前端設計一般可以理解為網(wǎng)站的視覺設計，前端開發(fā)則是網(wǎng)站的前臺代碼實現(xiàn)，包括基本的html和css以及javascript/ajax，現(xiàn)在最新的高級版本html5、css3，以及svg等。

前端技術的發(fā)展是互聯(lián)網(wǎng)自身發(fā)展變化的一個縮影。隨著互聯(lián)網(wǎng)技術的發(fā)展，html5，css3，前端框架的應用，跨平臺響應式網(wǎng)頁設計能夠適應各種屏幕分辨率，完美的動效設計，給用戶帶來極高的用戶體驗。

在web1.0時代，由于網(wǎng)速和終端能力的限制，大部分網(wǎng)站只能呈現(xiàn)簡單的圖文信息，并不能滿足用戶在界面上的需求，對界面技術的要求也不高。隨著硬件的完善、高性能瀏覽器的出現(xiàn)和寬帶的普及，技術可以在用戶體驗方面實現(xiàn)更多種可能，前端技術領域迸發(fā)出旺盛的生命力。

隨著互聯(lián)網(wǎng)進入web2.0時代，各種類似桌面軟件的web應用大量涌現(xiàn)，前端由此發(fā)生了翻天覆地的變化。網(wǎng)頁不再只是承載單一的文字和圖片，各種富媒體讓網(wǎng)頁的內(nèi)容更加生動，網(wǎng)頁上軟件化的交互形式為用戶提供了更好的使用體驗，這些都是基于前端技術實現(xiàn)的。

近年來，手機成為人們生活中不可或缺的一部分，成為人們身體的延伸，人們迎來了體驗為王的時代。移動端的前端技術開發(fā)前景寬闊。此外，前端技術還能應用于智能電視、智能手表甚至人工智能領域。移動互聯(lián)網(wǎng)帶來了大量高性能的移動終端設備以及快速的無線網(wǎng)絡，html5，node.js的廣泛應用，各類框架類庫層出不窮。

在數(shù)據(jù)時代，隨著互聯(lián)網(wǎng)技術的迅速發(fā)展，產(chǎn)生了大量的數(shù)據(jù)，人們的工作和生活基本上都可以用數(shù)字化表示。為了直觀地將數(shù)據(jù)呈現(xiàn)到前端頁面上，并快速開發(fā)相同類型的頁面，采用一種有效地頁面復用方式就顯得越發(fā)重要。

傳統(tǒng)的頁面復用方式是由前端工程師根據(jù)業(yè)務需求編寫頁面，這些頁面與業(yè)務緊密相關，頁面樣式無法做到統(tǒng)一化，也就無法做到樣式的重復利用。正是這種繁雜重復的工作造成了頁面開發(fā)的低效化，又因為樣式風格的不規(guī)范導致樣式無法共享使用，降低了復用效率。

基于上述情況，本發(fā)明提出了一種前端頁面模板復用的方法。

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

本發(fā)明為了彌補現(xiàn)有技術的缺陷，提供了一種簡單高效的前端頁面模板復用的方法。

本發(fā)明是通過如下技術方案實現(xiàn)的：

一種前端頁面模板復用的方法，其特征在于：包括生成模板頁面和利用模板生成頁面兩個部分，具體包括以下步驟：

第一步，根據(jù)具體需求制定出一套合適的頁面主題；

第二步，結合技術規(guī)范和頁面主題設計出可以復用的頁面樣式庫，使得頁面遇到的問題都能在樣式庫中找到解決方案；

第三步，根據(jù)可能存在的應用場景，設計出不同應用場景下的頁面模板，為開發(fā)人員提供參考；

第四步，根據(jù)實際場景，挑選頁面，并將頁面中新加入的樣式經(jīng)過審核后加入樣式庫中。

所述第一步中，對頁面模板進行結構化分析，制定頁面相關元素的基本顯示方式作為頁面主題，包括頁面主題色、頁面呈現(xiàn)規(guī)則和頁面控件標準，從而使頁面模板處理變得清晰高效。

所述第二步中，由前端開發(fā)人員、具體業(yè)務組的人員以及ui(界面)設計人員共同參與設計頁面樣式庫；具體業(yè)務組人員和ui設計人員共同參與可以針對具體需求制定正確且符合需求的頁面樣式，避免開發(fā)人員對不同頁面使用不同樣式，使得樣式與每個單獨頁面聯(lián)系過于緊密。

所述第三步中，頁面模板的創(chuàng)建和頁面主題規(guī)范密切相關，每一個頁面控件的樣式都有具體的樣式規(guī)范；頁面模板要盡可能簡單，并對頁面模板做統(tǒng)一的樣式說明，每一個頁面模板都清晰明了地告訴開發(fā)人員在當前情況下應該應用什么樣的頁面樣式。

所述第四步中，根據(jù)頁面具體呈現(xiàn)的不同內(nèi)容和頁面模板統(tǒng)一的樣式說明，采用不同的頁面模板；在開發(fā)頁面之前正確選擇頁面模板，從而防止在開發(fā)頁面的過程中產(chǎn)生新的問題，方便用戶對所有頁面模板做統(tǒng)一的樣式調(diào)整。

所述第四步中，登錄頁面的呈現(xiàn)形式與具體內(nèi)容頁面選用不同模板，具體內(nèi)容頁面中又分為文字數(shù)據(jù)呈現(xiàn)頁面與圖表文字呈現(xiàn)頁面，所述文字數(shù)據(jù)呈現(xiàn)頁面與圖表文字呈現(xiàn)頁面分別根據(jù)需要選取不同的頁面模板。

所述第四步中，在頁面開發(fā)過程中，當頁面根據(jù)業(yè)務需求的不同對頁面樣式有不同的要求的情況時，在公有樣式庫中尋找到所需樣式，可以根據(jù)實際場景調(diào)整頁面樣式。

當所述公有樣式庫中沒有所需樣式時，可以在當前頁面中單獨定義樣式。

本發(fā)明的有益效果是：該前端頁面模板復用的方法，通過不斷補充樣式庫，制定不同場景下的模板頁面，不僅有效減少了頁面開發(fā)周期，能夠快速構建同類型的頁面，同時還降低了代碼維護成本以及系統(tǒng)的頁面復雜度，最重要的是保持了頁面風格的一致性，提升了用戶體驗。

附圖說明

附圖1為本發(fā)明前端頁面模板復用的方法示意圖。

具體實施方式

為了使本發(fā)明所要解決的技術問題、技術方案及有益效果更加清楚明白，以下結合實施例，對本發(fā)明進行詳細的說明。應當說明的是，此處所描述的具體實施例僅用以解釋本發(fā)明，并不用于限定本發(fā)明。

該前端頁面模板復用的方法，包括生成模板頁面和利用模板生成頁面兩個部分，具體包括以下步驟：

第一步，根據(jù)具體需求制定出一套合適的頁面主題；

第二步，結合技術規(guī)范和頁面主題設計出可以復用的頁面樣式庫，使得頁面遇到的問題都能在樣式庫中找到解決方案；

第三步，根據(jù)可能存在的應用場景，設計出不同應用場景下的頁面模板，為開發(fā)人員提供參考；

第四步，根據(jù)實際場景，挑選頁面，并將頁面中新加入的樣式經(jīng)過審核后加入樣式庫中。

所述第一步中，對頁面模板進行結構化分析，制定頁面相關元素的基本顯示方式作為頁面主題，包括頁面主題色、頁面呈現(xiàn)規(guī)則和頁面控件標準，從而使頁面模板處理變得清晰高效。

所述第二步中，由前端開發(fā)人員、具體業(yè)務組的人員以及ui(界面)設計人員共同參與設計頁面樣式庫；具體業(yè)務組人員和ui設計人員共同參與可以針對具體需求制定正確且符合需求的頁面樣式，避免開發(fā)人員對不同頁面使用不同樣式，使得樣式與每個單獨頁面聯(lián)系過于緊密。

一份完整的頁面主題規(guī)范應該能讓開發(fā)人員清晰明確地找到所需樣式具體標準，從而快速構建起樣式相同的頁面。

所述第三步中，頁面模板的創(chuàng)建和頁面主題規(guī)范密切相關，每一個頁面控件的樣式都有具體的樣式規(guī)范；頁面模板要盡可能簡單，并對頁面模板做統(tǒng)一的樣式說明，每一個頁面模板都清晰明了地告訴開發(fā)人員在當前情況下應該應用什么樣的頁面樣式。

模板創(chuàng)建人員不應該為求方便，制定意義不明的模板，這會造成頁面開發(fā)時的混亂。

所述第四步中，根據(jù)頁面具體呈現(xiàn)的不同內(nèi)容和頁面模板統(tǒng)一的樣式說明，采用不同的頁面模板；在開發(fā)頁面之前正確選擇頁面模板，從而防止在開發(fā)頁面的過程中產(chǎn)生新的問題，方便用戶對所有頁面模板做統(tǒng)一的樣式調(diào)整。

所述第四步中，登錄頁面的呈現(xiàn)形式與具體內(nèi)容頁面選用不同模板，具體內(nèi)容頁面中又分為文字數(shù)據(jù)呈現(xiàn)頁面與圖表文字呈現(xiàn)頁面，所述文字數(shù)據(jù)呈現(xiàn)頁面與圖表文字呈現(xiàn)頁面分別根據(jù)需要選取不同的頁面模板。

所述第四步中，在頁面開發(fā)過程中，當頁面根據(jù)業(yè)務需求的不同對頁面樣式有不同的要求的情況時，在公有樣式庫中尋找到所需樣式，可以根據(jù)實際場景調(diào)整頁面樣式。

當所述公有樣式庫中沒有所需樣式時，可以在當前頁面中單獨定義樣式。

與現(xiàn)有技術相比，該前端頁面模板復用的方法，具有以下特點：

第一、通過建立通用的樣式庫實現(xiàn)了頁面風格的統(tǒng)一，將頁面樣式規(guī)范化、通用化生成了通用模板，保持了頁面風格的一致性，提升了用戶體驗。

第二、通過不斷補充樣式庫，制定不同場景下的模板頁面，能夠有效減少頁面開發(fā)周期，快速構建同類型的頁面。

第三、依據(jù)業(yè)務需求，針對實際場景對相關頁面樣式進行調(diào)整，實現(xiàn)了樣式的復用化，降低了代碼維護成本以及系統(tǒng)的頁面復雜度。

以上所述的實施例，只是本發(fā)明具體實施方式的一種，本領域的技術人員在本發(fā)明技術方案范圍內(nèi)進行的通常變化和替換都應包含在本發(fā)明的保護范圍內(nèi)。

總結

以上是生活随笔為你收集整理的html静态页面如何复用,一种前端页面模板复用的方法与流程的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。