前端模板 mustache

geekidentity 發(fā)布于2019-08-21 10:39 / 2410人閱讀

摘要：最近因工作需要接觸到首先什么是呢模板語法的邏輯比較簡單。它用于，配置文件，源代碼等。它的工作方式是通過通過以哈希值或者對象的方式擴展模板標簽。

最近因工作需要接觸到 mustache.

首先什么是mustache呢

Mustache 模板語法的邏輯比較簡單。它用于HTML，配置文件，源代碼等。它的工作方式是通過通過以哈希值或者對象的方式擴展模板標簽。

github 項目地址

mustache.js

mustache簡單使用

1.簡單的變量調換：{{name}} 示例如下 :

var data = { "name": "Willy" };
Mustache.render（"{{name}} is awesome."，data）; //Willy is awesome.

2.若是變量含有html的代碼的，例如：
、等等而不想轉義可以在用{{&name}} 示例如下 :

var data = {"name" : "
Willy
"};
var output = Mustache.render（"{{&name}} is awesome."， data); //
Willy
 is awesome.

PS : 去掉"&"的成果是轉義為：
Willy
is awesome.

3.mustache 和 PHP 結合使用

在沒使用mustache之前,使用ajax獲取到數(shù)據(jù)之后,是通過拼接html代碼來實現(xiàn)的,大概如下 :

var $tpl = $("");
$tpl.find(".name").text("XXX");

引入mustache之后代碼如下 :





    //PHP代碼

    $arr = array(
            array("id"=>1,"name"=>"小茗同學"),
            array("id"=>1,"name"=>"小莉同學")
        );

    exit(json_encode($arr));

結尾

關于mustache 還有很對其他的使用方法,作者在github也給出詳細的示例.

github項目主頁傳送門
最后.本人非專業(yè)前端,如有錯誤還望指正

云服務器 GPU云服務器前端模板 mustache 前端網站模板 web前端模板

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

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

Mustache學習筆記

摘要：一個返回值渲染后的例那年那夏我是，年齡結果我是那年那夏，年齡的思想的核心是標簽和。從上面的代碼中可以看到定義模板時，使用了這樣的標記，這就是的標簽，只不過它用替代了，以免跟標簽的混淆。 Mustache學習筆記 Mustache 是一款基于javascript 實現(xiàn)的模板引擎,類似于 Microsoft’s jQuery template plugin,但更簡單易用，在前后端分離的技術...

qylost 2019-08-26 14:00 評論0 收藏0
js模版引擎介紹

摘要：使用方法編譯模板并根據(jù)所給的數(shù)據(jù)立即渲染出結果僅編譯模版暫不渲染，它會返回一個可重用的編譯后的函數(shù)根據(jù)給定的數(shù)據(jù)，對之前編譯好的模板進行數(shù)據(jù)渲染參考資料模板引擎概述 js模版引擎介紹 JavaScript 模板是將 HTML 結構從包含它們的內容中分離的方法。模板系統(tǒng)通常會引入一些新語法，但通常是非常簡單的，一個要注意的有趣的點是，替換標記通常是由雙花括號({ {……} })表示，這也...

duan199226 2019-08-19 18:44 評論0 收藏0
字符串與JavaScript之間的魔術—前端模板的原理及簡單實現(xiàn)

摘要：大多數(shù)模板實現(xiàn)原理基本一致模板字符串首先通過各種手段剝離出普通字符串和模板語法字符串生成抽象語法樹然后針對模板語法片段進行編譯，期間模板變量均去引擎輸入的變量中查找模板語法片段生成出普通片段，與原始普通字符串進行拼接輸出。前端模板的發(fā)展模板可以說是前端開發(fā)最常接觸的工具之一。將頁面固定不變的內容抽出成模板，服務端返回的動態(tài)數(shù)據(jù)裝填到模板中預留的坑位，最后組裝成完整的頁面html字符...

Steve_Wang_ 2019-08-23 11:42 評論0 收藏0
mustache：web模板引擎

摘要：簡介是一個輕邏輯模板解析引擎，它的優(yōu)勢在于可以應用在等多種編程語言中。這里主要是看中的應用。 mustache簡介 Mustache 是一個 logic-less （輕邏輯）模板解析引擎，它的優(yōu)勢在于可以應用在 Javascript、PHP、Python、Perl 等多種編程語言中。這里主要是看JavaScript中的應用。Javascript 語言的模板引擎，目前流行有 Mustac...

klivitamJ 2019-08-20 16:36 評論0 收藏0