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

資訊專欄INFORMATION COLUMN

js模版引擎介紹

duan199226 / 373人閱讀

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

js模版引擎介紹

JavaScript 模板是將 HTML 結構從包含它們的內容中分離的方法。模板系統通常會引入一些新語法，但通常是非常簡單的，一個要注意的有趣的點是，替換標記通常是由雙花括號({ {……} })表示，這也是 Mustache 和 Handlebars 名字的來源。
什么時候使用JavaScript模板？

一旦我們發現自己在 JavaScript 字符串內包含 HTML，就應該開始考慮 JavaScript 模板可能給我們帶來的好處。當建立一個可維護的代碼庫，關注點分離是至關重要的，所以任何可以幫助我們實現這一目標的手段都應該探索。
在前端 web 開發，將 HTML 從 JavaScript 分離顯得很重要（這是雙向的，我們也不應該在 HTML 中內聯 JavaScript）

概述

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

語法，定義模板書寫方式

Embedded JavaScript Templates，意思是說你可以將js直接寫在模板里面，從而實現一些復雜的渲染邏輯。基于原生 JS語法，解析簡單、渲染性能接近極限；書寫略煩，容易導致模板中出現過多的業務代碼而失控。
Logic-less Templates，這種模板引擎的哲學是模板應當同邏輯盡可能的分離， 因此，你不能在模板中隨意加入js代碼，而只能利用模板引擎本身提供的機制來實現一些簡單的功能。基于自定義語法，解析復雜、渲染性能不一

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

手寫解析器，基于正則的字符串解析、轉義
基于解析器生成器自動生成
基于 DOM 結構存儲模板，解析存儲在 data- 的配置

編譯，模板為直接可直接運行的函數

及時編譯
預編譯
延遲編譯

緩存，用于提升性能

緩存編譯結果（函數）
緩存渲染過程中涉及的數據（查找結果，字符串）
不緩存，由用戶緩存

渲染，執行編譯結果，生成 HTML

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

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

mustache是logic-less的，所以其一大特點是模板中沒有任何if，for結構， 而是通過數據的值來實現分支和循環的。這種分離帶來的好處是模板清晰，易于維護。

關鍵點

文件9kb大小（很小）

簡單

無依賴

無邏輯

非預編譯模板

編程語言無關

模板：

{{header}}

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

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

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

    The list is empty.
    
{{/empty}}

    數據：

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

    渲染結果：

    Colors
    

  • red
    • 

  • green
    • 

  • blue
    • handlebars.js (Github地址)

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

    關鍵點

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

    塊表達式（helpers）

    預編譯模板

    無依賴

    {{#if list}}

      
{{#each list}}

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

    
{{else}}

    {{error}}
    
{{/if}}

    對應適用json數據

    var data = {
info:["HTML5","CSS3","WebGL"],
"error":"數據取出錯誤"
}

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

    Embedded JS Teamplates（EJS） Github地址

    來源于ERB模板，且與ERB有很多相似之處。它有著與ERB相同的Tag，且包含很多相同的功能。EJS的特別之處在于，你需要把模板存于多帶帶文件中，并將文件名傳遞給EJS。它會加載該文件，并返回HTML。
    EJS的特別之處在于，你需要把模板存于多帶帶文件中，并將文件名傳遞給EJS。它會加載該文件，并返回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" });

    下面將介紹如何進行循環，以數組“People”為例，并在網站上鏈接到他們的個人頁面：

    // 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 有些相似，但要注意“link_to”的使用。它是EJS定義的一個Helper，以便鏈接更容易使用。

    art-template(Github地址)

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

    2.頁面中，使用一個type="text/template"的script標簽存放模板：

    模板邏輯語法開始與結束的界定符號為<% 與 %>，若<%后面緊跟=號則輸出變量內容。

    3.渲染模板

    template.render(id, data);

    繼續上面的例子：

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

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

    編譯模板并根據所給的數據立即渲染出結果.

    juicer(tpl, data);

    僅編譯模版暫不渲染，它會返回一個可重用的編譯后的函數.

    var compiled_tpl = juicer(tpl);

    根據給定的數據，對之前編譯好的模板進行數據渲染.

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

    artTemplate-3.0
    JavaScript 模板引擎概述

    文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

    轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/79941.html

    相關文章

    • velocity的基本使用 && 實例講解

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

      zhunjiee 評論0 收藏0

    • velocity的基本使用 && 實例講解

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

      scq000 評論0 收藏0

    • Express 實戰（七）：視圖與模板：Pug 和 EJS

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

      wmui 評論0 收藏0

    • Vue.js新手入門指南[轉載]

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

      MartinHan 評論0 收藏0

    • 構建一個使用 Virtual-DOM 的前端模版引擎

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

      imccl 評論0 收藏0

    發表評論

    0條評論

    最新活動
    閱讀需要支付1元查看
    <