前端模板的實現(xiàn)方法和裝置制造方法
【專利摘要】本發(fā)明涉及一種前端模板的實現(xiàn)方法和裝置。該方法包括：獲取預(yù)先定義的前端模板中所需替換的變量，所述變量包括預(yù)先定義的起始標(biāo)識和結(jié)束標(biāo)識之間的變量；將所述變量替換成數(shù)據(jù)源中指定的內(nèi)容，并將所有替換后的內(nèi)容合并；將內(nèi)容合并后的前端模板進(jìn)行渲染生成超文本標(biāo)記語言文本；將所述超文本標(biāo)記語言文本轉(zhuǎn)化為DOM節(jié)點，將所述DOM節(jié)點插入到網(wǎng)頁中。上述前端模板的實現(xiàn)方法和裝置，通過將前端模板中的變量替換為數(shù)據(jù)源指定的內(nèi)容，然后渲染生成超文本標(biāo)記語言文本，再轉(zhuǎn)化為DOM節(jié)點，即可直接插入網(wǎng)頁中，不依賴第三方庫，降低了開發(fā)成本，可遷移性較好，且支持基于渲染生成的HTML文本的DOM操作，提高了開發(fā)效率。
【專利說明】前端模板的實現(xiàn)方法和裝置

【技術(shù)領(lǐng)域】
[0001] 本發(fā)明涉及網(wǎng)絡(luò)應(yīng)用技術(shù)，特別是涉及一種前端模板的實現(xiàn)方法和裝置。

【背景技術(shù)】
[0002] 早期的Web開發(fā)中，采用的是瀏覽器請求頁面，后臺直接返回HTML (Hyper Text Markup Language,超文本標(biāo)識語言)頁面的方式。用戶所看到的頁面為后臺返回的頁面，也 就是，后臺承擔(dān)著業(yè)務(wù)邏輯處理的同時，還需負(fù)責(zé)前臺頁面的具體呈現(xiàn)即生成HTML頁面。
[0003] 隨著以gmail為代表的OPA (One Page Application)概念的興起，Web前端開發(fā) 的復(fù)雜度進(jìn)一步增加，Web頁面原來只需簡單的視覺呈現(xiàn)，現(xiàn)在需要擔(dān)負(fù)更多諸如用戶交互 處理等工作以及頻繁的視圖更新。原先的后臺直接返回最終呈現(xiàn)需要的頁面的方式，已經(jīng) 無法滿足現(xiàn)有的開發(fā)需求。由后臺負(fù)責(zé)業(yè)務(wù)邏輯處理，前端頁面負(fù)責(zé)呈現(xiàn)以及用戶交互處 理，成為一種發(fā)展的趨勢。
[0004] 前臺視圖更新，通常采用的是字符串拼接的方式，簡單靈活，但容易出錯，后續(xù)維 護(hù)的成本高。為此采用前端模板解決該后續(xù)維護(hù)成本高的問題。傳統(tǒng)的前端模板主要有兩 種：嵌入式和logic less。然而發(fā)明人經(jīng)過研究發(fā)現(xiàn)：嵌入式，只能生成模板字符串，不支 持模版嵌套，操作繁瑣，容易出錯；logic less，以jQuery Tmpl為代表，需要自定義語法，語 法學(xué)習(xí)成本高，且依賴第三方庫，額外增加腳本庫的成本。


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

[0005] 基于此，有必要針對現(xiàn)有的前端模板維護(hù)成本高、需要依賴第三方庫而需額外增 加成本的問題，提供一種成本低的前端模板的實現(xiàn)方法。
[0006] 此外，還有必要提供一種成本低的前端模板的實現(xiàn)裝置。
[0007] -種前端模板的實現(xiàn)方法，包括：
[0008] 獲取預(yù)先定義的前端模板中所需替換的變量，所述變量包括預(yù)先定義的起始標(biāo)識 和結(jié)束標(biāo)識之間的變量；
[0009] 將所述變量替換成數(shù)據(jù)源中指定的內(nèi)容，并將替換后的內(nèi)容合并；
[0010] 將內(nèi)容合并后的前端模板進(jìn)行渲染生成超文本標(biāo)記語言文本；
[0011] 將所述超文本標(biāo)記語言文本轉(zhuǎn)化為DOM節(jié)點，將所述DOM節(jié)點插入到網(wǎng)頁中。
[0012] 在其中一個實施例中，所述將所述超文本標(biāo)記語言文本轉(zhuǎn)化為DOM節(jié)點，將所述 DOM節(jié)點插入到網(wǎng)頁中的步驟包括：
[0013] 創(chuàng)建臨時節(jié)點；
[0014] 將所述臨時節(jié)點的innerHTML屬性設(shè)置為渲染生成的超文本標(biāo)記語言文本；
[0015] 將所述超文本標(biāo)記語言文本轉(zhuǎn)化為屬于所述臨時節(jié)點的子節(jié)點的DOM節(jié)點；
[0016] 將所述DOM節(jié)點插入到網(wǎng)頁中。
[0017] 在其中一個實施例中，所述獲取預(yù)先定義的前端模板中所需替換的變量的步驟之 前，還包括：
[0018] 搜索所述前端模板中是否存在預(yù)先定義的模板嵌套標(biāo)識且模板嵌套標(biāo)識內(nèi)存在 模板標(biāo)識，若是，則將所述模板標(biāo)識替換成相應(yīng)的模板內(nèi)容；
[0019] 所述變量包括所述相應(yīng)的模板內(nèi)容中的變量。
[0020] 在其中一個實施例中，所述方法還包括：
[0021] 以模板標(biāo)識為索弓丨，緩存渲染過程中生成的中間代碼。
[0022] 在其中一個實施例中，所述前端模塊采用原生語句描述，所述原生語句包括邏輯 判斷和循環(huán)處理。
[0023] -種前端模板的實現(xiàn)裝置，包括：
[0024] 獲取模塊，用于獲取預(yù)先定義的前端模板中所需替換的變量，所述變量包括預(yù)先 定義的原生語句中起始標(biāo)識和結(jié)束標(biāo)識之間的變量；
[0025] 替換合并模塊，用于將所述變量替換成數(shù)據(jù)源中指定的內(nèi)容，并將替換后的內(nèi)容 合并；
[0026] 生成模塊，用于將內(nèi)容合并后的前端模板進(jìn)行渲染生成超文本標(biāo)記語言文本；
[0027] 插入模塊，用于將所述超文本標(biāo)記語言文本轉(zhuǎn)化為DOM節(jié)點，將所述DOM節(jié)點插入 到網(wǎng)頁中。
[0028] 在其中一個實施例中，，所述插入模塊包括：
[0029] 創(chuàng)建單元，用于創(chuàng)建臨時節(jié)點；
[0030] 設(shè)置單元，用于將所述臨時節(jié)點的innerHTML屬性設(shè)置為渲染生成的超文本標(biāo)記 語目文本；
[0031] 轉(zhuǎn)化單元，用于將所述超文本標(biāo)記語言文本轉(zhuǎn)化為屬于所述臨時節(jié)點的子節(jié)點的 DOM節(jié)點；
[0032] 插入單元，用于將所述DOM節(jié)點插入到網(wǎng)頁中。
[0033] 在其中一個實施例中，所述裝置還包括：
[0034] 搜索模塊，用于搜索所述前端模板中是否存在預(yù)先定義的模板嵌套標(biāo)識且模塊嵌 套標(biāo)識內(nèi)存在模板標(biāo)識；
[0035] 替換合并模塊，還用于在前端模板中存在預(yù)先定義的模板嵌套標(biāo)識且模板嵌套標(biāo) 識內(nèi)存在模板標(biāo)識時，將所述模板標(biāo)識替換成相應(yīng)的模板內(nèi)容；
[0036] 所述變量包括所述相應(yīng)的模板內(nèi)容中的變量。
[0037] 在其中一個實施例中，所述裝置還包括：
[0038] 緩存模塊，用于以模板標(biāo)識為索引，緩存渲染過程中生成的中間代碼。
[0039] 在其中一個實施例中，所述前端模塊采用原生語句描述，所述原生語句包括邏輯 判斷和循環(huán)處理。
[0040] 上述前端模板的實現(xiàn)方法和裝置，通過將前端模板中的變量替換為數(shù)據(jù)源指定的 內(nèi)容，然后渲染生成超文本標(biāo)記語言文本，再轉(zhuǎn)化為DOM節(jié)點，即可直接插入網(wǎng)頁中，不依 賴第三方庫，降低了開發(fā)成本，可遷移性較好，且支持基于渲染生成的HTML文本的DOM操 作，提高了開發(fā)效率。此外，因支持原生語法，執(zhí)行效率高，且靈活。

【專利附圖】

【附圖說明】
[0041] 圖1為一個實施例中前端模板的實現(xiàn)方法的流程圖；
[0042] 圖2為一個實施例中將該超文本標(biāo)記語言文本轉(zhuǎn)化為DOM節(jié)點，將該DOM節(jié)點插 入到網(wǎng)頁中的步驟的流程圖；
[0043] 圖3為第一張需要生成的網(wǎng)頁內(nèi)容；
[0044] 圖4為第二張需要生成的網(wǎng)頁內(nèi)容；
[0045] 圖5為一個實施例中前端模板的實現(xiàn)裝置的結(jié)構(gòu)框圖；
[0046] 圖6為圖5中插入模塊的內(nèi)部結(jié)構(gòu)框圖；
[0047] 圖7為一個實施例中前端模板的實現(xiàn)裝置的結(jié)構(gòu)框圖。

【具體實施方式】
[0048] 為了使本發(fā)明的目的、技術(shù)方案及優(yōu)點更加清楚明白，以下結(jié)合附圖及實施例，對 本發(fā)明進(jìn)行進(jìn)一步詳細(xì)說明。應(yīng)當(dāng)理解，此處所描述的具體實施例僅僅用以解釋本發(fā)明，并 不用于限定本發(fā)明。
[0049] 如圖1所示，為一個實施例中前端模板的實現(xiàn)方法的流程圖。該前端模板的實現(xiàn) 方法可應(yīng)用于終端上的瀏覽器的頁面更新。該終端可為智能手機、個人計算機、個人數(shù)字助 理、平板電腦等。該前端模板的實現(xiàn)方法，包括：
[0050] 步驟102,獲取預(yù)先定義的前端模板中所需替換的變量，該變量包括預(yù)先定義的起 始標(biāo)識和結(jié)束標(biāo)識之間的變量。
[0051] 首先，需預(yù)先定義前端模板所能適用的數(shù)據(jù)源類型、原生語句類型、模板的起始 標(biāo)識、計數(shù)標(biāo)識、嵌套標(biāo)識等。該數(shù)據(jù)源類型為Primitive Object (原始對象）類型，例如 {"11^":"陌生網(wǎng)友"}。模板的起始標(biāo)識和結(jié)束標(biāo)識可根據(jù)需要設(shè)定，如〈％、％>。嵌套標(biāo)識 也可根據(jù)需要設(shè)定，如<%tmpl%>。該前端模塊采用原生語句描述，該原生語句包括邏輯判斷 和循環(huán)處理等。變量如<%=nick%>中的"nick"。
[0052] 步驟104,將該變量替換成數(shù)據(jù)源中指定的內(nèi)容，并將所有替換后的內(nèi)容合并。
[0053] 具體的，數(shù)據(jù)源是指所需更新的內(nèi)容的來源。如數(shù)據(jù)源中指定的內(nèi)容為"casper"， 將 "nick" 替換 "casper"。
[0054] 步驟106,將內(nèi)容合并后的前端模板進(jìn)行渲染生成超文本標(biāo)記語言文本。
[0055] 步驟108,將該超文本標(biāo)記語言文本轉(zhuǎn)化為DOM節(jié)點，將該DOM節(jié)點插入到網(wǎng)頁中。
[0056] 具體的，將渲染生成的HTML(超文本標(biāo)記語言)文本，轉(zhuǎn)化成D0M(Document Ob ject Model,文件對象模型）節(jié)點，然后通過appendTo函數(shù)插入到網(wǎng)頁中。DOM是以面向?qū)ο蠓?式描述的文檔模型，定義了表示和修改文檔所需的對象、這些對象的行為和屬性以及對象 之間的關(guān)系。
[0057] 上述前端模板的實現(xiàn)方法，通過將前端模板中的變量替換為數(shù)據(jù)源指定的內(nèi)容， 然后渲染生成超文本標(biāo)記語言文本，再轉(zhuǎn)化為DOM節(jié)點，即可直接插入網(wǎng)頁中，不依賴第三 方庫，降低了開發(fā)成本，可遷移性較好，且支持基于渲染生成的HTML文本的DOM操作，提高 了開發(fā)效率。此外，因支持原生語法，執(zhí)行效率高，且靈活。
[0058] 如圖2所示，為一個實施例中將該超文本標(biāo)記語言文本轉(zhuǎn)化為DOM節(jié)點，將該DOM 節(jié)點插入到網(wǎng)頁中的步驟包括：
[0059] 步驟202,創(chuàng)建臨時節(jié)點。
[0060] 具體的，如倉Il建臨時節(jié)點node。
[0061] 步驟204,將該臨時節(jié)點的innerHTML屬性設(shè)置為渲染生成的超文本標(biāo)記語言文 本。
[0062] 例如renderedHTML為前端模板進(jìn)行渲染生成的HTML文本。將node的innerHTML 屬性設(shè)置為渲染生成的renderedHTML。
[0063] 步驟206,將該超文本標(biāo)記語言文本轉(zhuǎn)化為屬于該臨時節(jié)點的子節(jié)點的DOM節(jié)點。
[0064] 將renderedHTML轉(zhuǎn)化成實際可操作的DOM節(jié)點，該DOM節(jié)點為node的子節(jié)點。
[0065] 步驟208,將該DOM節(jié)點插入到網(wǎng)頁中。
[0066] 通過創(chuàng)建臨時節(jié)點，并設(shè)置臨時節(jié)點的屬性為渲染生成的超文本標(biāo)記語言文本， 再生成DOM節(jié)點，操作簡單，提高了開發(fā)效率。
[0067] 在一個實施例中，該獲取預(yù)先定義的前端模板中所需替換的變量的步驟之前，還 包括：
[0068] 搜索該前端模板中是否存在預(yù)先定義的嵌套標(biāo)識且嵌套標(biāo)識內(nèi)存在模板標(biāo)識，若 是，則將該模板標(biāo)識替換成指定的模板內(nèi)容；該變量包括該指定的模板內(nèi)容中的變量。 [0069] 具體的，存在嵌套標(biāo)識即表示采用了模板嵌套，在獲取嵌套標(biāo)識內(nèi)的模板標(biāo)識，該 模板標(biāo)識是開發(fā)者預(yù)先為每個模板分配的唯一身份標(biāo)號。嵌套標(biāo)識內(nèi)的模板標(biāo)識表示調(diào)用 該模板標(biāo)識對應(yīng)的模板內(nèi)容，故搜索到模板標(biāo)識后，將其替換成相應(yīng)的模板內(nèi)容。即可預(yù)先 建立了模板內(nèi)容與模板標(biāo)識之間存在映射關(guān)系，根據(jù)模板標(biāo)識從映射關(guān)系中查找到對應(yīng)的 模板內(nèi)容，進(jìn)行替換。
[0070] 上述模板嵌套，對于公用的部分采用一個公共模板，對于不同的部分采用各自模 板，將各自模板嵌入公共模板中，將不需再重復(fù)制作公共模板，僅需對不同的內(nèi)容制作，節(jié) 省了制作成本，提高了開發(fā)效率。
[0071] 在一個實施例中，該前端模板的實現(xiàn)方法，還包括步驟：以模板標(biāo)識為索引，緩存 渲染過程中生成的中間代碼。
[0072] 具體的，將模板標(biāo)識對應(yīng)的模板內(nèi)容進(jìn)行渲染生成中間代碼后，并緩存，下次再使 用該模板標(biāo)識對應(yīng)的模板內(nèi)容時，不需再進(jìn)行渲染，提高了渲染效率，節(jié)省了時間。
[0073] 上述前端模板的實現(xiàn)方法具體應(yīng)用生成網(wǎng)頁的示例如下，模板的起始標(biāo)識和結(jié)束 標(biāo)識分別為〈％和％> :
[0074]

【權(quán)利要求】
1. 一種前端模板的實現(xiàn)方法，包括： 獲取預(yù)先定義的前端模板中所需替換的變量，所述變量包括預(yù)先定義的起始標(biāo)識和結(jié) 束標(biāo)識之間的變量； 將所述變量替換成數(shù)據(jù)源中指定的內(nèi)容，并將替換后的內(nèi)容合并； 將內(nèi)容合并后的前端模板進(jìn)行撞染生成超文本標(biāo)記語言文本； 將所述超文本標(biāo)記語言文本轉(zhuǎn)化為DOM節(jié)點，將所述DOM節(jié)點插入到網(wǎng)頁中。
2. 根據(jù)權(quán)利要求1所述的方法，其特征在于，所述將所述超文本標(biāo)記語言文本轉(zhuǎn)化為 DOM節(jié)點，將所述DOM節(jié)點插入到網(wǎng)頁中的步驟包括： 創(chuàng)建臨時節(jié)點； 將所述臨時節(jié)點的innerHTML屬性設(shè)置為撞染生成的超文本標(biāo)記語言文本； 將所述超文本標(biāo)記語言文本轉(zhuǎn)化為屬于所述臨時節(jié)點的子節(jié)點的DOM節(jié)點； 將所述DOM節(jié)點插入到網(wǎng)頁中。
3. 根據(jù)權(quán)利要求1所述的方法，其特征在于，所述獲取預(yù)先定義的前端模板中所需替 換的變量的步驟之前，還包括： 搜索所述前端模板中是否存在預(yù)先定義的模板嵌套標(biāo)識且模板嵌套標(biāo)識內(nèi)存在模板 標(biāo)識，若是，則將所述模板標(biāo)識替換成相應(yīng)的模板內(nèi)容； 所述變量包括所述相應(yīng)的模板內(nèi)容中的變量。
4. 根據(jù)權(quán)利要求3所述的方法，其特征在于，所述方法還包括： W模板標(biāo)識為索引，緩存撞染過程中生成的中間代碼。
5. 根據(jù)權(quán)利要求1所述的方法，其特征在于，所述前端模塊采用原生語句描述，所述原 生語句包括邏輯判斷和循環(huán)處理。
6. -種前端模板的實現(xiàn)裝置，其特征在于，包括： 獲取模塊，用于獲取預(yù)先定義的前端模板中所需替換的變量，所述變量包括預(yù)先定義 的起始標(biāo)識和結(jié)束標(biāo)識之間的變量； 替換合并模塊，用于將所述變量替換成數(shù)據(jù)源中指定的內(nèi)容，并將替換后的內(nèi)容合 并； 生成模塊，用于將內(nèi)容合并后的前端模板進(jìn)行撞染生成超文本標(biāo)記語言文本； 插入模塊，用于將所述超文本標(biāo)記語言文本轉(zhuǎn)化為DOM節(jié)點，將所述DOM節(jié)點插入到網(wǎng) 頁中。
7. 根據(jù)權(quán)利要求6所述的裝置，其特征在于，所述插入模塊包括： 創(chuàng)建單元，用于創(chuàng)建臨時節(jié)點； 設(shè)置單元，用于將所述臨時節(jié)點的innerHTML屬性設(shè)置為撞染生成的超文本標(biāo)記語言 文本； 轉(zhuǎn)化單元，用于將所述超文本標(biāo)記語言文本轉(zhuǎn)化為屬于所述臨時節(jié)點的子節(jié)點的DOM 節(jié)點； 插入單元，用于將所述DOM節(jié)點插入到網(wǎng)頁中。
8. 根據(jù)權(quán)利要求6所述的裝置，其特征在于，所述裝置還包括： 搜索模塊，用于搜索所述前端模板中是否存在預(yù)先定義的模板嵌套標(biāo)識且模塊嵌套標(biāo) 識內(nèi)存在模板標(biāo)識； 替換合并模塊，還用于在前端模板中存在預(yù)先定義的模板嵌套標(biāo)識且模板嵌套標(biāo)識內(nèi) 存在模板標(biāo)識時，將所述模板標(biāo)識替換成相應(yīng)的模板內(nèi)容； 所述變量包括所述相應(yīng)的模板內(nèi)容中的變量。
9. 根據(jù)權(quán)利要求8所述的裝置，其特征在于，所述裝置還包括： 緩存模塊，用于W模板標(biāo)識為索引，緩存撞染過程中生成的中間代碼。
10. 根據(jù)權(quán)利要求8所述的裝置，其特征在于，所述前端模塊采用采用原生語句描述， 所述原生語句包括邏輯判斷和循環(huán)處理。
【文檔編號】G06F17/30GK104461484SQ201310423224
【公開日】2015年3月25日 申請日期:2013年9月16日 優(yōu)先權(quán)日:2013年9月16日
【發(fā)明者】陳映平, 龍丁奮, 郭學(xué)亨, 李晶, 鄭旭澤 申請人:騰訊科技（深圳）有限公司