国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

js模版引擎介紹

duan199226 / 374人閱讀

摘要：使用方法編譯模板并根據(jù)所給的數(shù)據(jù)立即渲染出結(jié)果僅編譯模版暫不渲染，它會(huì)返回一個(gè)可重用的編譯后的函數(shù)根據(jù)給定的數(shù)據(jù)，對(duì)之前編譯好的模板進(jìn)行數(shù)據(jù)渲染參考資料模板引擎概述

js模版引擎介紹

JavaScript 模板是將 HTML 結(jié)構(gòu)從包含它們的內(nèi)容中分離的方法。模板系統(tǒng)通常會(huì)引入一些新語(yǔ)法，但通常是非常簡(jiǎn)單的，一個(gè)要注意的有趣的點(diǎn)是，替換標(biāo)記通常是由雙花括號(hào)({ {……} })表示，這也是 Mustache 和 Handlebars 名字的來(lái)源。
什么時(shí)候使用JavaScript模板？

一旦我們發(fā)現(xiàn)自己在 JavaScript 字符串內(nèi)包含 HTML，就應(yīng)該開始考慮 JavaScript 模板可能給我們帶來(lái)的好處。當(dāng)建立一個(gè)可維護(hù)的代碼庫(kù)，關(guān)注點(diǎn)分離是至關(guān)重要的，所以任何可以幫助我們實(shí)現(xiàn)這一目標(biāo)的手段都應(yīng)該探索。
在前端 web 開發(fā)，將 HTML 從 JavaScript 分離顯得很重要（這是雙向的，我們也不應(yīng)該在 HTML 中內(nèi)聯(lián) JavaScript）

概述

模板引擎大都由 5 部分組成：語(yǔ)法、解析、編譯、緩存、渲染。

語(yǔ)法，定義模板書寫方式

Embedded JavaScript Templates，意思是說(shuō)你可以將js直接寫在模板里面，從而實(shí)現(xiàn)一些復(fù)雜的渲染邏輯。基于原生 JS語(yǔ)法，解析簡(jiǎn)單、渲染性能接近極限；書寫略煩，容易導(dǎo)致模板中出現(xiàn)過(guò)多的業(yè)務(wù)代碼而失控。
Logic-less Templates，這種模板引擎的哲學(xué)是模板應(yīng)當(dāng)同邏輯盡可能的分離， 因此，你不能在模板中隨意加入js代碼，而只能利用模板引擎本身提供的機(jī)制來(lái)實(shí)現(xiàn)一些簡(jiǎn)單的功能。基于自定義語(yǔ)法，解析復(fù)雜、渲染性能不一

解析，包括詞法分析（lexical analysis、scanning）和語(yǔ)義分析（syntax analysis、parsing）兩步。

手寫解析器，基于正則的字符串解析、轉(zhuǎn)義
基于解析器生成器自動(dòng)生成
基于 DOM 結(jié)構(gòu)存儲(chǔ)模板，解析存儲(chǔ)在 data- 的配置

編譯，模板為直接可直接運(yùn)行的函數(shù)

及時(shí)編譯
預(yù)編譯
延遲編譯

緩存，用于提升性能

緩存編譯結(jié)果（函數(shù)）
緩存渲染過(guò)程中涉及的數(shù)據(jù)（查找結(jié)果，字符串）
不緩存，由用戶緩存

渲染，執(zhí)行編譯結(jié)果，生成 HTML

優(yōu)先從緩存中讀取
各種模板引擎主要是解析方式的不同，語(yǔ)法、編譯、緩存、渲染則各有權(quán)衡。

幾種常見(jiàn)模版引擎的介紹： mustache.js (Github地址)

mustache是logic-less的，所以其一大特點(diǎn)是模板中沒(méi)有任何if，for結(jié)構(gòu)， 而是通過(guò)數(shù)據(jù)的值來(lái)實(shí)現(xiàn)分支和循環(huán)的。這種分離帶來(lái)的好處是模板清晰，易于維護(hù)。

關(guān)鍵點(diǎn)

文件9kb大小（很小）

簡(jiǎn)單

無(wú)依賴

無(wú)邏輯

非預(yù)編譯模板

編程語(yǔ)言無(wú)關(guān)

模板：

{{header}}

{{#bug}}
{{/bug}}
{{#items}}
{{#first}}

  • {{name}}
    • 
{{/first}}
{{#link}}

  • {{name}}
    • 
{{/link}}
{{/items}}
{{#empty}}

    The list is empty.
    
{{/empty}}

    數(shù)據(jù)：

    {
"header": "Colors",
"items": [
{"name": "red", "first": true, "url": "#Red"},
{"name": "green", "link": true, "url": "#Green"},
{"name": "blue", "link": true, "url": "#Blue"}
],
"empty": false
}

    渲染結(jié)果：

    Colors
    

  • red
    • 

  • green
    • 

  • blue
    • handlebars.js (Github地址)

    采用"Logic-less template"（無(wú)邏輯模版）的思路，在加載時(shí)被預(yù)編譯，而不是到了客戶端執(zhí)行到代碼時(shí)再去編譯， 這樣可以保證模板加載和運(yùn)行的速度。Handlebars兼容Mustache，你可以在Handlebars中導(dǎo)入Mustache模板

    關(guān)鍵點(diǎn)

    86kb文件大小（大），或者使用預(yù)編譯模板是18kb

    塊表達(dá)式（helpers）

    預(yù)編譯模板

    無(wú)依賴

    {{#if list}}

      
{{#each list}}

    • {{this}}
      • 
{{/each}}

    
{{else}}

    {{error}}
    
{{/if}}

    對(duì)應(yīng)適用json數(shù)據(jù)

    var data = {
info:["HTML5","CSS3","WebGL"],
"error":"數(shù)據(jù)取出錯(cuò)誤"
}

    這里{{#if}}判斷是否存在list數(shù)組，如果存在則遍歷list，如果不存在輸出錯(cuò)誤信息

    Embedded JS Teamplates（EJS） Github地址

    來(lái)源于ERB模板，且與ERB有很多相似之處。它有著與ERB相同的Tag，且包含很多相同的功能。EJS的特別之處在于，你需要把模板存于多帶帶文件中，并將文件名傳遞給EJS。它會(huì)加載該文件，并返回HTML。
    EJS的特別之處在于，你需要把模板存于多帶帶文件中，并將文件名傳遞給EJS。它會(huì)加載該文件，并返回HTML。

    // in template.ejs
Hello, <%= name %>
// in JS file
new EJS({ url: "template.ejs" }).render({ name: "Jack" });
// 返回： Hello, Jack

    注意，你可以加載文本模板：

    new EJS({ text: "Hello, <%= name %>" }).render({ name: "Jack" });

    下面將介紹如何進(jìn)行循環(huán)，以數(shù)組“People”為例，并在網(wǎng)站上鏈接到他們的個(gè)人頁(yè)面：

    // template.ejs

      
<% for(var i = 0; i < people.length; i++) { %>

    • <%= link_to(people[i], "/profiles/" + people[i]) %>
      • 
<% } %>

    
// in JS file
new EJS({ url: "template.ejs" }).render({ people: [ "Jack", "Fred" ] })
// Each rendered 
  •  will look like:

  • Jack

    • 這與Underscore 有些相似，但要注意“l(fā)ink_to”的使用。它是EJS定義的一個(gè)Helper，以便鏈接更容易使用。

    art-template(Github地址)

    artTemplate 是新一代 javascript 模板引擎，它在 v8 中的渲染效率可接近 javascript 性能極限，在 chrome 下渲染效率測(cè)試中分別是知名引擎 Mustache 與 micro tmpl 的 25 、 32 倍。引擎支持調(diào)試。若渲染中遇到錯(cuò)誤，調(diào)試器可精確定位到產(chǎn)生異常的模板語(yǔ)句，解決前端模板難以調(diào)試的問(wèn)題。
    獨(dú)有模板編譯工具，它能把前端模板編譯成不依賴模板引擎運(yùn)行的JS文件，讓前端模板可以突破瀏覽器的限制，實(shí)現(xiàn)像后端模板一樣按文件與目錄的方式組織、按需加載、include嵌套等。這一切都在 2.7kb(gzip) 中實(shí)現(xiàn)！
    1.引用js文件：

    2.頁(yè)面中，使用一個(gè)type="text/template"的script標(biāo)簽存放模板：

    模板邏輯語(yǔ)法開始與結(jié)束的界定符號(hào)為<% 與 %>，若<%后面緊跟=號(hào)則輸出變量?jī)?nèi)容。

    3.渲染模板

    template.render(id, data);

    繼續(xù)上面的例子：

    var fragment = template("doctor-template", {
"data":[
{
name:"王靜",
score:4.5,
photo:"images/logo.png",
hospital:"江蘇省中醫(yī)院",
desc:"婦科、不孕不育癥、月經(jīng)病等",
position:"副醫(yī)師"
},
{
name:"啦啦",
score:4.9,
photo:"images/logo.png",
hospital:"鼓樓醫(yī)院",
desc:"兒童呼吸系統(tǒng)疾病的診治，對(duì)于兒童疾病",
position:"主治醫(yī)師"
}
]
});
    Juicer (Github地址)

    當(dāng)前最新版本: 0.6.14
    Juicer 是一個(gè)高效、輕量的前端 (Javascript) 模板引擎，使用 Juicer 可以是你的代碼實(shí)現(xiàn)數(shù)據(jù)和視圖模型的分離(MVC)。除此之外，它還可以在 Node.js 環(huán)境中運(yùn)行。
    使用方法

    編譯模板并根據(jù)所給的數(shù)據(jù)立即渲染出結(jié)果.

    juicer(tpl, data);

    僅編譯模版暫不渲染，它會(huì)返回一個(gè)可重用的編譯后的函數(shù).

    var compiled_tpl = juicer(tpl);

    根據(jù)給定的數(shù)據(jù)，對(duì)之前編譯好的模板進(jìn)行數(shù)據(jù)渲染.

    var compiled_tpl = juicer(tpl);
var html = compiled_tpl.render(data);
    參考資料

    artTemplate-3.0
    JavaScript 模板引擎概述

    文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

    轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/79941.html

    相關(guān)文章

    • velocity的基本使用 && 實(shí)例講解

      摘要：的簡(jiǎn)介是一個(gè)基于的模板引擎。使用，也可以寫成。所以，應(yīng)該使用規(guī)范的格式書寫現(xiàn)在知道變量是而不是。如當(dāng)頁(yè)面中包含，如果對(duì)象有值，將顯示的值，如果不存在對(duì)象同，則在頁(yè)面中將顯示字符。 velocity的簡(jiǎn)介 Velocity是一個(gè)基于java的模板引擎（template engine）。它允許任何人僅僅簡(jiǎn)單的使用模板語(yǔ)言（template language）來(lái)引用由java代碼定義的對(duì)象，...

      zhunjiee 評(píng)論0 收藏0

    • velocity的基本使用 && 實(shí)例講解

      摘要：的簡(jiǎn)介是一個(gè)基于的模板引擎。使用，也可以寫成。所以，應(yīng)該使用規(guī)范的格式書寫現(xiàn)在知道變量是而不是。如當(dāng)頁(yè)面中包含，如果對(duì)象有值，將顯示的值，如果不存在對(duì)象同，則在頁(yè)面中將顯示字符。 velocity的簡(jiǎn)介 Velocity是一個(gè)基于java的模板引擎（template engine）。它允許任何人僅僅簡(jiǎn)單的使用模板語(yǔ)言（template language）來(lái)引用由java代碼定義的對(duì)象，...

      scq000 評(píng)論0 收藏0

    • Express 實(shí)戰(zhàn)（七）：視圖與模板：Pug 和 EJS

      摘要：而框架中最常用的兩個(gè)視圖引擎是和。實(shí)際上這些上下文對(duì)象就是會(huì)在視圖中使用到的變量。其實(shí)視圖緩存并不是緩存視圖實(shí)際上它緩存的視圖路徑。根據(jù)默認(rèn)視圖引擎將缺少拓展名的視圖文件補(bǔ)充完整。實(shí)際上存在由不同組織維護(hù)的兩個(gè)不同版本的。 showImg(https://segmentfault.com/img/remote/1460000010821004);前面的內(nèi)容大都是關(guān)于 Express 框...

      wmui 評(píng)論0 收藏0

    • Vue.js新手入門指南[轉(zhuǎn)載]

      摘要：就是一個(gè)用于搭建類似于網(wǎng)頁(yè)版知乎這種表單項(xiàng)繁多，且內(nèi)容需要根據(jù)用戶的操作進(jìn)行修改的網(wǎng)頁(yè)版應(yīng)用。單頁(yè)應(yīng)用程序顧名思義，單頁(yè)應(yīng)用一般指的就是一個(gè)頁(yè)面就是應(yīng)用，當(dāng)然也可以是一個(gè)子應(yīng)用，比如說(shuō)知乎的一個(gè)頁(yè)面就可以視為一個(gè)子應(yīng)用。 最近在逛各大網(wǎng)站，論壇，以及像SegmentFault等編程問(wèn)答社區(qū)，發(fā)現(xiàn)Vue.js異常火爆，重復(fù)性的提問(wèn)和內(nèi)容也很多，樓主自己也趁著這個(gè)大前端的熱潮，著手學(xué)習(xí)了一...

      MartinHan 評(píng)論0 收藏0

    • 構(gòu)建一個(gè)使用 Virtual-DOM 的前端模版引擎

      摘要：目錄前言問(wèn)題的提出模板引擎和結(jié)合的實(shí)現(xiàn)編譯原理相關(guān)模版引擎的詞法分析語(yǔ)法分析與抽象語(yǔ)法樹代碼生成完整的結(jié)語(yǔ)前言本文嘗試構(gòu)建一個(gè)前端模板引擎，并且把這個(gè)引擎和進(jìn)行結(jié)合。于是就構(gòu)思了一個(gè)方案，在前端模板引擎上做手腳。 作者：戴嘉華 轉(zhuǎn)載請(qǐng)注明出處并保留原文鏈接（ https://github.com/livoras/blog/issues/14 ）和作者信息。 目錄 前言 問(wèn)題的提出...

      imccl 評(píng)論0 收藏0

    發(fā)表評(píng)論

    0條評(píng)論

    最新活動(dòng)
    閱讀需要支付1元查看
    <