2. 程式人生 > >Juicer 輕量級javascript模板引擎

Juicer 輕量級javascript模板引擎

阿新 • • 發佈：2019-01-23

程式碼示例

<!DOCTYPE html>
<html>
<head>
    <title>Juicer</title>
    <meta charset=UTF-8>
    <!--引入jquery-->
    <script src="/static/jquery/jquery-1.11.1.min.js"></script>
    <!--引入juicer-->
    <script type="text/javascript" src="/static/js/ceshi/juicer.js"
 
></script>
</head>
<body>
<!--下面是模板-->
<script id="tpl" type="text/template">
    <ul>
        {@each list as it,index}
        <li>${it.name} (index:${index})</li>
        {@/each}
        {@each blah as it}
        <li>
            num:${it.num}<br/>
            {@if
 
 it.num==3}
            {@each it.inner as it2}
            ${it2.time}<br/>
            {@/each}
            {@/if}
        </li>
        {@/each}
    </ul>
</script>
<!--建立一個div來接收渲染結果-->
<div id="result"></div>

<script type="text/javascript">
    var data={
        list:[
            {name:'firstname'
 
,show:true},
            {name:'secondname',show:false},
            {name:'thirdname',show:true}
        ],
        blah:[
            {num:1},
            {num:2},
            {num:3,inner:[
                {'time':'15:00'},
                {'time':'16:00'},
                {'time':'17:00'},
                {'time':'18:00'}
            ]},
            {num:4}
        ]
    };
    var tpl=document.getElementById("tpl").innerHTML;
    var html=juicer(tpl,data); //得到渲染結果，需要放到DOM元素中才能在頁面中顯示
    console.log(html)//編譯模板並立即渲染出結果，如沒有下一句頁面看不到結果
    $("#result").html(html);
</script>
</body>
</html>

相關推薦

Juicer 輕量級javascript模板引擎

程式碼示例 <!DOCTYPE html> <html> <head> <title>Juicer</title> &l

JavaScript模板引擎例項應用

本文將舉例項向大家講解幾個常用模板引擎的簡單使用。 模板引擎示例演示地址 準備工作 演示資料：blog.json 結構： { "list": [ { "title": "這是title", "url": "htt

[譯] 只有 20 行的 JavaScript 模板引擎

寫於 2016.06.13 原文連結：JavaScript template engine in just 20 lines （譯者吐槽：只收藏不點贊都是耍流氓） 前言 我仍舊在為我的JS前處理器AbsurdJS進行開發工作。它原本是一個CSS前處理器，但之後它擴充套件成為了CSS

前端javaScript模板引擎之ArtTemplate

一、簡介       ArtTemplate是騰訊開發的一款使用方便、效能卓越javascript模板引擎,其渲染效率極其快。ArtTemplate的庫分為兩種,一個是template.js,這個是簡單的語法版本。另一個是template-native.js，是原生的語法版

JavaScript模板引擎Template.js

template.js 一款 JavaScript 模板引擎，簡單，好用。提供一套模板語法，使用者可以寫一個模板區塊，每次根據傳入的資料，生成對應資料產生的HTML片段，渲染不同的效果。https://github.com/aui/artTemplate 1.語法 （1）、使用

JavaScript模板引擎Template.js基本使用詳解

template.js是一款JavaScript模板引擎，提供一套模板語法，簡單好用，開發者可以寫一個模板區塊，每次傳入的資料，生成對應資料產生的HTML片段，渲染不同的效果。官網：簡潔語法版 https://github.com/aui/art-template/wiki/

Javascript模板引擎mustache.js詳解

mustache.js是一個簡單強大的Javascript模板引擎，使用它可以簡化在js程式碼中的html編寫，壓縮後只有9KB，非常值得在專案中使用。本文總結它的使用方法和一些使用心得，內容不算很高深，純粹是入門內容，看看即可。不過要是你還沒有用過此類的javascript引

JavaScript模板引擎實現原理和封裝

這裡以art-template為例 先看例子 <!-- 引入模板引擎js檔案--> <script type="text/javascript" src="arttemplate.js"></script> <div id="content"&g

Mustache模板技術，一個比freemarker輕量級的模板引擎

一、初識Mustache 同樣也是看Dropwizard才知道這個東西的，以前一直是知道諸如freemarker這樣的模板引擎，這個是頭一次聽說，但是聽周圍的朋友說最早這個東西是出自於JS的，Dropwizard推薦使用這個東西，而且到mustache官網看了一下，發現十

javascript模板引擎template.render使用

1 <script type="text/javascript"> 2 function test(){ 3 //你的方法 4 } 5 </script> 如上程式碼：通常我們見到的是以<script type="text/javascript"></sc

推薦五款流行的JavaScript模板引擎

推薦五款流行的JavaScript模板引擎 近日一位20歲的開發者Jack Franklin在《The top 5 JavaScript templating engines》一文中向開發者們推薦了5款流行的JavaScript模板引擎。下面為該文的譯文。 當你建立Jav

javascript 模板引擎:artTemplate-3.0

artTemplate 是新一代 javascript 模板引擎，它採用預編譯方式讓效能有了質的飛躍，並且充分利用 javascript 引擎特性，使得其效能無論在前端還是後端都有極其出色的表現。

JavaScript模板引擎-artTemplate

JavaScript模板引擎 一、為什麼使用JavaScript模板引擎 專案中，部分模組（filter、toolbar）業務複雜，過多依賴jQuery去鋪資料，導致整體效能不高，且使用jQuery操作導致程式碼量和冗餘度增大，後期維護不變。 使用Ja

javascript模板引擎 artTemplate

1.簡單操作1 <script src="template.js"></script> <script id="test" type="text/html"> <h1><%=title%></h1> &

高效能JavaScript模板引擎template.js原理解析

點選有驚喜 artTemplate是新一代javascript模板引擎,它在v8中的渲染效率可接近javascript效能極限,在chrome下渲染效率測試中分別是知名引擎Mustache與micro tmpl的25/32倍(效能測試);artTemplate的模板還

javascript模板引擎(全)

http://www.07net01.com/program/306389.html 各個模板引擎下載地址： baiduTemplate:  http://baidufe.github.io/BaiduTemplate/ artTemplate: https://githu

JavaScript模板引擎的應用場景及實現原理

一、應用場景 以下應用場景可以使用模板引擎： 1、如果你有動態ajax請求資料並需要封裝成檢視展現給使用者，想要提高自己的工作效率。 2、如果你是拼串族或者陣列push族，迫切的希望改變現有的書寫方式。 3、如果你在頁面佈局中，存在共性模組和佈局，你可以提取出公共模板，

laytpl JavaScript模板引擎使用

1.頁面傳送非同步請求獲取資料後構造頁面結構之前都是採用拼接的方式，後來發現laytpl這個模板引擎嘗試使用了一下，上手非常快。 2.頁面結構 <script id="demo" type="text/javascript"> <div id cla

對幾種流行的Javascript模板引擎的測試對比

Javascript模板引擎是資料與介面分離工作中最重要的一環，已經出現在各大型網站中：Twitter、淘寶網、新浪微博、騰訊QQ空間、騰訊微博、12306等。為了在專案中使用模板引擎，考慮從這些網站使用的引擎中選一種最好的出來。 網上有些測試結果，但盡信網不如無網，還是自

前端模板引擎artTemplate---高效能JavaScript模板引擎

關於artTemplate模板引擎的詳細原理請移步高效能JavaScript模板引擎原理解析，本文只探討如何使用。初學前端的人一般對於繫結資料都是使用原生js或者jquery來拼接字串，此為hardcode，而且拼接的過程很頭疼，什麼單引號雙引號，符號嵌入多了就