成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

Mustache學(xué)習(xí)筆記

qylost / 2067人閱讀

摘要：一個返回值渲染后的例那年那夏我是，年齡結(jié)果我是那年那夏，年齡的思想的核心是標(biāo)簽和。從上面的代碼中可以看到定義模板時，使用了這樣的標(biāo)記，這就是的標(biāo)簽，只不過它用替代了，以免跟標(biāo)簽的混淆。

Mustache學(xué)習(xí)筆記

Mustache 是一款基于javascript 實(shí)現(xiàn)的模板引擎,類似于 Microsoft’s jQuery template plugin,但更簡單易用，在前后端分離的技術(shù)架構(gòu)下面，前端模板引擎是一種可以被考慮的技術(shù)選型，隨著重型框架（AngularJS、ReactJS、Vue）的流行，前端的模板技術(shù)已經(jīng)成為了某種形式上的標(biāo)配，Mustache 的價值在于其穩(wěn)定和經(jīng)典：

主頁：https://github.com/janl/musta...

文檔：https://mustache.github.io/mu...

1.出現(xiàn)的問題
在使用中會有可能在頁面渲染時會出現(xiàn){{xxx}}這種標(biāo)簽，雖然會被頁面立即替換掉，但是對于用戶呈現(xiàn)來講，依然不太友好

2.具體使用方式
從git hub上獲取相關(guān)的mustache.js文件，在頁面的head標(biāo)簽內(nèi)引用Jquery.js 和Mustache.js兩個腳本文件

簡介
3.渲染
渲染形式單一：var view = Mustache.render(template,obj);

參數(shù)：一個是模板html，一個是數(shù)據(jù)源對象。

view：一個返回值（渲染后的html ）

例：

var obj={name:"那年那夏",age:"23"}

var template="我是{{name}}，年齡{{age}}"

var view = Mustache.render(template,obj);

$("body").html(view);

結(jié)果：我是那年那夏，年齡23

4.mustache的思想
mustache的核心是標(biāo)簽和logic-less。從上面的代碼中可以看到定義模板時，使用了{(lán){name}}這樣的標(biāo)記，這就是mustache的標(biāo)簽，只不過它用{{}}替代了<>，以免跟html標(biāo)簽的<>混淆。logic-less，可以翻譯為輕邏輯，因?yàn)樵诙x模板的時候不會用到if-else，不會有循環(huán)式的編碼，一切都用標(biāo)簽來解決，它的標(biāo)簽非常簡單，但是能應(yīng)付所有場景，只要用以下幾個標(biāo)簽幾乎就能解決所有的問題：

{{prop}}

{{{prop}}}

{{#prop}}{{/prop}}

{{^prop}}{{/prop}}

{{!prop}}

{{> prop}}

5.mustache標(biāo)簽介紹
1）{{person}}變量
如上面例子中可以直接使用

嵌套使用

var obj={ "name": { "first": "xx,", "last": "yy," }, "age": "23" }

var view={{name.first}} {{name.last}} {{age}}

輸出：xx,yy,23

2）{{{prop}}} 帶有HTML的變量
在{{prop}}中的html會直接轉(zhuǎn)義，如果不想轉(zhuǎn)義則使用{{{name}}}或{{&name}}

如：var obj={name:"那年那夏",age:"23"}

var template="我是{{{name}}}，年齡{{age}}"

var view = Mustache.render(template,obj);

$("body").html(view);

結(jié)果：我是那年那夏，年齡23

3){{#prop}}{{/prop}} 循環(huán)
1.遍歷數(shù)組

數(shù)組循環(huán)的時候可以用.作為下標(biāo)

var obj={ "arr": ["1", "2", "3", "4"] };

var template="{{#arr}} {{.}} {{/arr}}"

輸出：1234

2.遍歷對象

var obj={ "str": [ { "name": "xx，" }, { "name": "yy，" }, { "name": "zz" } ] };

var template="{{#str}} {{name}} {{/str}}"

輸出xx,yy,zz

3,False和空的list

在以上代碼塊中，如果str這個key存在，并且有一個值是false或者一個空的列表，包含在塊之間的元素不會做任何顯示的.同樣如果str是一個列表，如果它為空，標(biāo)簽內(nèi)部的內(nèi)容也是不會被顯示出來的.

如：var obj={ “str”: false } ;

var view="xxx{{#str}yyy{{/str}}}"

輸出xxx

4){{^prop}} {{/prop}}當(dāng) prop值為 null, undefined, false 時才渲染輸出該區(qū)塊內(nèi)容。
如：var obj={ “str”: false } ;

var view="xxx{{^str}yyy{{/str}}}"

輸出xxxyyy

5)判斷使用{{#prop}}{{/prop}}{{^prop}} {{/prop}}
if else

{{#prop}} ... {{/prop}}

{{^prop}} ... {{/prop}}

布爾判斷

當(dāng)對象沒有值時你可能不希望展示{{#prop}} ... {{/prop}}

數(shù)組的布爾判斷

當(dāng)一個數(shù)組沒有任何值的時候，可能會希望不做任何的顯示，所以需要這個判斷{{#prop}} ... {{/prop}}

Lambdas

當(dāng)Key的值是一個可以被調(diào)用的對象，譬如是一個函數(shù)或者一個lambda，該對象將會被調(diào)用并且傳遞標(biāo)簽包含的文本進(jìn)去

var obj={ "name": "Willy",

"prop": function(){

                 return function(text){      return "" + text + ""    }

           }

}

var view={{#prop}} {{name}} is xxx. {{/prop}}

輸出

我們看到prop是一個可以被調(diào)用的函數(shù)他當(dāng)標(biāo)簽使用的時候會被再次調(diào)用，并且包在其中的其他標(biāo)簽也會被轉(zhuǎn)義執(zhí)行，這個特性，可以用來做很多很多的事情.

6.{> prop}}Partials的使用
Partials 標(biāo)簽開始是以一個大于號開始,像這樣{{> box}}.

Partials在運(yùn)行期被渲染 (相對于編譯期渲染而言),因此可以使用它來做一些遞歸，可以避免無限的循環(huán).

例：

var tpl = "

{{namme}}

    {{>msg}}
"

var partials = {msg: "{{#msg}}

  • {{sex}}
  • {{age}}
  • {{hobit}}
    • {{/msg}

    var html = Mustache.render(tpl, data, partials);

    //輸出：

    xiaohua

    • female
      • 


    • 22
      • 


    • reading
      •

    7){{!prop}} 注釋（沒啥用

    Today {{! ignore me }}

    輸出

    Today

    8)核心方法
    Mustache.parse(template);//預(yù)解析（可選步驟）

    Mustache.render(template, obj);

    模板既然有好處，也有壞處。就是編譯模板需要時間，所以在我們已知會使用某個模板的前提下，我們可以預(yù)先編譯好這個模板，以便后面的使用。

    參考說明：https://www.cnblogs.com/yaozh...

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

    轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/109959.html

    相關(guān)文章

    • Vue2.5筆記：Vue中的模版

      摘要：模版語法中的模版是基于的模版語法，所有的模版都是合法的，所以能被遵循規(guī)范的瀏覽器和解析器解析。表達(dá)式模版中不僅僅可以進(jìn)行簡單的數(shù)據(jù)綁定操作，我們還可以在模版中進(jìn)行簡單的表達(dá)式。我們也簡單的敘述了模版編譯的整個流程。 我們在上一篇說到如何把 Vue 實(shí)例中的數(shù)據(jù)顯示到視圖中，就會需要用到我們的模版，我們只是簡單的使用了一些，模版其實(shí)還有很多其他的特性。今天我們就來看看模版的其他特性。 模...

      shevy 評論0 收藏0

    • vue入門筆記體系（五）vue指令

      摘要：指令指令帶有前綴，以表示它們是提供的特殊特性。添加事件偵聽器時使用模式。只當(dāng)事件是從偵聽器綁定的元素本身觸發(fā)時才觸發(fā)回調(diào)。差別在哪里將特性名轉(zhuǎn)換為從開始支持語法糖，會擴(kuò)展成一個更新父組件綁定值的偵聽器。 vue指令 指令帶有前綴 v-，以表示它們是 Vue 提供的特殊特性。 v-text {{msg}} v-html //渲染HTML文本，更新元素的 innerHTML 。注意：內(nèi)...

      myshell 評論0 收藏0

    • [譯] 用 Webpack 武裝自己

      摘要：現(xiàn)在來做一個的入口讓我們在文件里進(jìn)行的配置。如果想要顯示它們，我們可以在運(yùn)行的時候使用你還可以使用，在改變代碼的時候自動進(jìn)行打包。新建文件，里面是一段，告訴使用進(jìn)行預(yù)處理。 本文譯自：Webpack your bags這篇文章由入門到深入的介紹了webpack的功能和使用技巧，真心值得一看。 由于我英語水平有限，而且很少翻譯文章，所以文中的一些語句在翻譯時做了類似語義的轉(zhuǎn)換，望諒解。...

      Tychio 評論0 收藏0

    • Vue學(xué)習(xí)筆記（一）

      摘要：一介紹也稱為，讀音類似，錯誤讀音，由華人尤雨溪開源并維護(hù)。隱藏四事件之前說了一些關(guān)于事件的指令，這里詳細(xì)學(xué)習(xí)一下事件的相關(guān)知識。還有一些其他鍵盤事件，具體參考官方文檔。模板就是，用來進(jìn)行數(shù)據(jù)綁定，顯示在頁面中，也稱為語法。 一、Vue.js介紹 Vue.js也稱為Vue，讀音類似view，錯誤讀音v-u-e，由華人尤雨溪開源并維護(hù)。 Vue有以下特點(diǎn)： 是一個構(gòu)建用戶界面的框架 是一...

      baoxl 評論0 收藏0

    發(fā)表評論

    0條評論

    閱讀需要支付1元查看
    <