一種網(wǎng)頁(yè)的構(gòu)造、加載方法及系統(tǒng)技術(shù)方案

本發(fā)明專利技術(shù)公開了一種網(wǎng)頁(yè)的構(gòu)造、加載方法及系統(tǒng)，針對(duì)現(xiàn)有技術(shù)中頁(yè)面代碼可復(fù)用性較差，大大影響開發(fā)效率的缺陷而發(fā)明專利技術(shù)，本方法的網(wǎng)頁(yè)包括頁(yè)頭和頁(yè)體，將所述頁(yè)體分割成不同的區(qū)域，所述區(qū)域由至少一個(gè)區(qū)塊構(gòu)成，加載模板文件，本發(fā)明專利技術(shù)方法和系統(tǒng)能夠達(dá)到提高代碼的復(fù)用性，提高了開發(fā)效率的技術(shù)效果。

【技術(shù)實(shí)現(xiàn)步驟摘要】

本專利技術(shù)涉及計(jì)算機(jī)
，尤其涉及一種網(wǎng)頁(yè)的構(gòu)造、加載方法及系統(tǒng)。
技術(shù)介紹
隨著互聯(lián)網(wǎng)日益普及，互聯(lián)網(wǎng)中的動(dòng)態(tài)網(wǎng)頁(yè)技術(shù)越來越成熟。常見的動(dòng)態(tài)網(wǎng)頁(yè)開發(fā)語言有 JSP (Java Server Pages)>PHP (Hypertext Preprocessor)>ASP (Active ServerPages)等，配合 CSS (Cascading Style Sheet,級(jí)聯(lián)樣式表)、JS (JavaScript)就可以實(shí)現(xiàn)非常絢麗的交互效果。然而，如果沒有好的頁(yè)面構(gòu)造方法，編寫出的代碼可復(fù)用性較差，大大影響開發(fā)效率。目前普遍采用的方法是采用模板技術(shù)來實(shí)現(xiàn)，模板技術(shù)是采用界面和數(shù)據(jù)分離的方式，由后臺(tái)提供數(shù)據(jù)，前端定義頁(yè)面級(jí)模板來實(shí)現(xiàn)，這樣需要調(diào)整前端展示時(shí)，只需修改模板頁(yè)即可。這樣的方式復(fù)用率較低，每個(gè)頁(yè)面都要設(shè)計(jì)一個(gè)模板頁(yè)，模板不能復(fù)用。
技術(shù)實(shí)現(xiàn)思路
本專利技術(shù)要解決的技術(shù)問題是提供一種網(wǎng)頁(yè)的構(gòu)造、加載方法及系統(tǒng)。為了解決上述技術(shù)問題，本專利技術(shù)提供了一種網(wǎng)頁(yè)構(gòu)造的方法，所述網(wǎng)頁(yè)包括頁(yè)頭和頁(yè)體，包括，將所述頁(yè)體分割成不同的區(qū)域，所述區(qū)域由至少一個(gè)區(qū)塊構(gòu)成，加載模板文件。進(jìn)一步地，所述模板文件包括頁(yè)面級(jí)模板、頁(yè)體級(jí)模板和區(qū)塊級(jí)模板。進(jìn)一步地,所述頁(yè)面級(jí)模板包括CSS(Cascading Style Sheet,級(jí)聯(lián)樣式表)文件、JS (JavaScript)文件和所述頁(yè)體的位置信息，所述頁(yè)體級(jí)模板包括JS文件、CSS文件和模板結(jié)構(gòu)，所述區(qū)塊級(jí)模板包括JS文件、CSS文件和模板結(jié)構(gòu)。進(jìn)一步地，所述模板結(jié)構(gòu)包括區(qū)域位置及區(qū)域內(nèi)區(qū)塊。本專利技術(shù)還提供了用于所述的網(wǎng)頁(yè)的加載方法，包括，接收用戶的請(qǐng)求封裝數(shù)據(jù)，渲染頁(yè)體，渲染頁(yè)面。進(jìn)一步地，所述渲染頁(yè)體具體為步驟S301，頁(yè)體是否聲明了要加載的CSS文件，如果所述CSS文件存在，執(zhí)行步驟S302 ;如果所述CSS文件不存在，執(zhí)行步驟S303，步驟S302，對(duì)所述CSS文件進(jìn)行預(yù)處理，步驟S303，頁(yè)體是否聲明了要加載的JS文件，如果所述JS文件存在，執(zhí)行步驟S304 ；如果所述JS文件不存在，執(zhí)行步驟S305，步驟S304，對(duì)所述JS文件進(jìn)行預(yù)處理，步驟S305，渲染模板。進(jìn)一步地,所述渲染頁(yè)面具體為步驟S601，判斷CSS文件集是否有CSS文件，如果有，執(zhí)行步驟S602 ;如果沒有，執(zhí)行步驟 S603 ；步驟S602，逐個(gè)加載CSS文件；步驟S603，判斷JS文件集是否有JS文件，如果有，執(zhí)行步驟S604 ;如果沒有，執(zhí)行步驟S605 ；步驟S604，逐個(gè)加載JS文件；步驟S605，渲染模板。本專利技術(shù)還提供了一種網(wǎng)頁(yè)的構(gòu)造系統(tǒng)，所述網(wǎng)頁(yè)包括頁(yè)頭和頁(yè)體，包括分割模塊，用于將所述頁(yè)體分割成不同的區(qū)域，所述區(qū)域由至少一個(gè)區(qū)塊構(gòu)成，加載模塊，用于加載模板文件。本專利技術(shù)還提供了用于所述網(wǎng)頁(yè)的加載系統(tǒng)，包括，封裝模塊，用于接收用戶的請(qǐng)求封裝數(shù)據(jù)，第一渲染模塊，用于渲染頁(yè)體，第二渲染模塊，用于渲染頁(yè)面。由上可知，本專利技術(shù)方法和系統(tǒng)能夠達(dá)到提高代碼的復(fù)用性，提高了開發(fā)效率的技術(shù)效果。附圖說明圖1是本專利技術(shù)一較佳實(shí)施例的頁(yè)面、區(qū)域、區(qū)塊示意圖，圖2是本專利技術(shù)一較佳實(shí)施例的構(gòu)造方法流程圖，圖3是本專利技術(shù)一較佳實(shí)施例的加載方法流程圖，圖4是本專利技術(shù)一較佳實(shí)施例的渲染頁(yè)體流程圖，圖5是本專利技術(shù)一較佳實(shí)施例的渲染頁(yè)面流程圖，圖6是本專利技術(shù)一較佳實(shí)施例的CSS預(yù)處理流程圖，圖7是本專利技術(shù)一較佳實(shí)施例的JS預(yù)處理流程圖，圖8是本專利技術(shù)一較佳實(shí)施例的構(gòu)造系統(tǒng)結(jié)構(gòu)圖，圖9是本專利技術(shù)一較佳實(shí)施例的加載系統(tǒng)結(jié)構(gòu)圖。具體實(shí)施例方式為使本專利技術(shù)的目的、技術(shù)方案、及優(yōu)點(diǎn)更加清楚明白，下面結(jié)合附圖對(duì)本專利技術(shù)涉及的一種服務(wù)功能授權(quán)的方法及系統(tǒng)的具體實(shí)施實(shí)例進(jìn)行進(jìn)一步詳細(xì)描述。動(dòng)態(tài)頁(yè)面各不相同，但它們有個(gè)共同的特點(diǎn)每個(gè)頁(yè)面由大大小小的相對(duì)獨(dú)立的區(qū)塊構(gòu)成，這些區(qū)塊可以復(fù)用到其他需要的頁(yè)面上去。只要開發(fā)這些區(qū)塊，然后根據(jù)需要進(jìn)行不同的組合，就可以完成不同頁(yè)面的開發(fā)了，這樣提高了代碼的復(fù)用性，極大地提高了開發(fā)效率。參閱圖1，本專利技術(shù)一較佳實(shí)施例的頁(yè)面、區(qū)域、區(qū)塊示意圖，如圖1所示，頁(yè)面由一個(gè)或多個(gè)區(qū)域構(gòu)成，每個(gè)區(qū)域又由一個(gè)或多個(gè)區(qū)塊構(gòu)成。參閱圖2，本專利技術(shù)一較佳實(shí)施例的構(gòu)造方法流程圖，步驟S101，將頁(yè)體分割成不同的區(qū)域，區(qū)域由至少一個(gè)區(qū)塊構(gòu)成，步驟S102，加載模板文件。模板文件包括頁(yè)面級(jí)模板、頁(yè)體級(jí)模板和區(qū)塊級(jí)模板，頁(yè)面級(jí)模板包括CSS文件、JS文件和所述頁(yè)體的位置信息，頁(yè)體級(jí)模板包括JS文件、CSS文件和模板結(jié)構(gòu)，區(qū)塊級(jí)模板包括JS文件、CSS文件和模板結(jié)構(gòu)，模板結(jié)構(gòu)包括區(qū)域位置及區(qū)域內(nèi)區(qū)塊。參閱圖3，本專利技術(shù)一較佳實(shí)施例的加載方法流程圖，步驟S201，接收用戶的請(qǐng)求封裝數(shù)據(jù)，步驟S202，渲染頁(yè)體，步驟S203，渲染頁(yè)面。參閱圖4，本專利技術(shù)一較佳實(shí)施例的渲染頁(yè)體流程圖，步驟S301，頁(yè)體是否聲明了要加載的CSS文件，如果所述CSS文件存在，執(zhí)行步驟S302 ;如果所述CSS文件不存在，執(zhí)行步驟S303，步驟S302，對(duì)所述CSS文件進(jìn)行預(yù)處理，步驟S303，頁(yè)體是否聲明了要加載的JS文件，如果所述JS文件存在，執(zhí)行步驟S304 ；如果所述JS文件不存在，執(zhí)行步驟S305，步驟S304，對(duì)所述JS文件進(jìn)行預(yù)處理，步驟S305，渲染模板。參閱圖5，本專利技術(shù)一較佳實(shí)施例的渲染頁(yè)面流程圖，步驟S601，判斷CSS文件集是否有CSS文件，如果有，執(zhí)行步驟S602 ;如果沒有，執(zhí)行步驟 S603 ；步驟S602，逐個(gè)加載CSS文件；步驟S603，判斷JS文件集是否有JS文件，如果有，執(zhí)行步驟S604 ;如果沒有，執(zhí)行步驟S605 ；步驟S604，逐個(gè)加載JS文件；步驟S605，渲染模板。參閱圖6，本專利技術(shù)一較佳實(shí)施例的CSS預(yù)處理流程圖，步驟S401，該CSS文件是否已加入CSS文件集，如果已加入，執(zhí)行步驟S402，如果未加入，流程結(jié)束，步驟S402，將CSS文件加入CSS文件集。參閱圖7，本專利技術(shù)一較佳實(shí)施例的JS預(yù)處理流程圖，步驟S501，該文件是否已加入JS文件集，如果已加入，執(zhí)行步驟S502，如果未加入，流程結(jié)束，步驟S502，將JS文件加入JS文件集。參閱圖8，本專利技術(shù)一較佳實(shí)施例的構(gòu)造系統(tǒng)結(jié)構(gòu)圖，包括分割模塊和加載模塊，分割模塊用于將所述頁(yè)體分割成不同的區(qū)域，所述區(qū)域由至少一個(gè)區(qū)塊構(gòu)成；加載模塊用于加載模板文件。圖9是本專利技術(shù)一較佳實(shí)施例的加載系統(tǒng)結(jié)構(gòu)圖。包括封裝模塊、第一渲染模塊和第二渲染模塊，封裝模塊用于接收用戶的請(qǐng)求封裝數(shù)據(jù)，第一渲染模塊用于渲染頁(yè)體，第二渲染模塊用于渲染頁(yè)面。以上具體實(shí)施方式僅用于說明本專利技術(shù)，而非用于限定本專利技術(shù)。本文檔來自技高網(wǎng)...

【技術(shù)保護(hù)點(diǎn)】
一種網(wǎng)頁(yè)的構(gòu)造方法，所述網(wǎng)頁(yè)包括頁(yè)頭和頁(yè)體，其特征在于，將所述頁(yè)體分割成不同的區(qū)域，所述區(qū)域由至少一個(gè)區(qū)塊構(gòu)成，加載模板文件。

【技術(shù)特征摘要】
1.一種網(wǎng)頁(yè)的構(gòu)造方法，所述網(wǎng)頁(yè)包括頁(yè)頭和頁(yè)體，其特征在于， 將所述頁(yè)體分割成不同的區(qū)域，所述區(qū)域由至少一個(gè)區(qū)塊構(gòu)成， 加載模板文件。2.根據(jù)權(quán)利要求1所述的方法，其特征在于，所述模板文件包括頁(yè)面級(jí)模板、頁(yè)體級(jí)模板和區(qū)塊級(jí)模板。3.根據(jù)權(quán)利要求2所述的方法，其特征在于， 所述頁(yè)面級(jí)模板包括CSS (Cascading Style Sheet,級(jí)聯(lián)樣式表)文件、JS(JavaScript)文件和所述頁(yè)體的位置信息， 所述頁(yè)體級(jí)模板包括JS文件、CSS文件和模板結(jié)構(gòu)， 所述區(qū)塊級(jí)模板包括JS文件、CSS文件和模板結(jié)構(gòu)。4.根據(jù)權(quán)利要求3所述的方法，其特征在于，所述模板結(jié)構(gòu)包括區(qū)域位置及區(qū)域內(nèi)區(qū)塊。5.一種用于權(quán)利要求1所述的網(wǎng)頁(yè)的加載方法，其特征在于， 接收用戶的請(qǐng)求封裝數(shù)據(jù)， 渲染頁(yè)體， 渲染頁(yè)面。6.根據(jù)權(quán)利要求5所述的加載方法，其特征在于，所述渲染頁(yè)體具體為 步驟S301，頁(yè)體是否聲明了要加載的CSS文件，如果所述CSS文件存在，執(zhí)行步驟S302 ;如果所述CSS文件不存在，執(zhí)行步驟S303， 步驟S302，...

【專利技術(shù)屬性】
技術(shù)研發(fā)人員：王豪杰，
申請(qǐng)(專利權(quán))人：重慶金算盤軟件有限公司，
類型：發(fā)明
國(guó)別省市：