一種前端模板的處理方法及裝置制造方法
【專利摘要】本發(fā)明公開了一種前端模板的處理方法和裝置，應(yīng)用于對Html的第一代碼處理過程中，所述方法包括：獲得Html的所述第一代碼；獲得Html的所述前端模板；分析所述第一代碼與所述前端模板的對應(yīng)關(guān)系；根據(jù)所述對應(yīng)關(guān)系，將所述第一代碼轉(zhuǎn)換為第二代碼，其中，所述第一代碼與所述第二代碼不同。本發(fā)明實(shí)施例通過將Html的第一代碼與前端模板的對應(yīng)關(guān)系，將第一代碼轉(zhuǎn)換為第二代碼，進(jìn)而實(shí)現(xiàn)利用前端模板，在開發(fā)中將Html和Javascript進(jìn)行分離，達(dá)到代碼的可讀性和可維護(hù)性較好的技術(shù)效果。
【專利說明】一種前端模板的處理方法及裝置
【技術(shù)領(lǐng)域】
[0001]本發(fā)明涉及計(jì)算機(jī)處理【技術(shù)領(lǐng)域】，尤其涉及一種前端模板的處理方法及裝置。
【背景技術(shù)】
[0002]隨著計(jì)算機(jī)技術(shù)的不斷發(fā)展，WEB開發(fā)應(yīng)用場景也越來越多，并且隨著頁面應(yīng)用越來越復(fù)雜，在頁面中使用Javascript的地方也越來越多，很多時候使用Javascript和后端進(jìn)行通訊，獲取數(shù)據(jù)，并將返回的數(shù)據(jù)拼接成對應(yīng)的Html，渲染到頁面上。
[0003]但本申請發(fā)明人在實(shí)現(xiàn)本申請實(shí)施例中發(fā)明技術(shù)方案的過程中，受到如下困擾:
[0004]在Javascript中拼接會比較麻煩，且其代碼可讀性也比較差，編輯器對其支持也不友好。比如說，現(xiàn)有技術(shù)中由于Javascript中不支持多行的字符串，所以一般要處理多行字符串時，需要將換行符Vi進(jìn)行轉(zhuǎn)義，并且還需要使用引號將字符串包含起來。這樣的處理方式需要對換行符進(jìn)行轉(zhuǎn)義，且使用了引號，如果字符串內(nèi)容較長的話，其可讀性和可維護(hù)性均較差。

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

[0005]本發(fā)明實(shí)施例提供一種前端模板的處理方法及裝置，用于解決現(xiàn)有技術(shù)中web開發(fā)過程中，使用javascript進(jìn)行拼接時，可讀性和可維護(hù)性較差的技術(shù)問題，達(dá)到代碼可讀性和可維護(hù)性好的技術(shù)效果。
[0006]一方面，本申請通過本申請的一實(shí)施例提供如下技術(shù)方案:
[0007]一種前端模板的處理方法，應(yīng)用于對Html的第一代碼處理過程中，所述方法包括:獲得所述Html的所述第一代碼；獲得所述Html的所述前端模板；分析所述第一代碼與所述前端模板的對應(yīng)關(guān)系；根據(jù)所述對應(yīng)關(guān)系，將所述第一代碼轉(zhuǎn)換為第二代碼，其中，所述第一代碼與所述第二代碼不同。
[0008]進(jìn)一步的，所述方法還包括:分析所述Html的所述前端模板；獲得所述前端模板的引導(dǎo)標(biāo)記，以便于根據(jù)所述引導(dǎo)標(biāo)記確定所述第一代碼在Javascript中的所述第一代碼的相應(yīng)位置。
[0009]進(jìn)一步的,所述方法還包括:將所述第二代碼替換到所述Javascript中的所述第一代碼的相應(yīng)位置。
[0010]進(jìn)一步的,在所述將所述第二代碼替換到所述Javascript中的所述第一代碼的相應(yīng)位置之后，還包括:在所述Html中刪除所述前端模板。
[0011]進(jìn)一步的，所述獲得所述Html的所述第一代碼包括:通過一異步接口獲得所述第
一代碼。
[0012]進(jìn)一步的,在將所述第二代碼替換到所述Javascript中的所述第一代碼的相應(yīng)位置之前，所述方法還包括:對所述第二代碼進(jìn)行壓縮處理。
[0013]另一方面，本申請通過本申請的一實(shí)施例，提供如下技術(shù)方案:
[0014]一種前端模板的處理裝置，應(yīng)用于對Html的第一代碼處理過程中，所述裝置包括:第一獲得模塊，所述第一獲得模塊用于獲得Html的所述第一代碼；第二獲得模塊，所述第二獲得模塊用于獲得Html的所述前端模板；第一分析模塊，所述第一分析模塊用于分析所述第一代碼與所述前端模板的對應(yīng)關(guān)系；轉(zhuǎn)換模塊，所述轉(zhuǎn)換模塊用于根據(jù)所述對應(yīng)關(guān)系，將所述第一代碼轉(zhuǎn)換為第二代碼，其中，所述第一代碼與所述第二代碼不同。
[0015]進(jìn)一步的，所述裝置還包括:第二分析模塊，所述第二分析模塊用于分析所述Html的所述前端模板；第三獲得模塊，所述第三獲得模塊用于獲得所述前端模板的引導(dǎo)標(biāo)記，以便于根據(jù)所述引導(dǎo)標(biāo)記確定所述第一代碼在Javascript中的所述第一代碼的相應(yīng)位置。
[0016]進(jìn)一步的，所述裝置還包括:替換模塊，所述替換模塊用于將所述第二代碼替換到所述Javascript中的所述第一代碼的相應(yīng)位置。
[0017]進(jìn)一步的，所述裝置還包括:刪除模塊，所述刪除模塊用于在所述Html中刪除所述前端模板。
[0018]進(jìn)一步的，所述裝置還包括:第四獲得模塊，所述第四獲得模塊用于通過一異步接口獲得所述第一代碼。
[0019]進(jìn)一步的，所述裝置還包括:壓縮模塊，所述壓縮模塊用于對所述第二代碼進(jìn)行壓縮處理。
[0020]本發(fā)明實(shí)施例的有益效果如下:
[0021]本發(fā)明一實(shí)施例提供的一種前端模板的處理方法和裝置，通過將Html的第一代碼與前端模板的對應(yīng)關(guān)系，將第一代碼轉(zhuǎn)換為第二代碼，進(jìn)而實(shí)現(xiàn)利用前端模板，在開發(fā)中將Html和Javascript進(jìn)行分離,達(dá)到代碼的可讀性和可維護(hù)性較好的技術(shù)效果。
[0022]進(jìn)一步的，本發(fā)明實(shí)施例通過對第二代碼進(jìn)行壓縮等優(yōu)化處理，可以減少代碼的體積，提升頁面的訪問速度。
【專利附圖】

【附圖說明】
[0023]圖1為本發(fā)明一實(shí)施例中一種前端模板的處理方法的流程示意圖；
[0024]圖2為本發(fā)明一實(shí)施例中一種前端模板的處理裝置的結(jié)構(gòu)示意圖。
【具體實(shí)施方式】
[0025]本發(fā)明一實(shí)施例提供的一種前端模板的處理方法和裝置，通過將Html的第一代碼與前端模板的對應(yīng)關(guān)系，將第一代碼轉(zhuǎn)換為第二代碼，進(jìn)而實(shí)現(xiàn)利用前端模板，在開發(fā)中將Html和Javascript進(jìn)行分離,達(dá)到代碼的可讀性和可維護(hù)性較好的技術(shù)效果。
[0026]具體而言，本發(fā)明實(shí)施例旨在通過一種前端模板的機(jī)制，讓開發(fā)時拼接Html的工作還是在Html的環(huán)境中進(jìn)行，進(jìn)而增加了代碼的可讀性和可維護(hù)性。也就是說，在代碼上線時，對代碼進(jìn)行分析，分析在javascript中對html中前端模版的調(diào)用關(guān)系，對將前端模版內(nèi)容生成到對應(yīng)javascript文件中，讓上線后的javascript和html在前端模版這塊沒有任何的依賴。
[0027]也就是說，對于一個程序開發(fā)而言，開發(fā)工作主要分成兩個部分，S卩:在Html中開發(fā)Html代碼,在Javascript中開發(fā)Javascript代碼,然后通過本申請所提供的前端模板實(shí)現(xiàn)在Javascript環(huán)境中，將html代碼轉(zhuǎn)換成Javascript代碼，進(jìn)而實(shí)現(xiàn)javascript環(huán)境中代碼的完整性，同時也實(shí)現(xiàn)了上述代碼上線后Javascript和Html在前端模塊之間沒有任何依賴，達(dá)到增加代碼可讀性和可維護(hù)性的目的。需要說明的是，上述程序開發(fā)的代碼在javascript環(huán)境中包括了兩部分:一部分是Javascript環(huán)境中開發(fā)的第一部分javascript代碼,另外一部分是Html代碼通過本申請實(shí)施例轉(zhuǎn)化的第二部分javascript代碼。
[0028]為使本申請一實(shí)施例的目的、技術(shù)方案和優(yōu)點(diǎn)更加清楚，下面將結(jié)合本申請實(shí)施例中的附圖，對本申請實(shí)施例中的技術(shù)方案進(jìn)行清楚、完整地描述，顯然，所描述的實(shí)施例是本申請一部分實(shí)施例，而不是全部的實(shí)施例?；诒旧暾堉械膶?shí)施例，本領(lǐng)域普通技術(shù)人員在沒有作出創(chuàng)造性勞動前提下所獲得的所有其他實(shí)施例，都屬于本發(fā)明保護(hù)的范圍。
[0029]實(shí)施例一
[0030]為使本領(lǐng)域技術(shù)人員能夠更詳細(xì)了解本發(fā)明，以下結(jié)合附圖對本發(fā)明進(jìn)行詳細(xì)描述。
[0031]如圖1所述，圖1為本發(fā)明一實(shí)施例中一種前端模板的處理方法,應(yīng)用于對Html的第一代碼處理過程中，其中所述方法包括:
[0032]步驟10:獲得所述Html的所述第一代碼；
[0033]具體來說，步驟10主要是獲得Html中的html代碼，本發(fā)明實(shí)施例定義為第一代碼。所述第一代碼的獲得可以通過異步接口獲得，從本發(fā)明實(shí)施例來說，本領(lǐng)域技術(shù)人員從Html中獲得第一代碼的常規(guī)獲得方式均為本申請的保護(hù)范圍，本申請將不做具體闡述。
[0034]步驟20:獲得所述Html的所述前端模板；
[0035]具體來說，步驟20主要是獲得Html中的前端模板，所述前端模板為一段包含動態(tài)數(shù)據(jù)的Html代碼,這段代碼具體是通過掃描Html中的script,然后判斷script中的type為text/html為前端模版。通過該前端模板的ID可以獲取javascript中調(diào)用前端模板的位置，進(jìn)而可以通過將前端模板內(nèi)容進(jìn)行轉(zhuǎn)義換行、代碼優(yōu)化等操作，將javascript中對前端模板的引用替換為具體的前端模板的代碼，進(jìn)而實(shí)現(xiàn)了本申請的目的，即增加了代碼的可讀性和可維護(hù)性。進(jìn)一步的，這段代碼一般是通過異步接口拿到第一代碼后通過Javascript進(jìn)行渲染。
[0036]進(jìn)一步的，在獲得所述前端模板的同時，還可以獲得所述前端模板的引導(dǎo)標(biāo)記，所述引導(dǎo)標(biāo)記標(biāo)記了第一代碼在Javascript中的具體位置，引導(dǎo)標(biāo)記的作用是將根據(jù)前端模板將第一代碼轉(zhuǎn)換為第二代碼之后，便于將第二代碼置于javascript中的正確位置，以便和上述javascript環(huán)境中開發(fā)的第一部分javascript代碼形成一個整體。
[0037]具體而言，所述引導(dǎo)標(biāo)記可以標(biāo)記為:id=itemSerViCeTpl，然后通過該引導(dǎo)標(biāo)記獲得所述第一代碼在javascript中的引用位置，比如，獲取前端模版的id為itemServiceTpl,就可以通過 W(‘#itemServiceTpl，).html O 在 javascript 中進(jìn)行查找，就可以查找到對應(yīng)的引用位置。
[0038]具體來說，通過引導(dǎo)標(biāo)記，即ID查找javascript中的對應(yīng)的應(yīng)用位置的方法有:
[0039]采用比如通過拼接字符串的方式直接在Javascript中找到相應(yīng)的javascript的引用位置；
[0040]或者，還可以通過正則匹配的方式獲得javascript中的引用位置；
[0041]或者,還可以對javascript進(jìn)行詞法分析,進(jìn)而分析出javascript中的引用位置。
[0042]也就是說，對于本領(lǐng)域技術(shù)人員而言，只要通過獲得前端模板的引導(dǎo)標(biāo)記后，可以通過多種方式獲得javascript中的對應(yīng)的引用位置。本申請只是示例性的介紹上述獲得javascript中對應(yīng)的位置的方法，其他類似的獲得方法也是本專利申請的保護(hù)范圍。
[0043]步驟30:分析所述第一代碼與所述前端模板的對應(yīng)關(guān)系；
[0044]具體來說，步驟30是建立第一代碼與所述前端模板的代碼對應(yīng)關(guān)系，也就是根據(jù)前端模板的代碼將html中的代碼語言轉(zhuǎn)換為javascript中的代碼語言。
[0045]步驟40:根據(jù)所述對應(yīng)關(guān)系，將所述第一代碼轉(zhuǎn)換為第二代碼，其中，所述第一代碼與所述第二代碼不同；
[0046]具體來說，步驟40是根據(jù)前端模板與第一代碼之間的對應(yīng)關(guān)系，將第一代碼轉(zhuǎn)換為第二代碼，也就是說，在javascript中，通過前端模板的id獲得該前端模板在javascript中的引用位置，并將獲取的第一代碼渲染到該前端模板，并形成第二代碼，進(jìn)而將第二代碼置于javascript中的引用位置后，形成最終要顯示的Html片段。
[0047]步驟50:在所述Html中刪除所述前端模板。
[0048]具體來說，步驟50是在第二代碼順利進(jìn)入javascript中的相應(yīng)位置后，在javascript中已經(jīng)形成了完整的代碼，即包括了上述javascript環(huán)境中開發(fā)的第一部分javascript代碼和Html代碼通過前端模板轉(zhuǎn)為第二代碼的第二部分javascript代碼。也就是說，對于現(xiàn)階段的前端模板而言，其存在的價值已經(jīng)不再，故可以在Html中刪除所述前端模板。進(jìn)一步的，本申請實(shí)施例通過這種利用前端模板的機(jī)制，實(shí)現(xiàn)了開發(fā)時前端模板與javascript之間的分離,分別寫在對應(yīng)文件里,代碼可讀性和可維護(hù)性均較高。
[0049]同時，在刪除所述前端模板的代碼之前還可以對第二代碼進(jìn)行壓縮等優(yōu)化處理，進(jìn)而減少了代碼的體積，同時提升了頁面的訪問速度。
[0050]為了更清楚的介紹本申請實(shí)施例所提供的一種前端模板的處理方法和裝置，下面從一具體的代碼形式予以介紹。需要說明的是，下面所提供的具體代碼形式屬于示例性的，并不限定本申請的保護(hù)范圍。本領(lǐng)域的技術(shù)人員能夠根據(jù)本申請的
【發(fā)明內(nèi)容】
，編寫出不同代碼形式的文檔。具體來說，
[0051]首先，通過一個異步接口獲得如下數(shù)據(jù):
[0052]
【權(quán)利要求】
1.一種前端模板的處理方法，應(yīng)用于對Html的第一代碼處理過程中，其中，所述方法包括: 獲得所述Html的所述第一代碼； 獲得所述Html的所述前端模板； 分析所述第一代碼與所述前端模板的對應(yīng)關(guān)系； 根據(jù)所述對應(yīng)關(guān)系，將所述第一代碼轉(zhuǎn)換為第二代碼，其中，所述第一代碼與所述第二代碼不同。
2.如權(quán)利要求1所述的方法，其中，所述方法還包括: 分析所述Html的所述前端模板； 獲得所述前端模板的引導(dǎo)標(biāo)記，以便于根據(jù)所述引導(dǎo)標(biāo)記確定所述第一代碼在Javascript中的所述第一代碼的相應(yīng)位置。
3.如權(quán)利要求2所述的方法，其中，所述方法還包括: 將所述第二代碼替換到所述Javascript中的所述第一代碼的相應(yīng)位置。
4.如權(quán)利要求3所述的方法，其中，在所述將所述第二代碼替換到所述Javascript中的所述第一代碼的相應(yīng)位置之后，還包括: 在所述Html中刪除所述前端模板。
5.如權(quán)利要求1所述的方法，其中，所述獲得所述Html的所述第一代碼包括: 通過一異步接口獲得所述第一代碼。
6.如權(quán)利要求3所述的方法，其中，在將所述第二代碼替換到所述Javascript中的所述第一代碼的相應(yīng)位置之前，所述方法還包括: 對所述第二代碼進(jìn)行壓縮處理。
7.一種前端模板的處理裝置，應(yīng)用于對Html的第一代碼處理過程中，其中，所述裝置包括: 第一獲得模塊，所述第一獲得模塊用于獲得所述Html的所述第一代碼； 第二獲得模塊，所述第二獲得模塊用于獲得所述Html的所述前端模板； 第一分析模塊，所述第一分析模塊用于分析所述第一代碼與所述前端模板的對應(yīng)關(guān)系; 轉(zhuǎn)換模塊，所述轉(zhuǎn)換模塊用于根據(jù)所述對應(yīng)關(guān)系，將所述第一代碼轉(zhuǎn)換為第二代碼，其中，所述第一代碼與所述第二代碼不同。
8.如權(quán)利要求7所述的裝置，其中，所述裝置還包括: 第二分析模塊，所述第二分析模塊用于分析所述Html的所述前端模板； 第三獲得模塊，所述第三獲得模塊用于獲得所述前端模板的引導(dǎo)標(biāo)記，以便于根據(jù)所述引導(dǎo)標(biāo)記確定所述第一代碼在Javascript中的所述第一代碼的相應(yīng)位置。
9.如權(quán)利要求8所述的裝置，其中，所述裝置還包括: 替換模塊，所述替換模塊用于將所述第二代碼替換到所述Javascript中的所述第一代碼的相應(yīng)位置。
10.如權(quán)利要求7所述的裝置，其中，所述裝置還包括: 第四獲得模塊，所述第四獲得模塊用于通過一異步接口獲得所述第一代碼。
【文檔編號】G06F9/44GK103605514SQ201310556774
【公開日】2014年2月26日 申請日期:2013年11月11日 優(yōu)先權(quán)日:2013年11月11日
【發(fā)明者】李成銀 申請人:北京奇虎科技有限公司, 奇智軟件（北京）有限公司