underscore模闆功能的使用和學習

最近好忙啊，各種項目急着上線。css調的頭暈腦脹，再也沒時間琢磨我那可愛的js小妖精了。

不過在百忙中還是要表達一下對underscore.js的感謝，小巧輕便的實作了我的需求。具體說一下情況，開會的時候約定接口，

我當時誇下海口跟背景大哥拍着胸脯說，你給我一段json，我還你一個前端（腸子已經悔青）

于是背景那位耿直的兄弟真的就去這麼做了，把所有的接口都是封裝成json格式的資料給到我。

開始幹活了，一開始我的處理方法是用ajax請求到資料後，拿出來放到自己的函數中使用js操作dom完成各種需求。越寫就會

發現越頭疼，慢慢的資料量多了，接口也多了。就在頭疼之時遇到了underscore，裡面提供了一個很好的模闆功能_.template

使用類似于jsp的寫法<%=item.film%>來替換json中對應的資料，不僅使得資料與頁面分離開來，還很好的提高了代碼的可維

護性。下面來仔細說說這個underscore：

将 JavaScript 模闆編譯為可以用于頁面呈現的函數, 對于通過JSON資料源生成複雜的HTML并呈現出來的操作非常有用。 模闆函數可以使用 <%= … %>插入變量, 也可以用<% … %>執行任意的 JavaScript 代碼。 如果您希望插入一個值, 并讓其進行HTML轉義,請使用<%- … %>。 當你要給模闆函數指派的時候，可以傳遞一個含有與模闆對應屬性的data對象 。 如果您要寫一個一次性的, 您可以傳對象 data 作為第二個參數給模闆 template 來直接呈現, 這樣頁面會立即呈現而不是傳回一個模闆函數. 參數 settings 是一個哈希表包含任何可以覆寫的設定 _.templateSettings.

var compiled = _.template("hello: <%= name %>");
compiled({name: 'moe'});
=> "hello: moe"

var template = _.template("<b><%- value %></b>");
template({value: '<script>'});
=> "<b>&lt;script&gt;</b>"      

您也可以在JavaScript代碼中使用 print. 有時候這會比使用 <%= ... %> 更友善.

var compiled = _.template("<% print('Hello ' + epithet); %>");
compiled({epithet: "stooge"});
=> "Hello stooge"      

如果ERB式的分隔符您不喜歡, 您可以改變Underscore的模闆設定, 使用别的符号來嵌入代碼.定義一個 interpolate 正規表達式來逐字比對嵌入代碼的語句, 如果想插入轉義後的HTML代碼則需要定義一個 escape 正規表達式來比對,還有一個 evaluate 正規表達式來比對您想要直接一次性執行程式而不需要任何傳回值的語句.您可以定義或省略這三個的任意一個.例如, 要執行Mustache.js類型的模闆:

_.templateSettings = {
  interpolate: /\{\{(.+?)\}\}/g
};

var template = _.template("Hello {{ name }}!");
template({name: "Mustache"});
=> "Hello Mustache!"      

預設的, template 通過 with 語句來取得 data 所有的值. 當然, 您也可以在 variable 設定裡指定一個變量名. 這樣能顯著提升模闆的渲染速度.

_.template("Using 'with': <%= data.answer %>", {variable: 'data'})({answer: 'no'});
=> "Using 'with': no"      

預編譯模闆對調試不可重制的錯誤很有幫助. 這是因為預編譯的模闆可以提供錯誤的代碼行号和堆棧跟蹤, 有些模闆在用戶端(浏覽器)上是不能通過編譯的 在編譯好的模闆函數上, 有 source 屬性可以提供簡單的預編譯功能.

<script>
  JST.project = <%= _.template(jstText).source %>;
</script>

官方api的所有說明，可以說很清晰很明朗，于是乎下面的代碼誕生了：      

<%_.each(datas, function(item) {%>
            <div class="outer">
                <div class="title">
                    <span ><%=item.film%></span>
                </div>
                <ul class="ul">
                    <%_.each(datas, function(item) {%>
                        <li>
                            <a href="<%=item.url%>" target="_blank" rel="external nofollow" >【<%=item.title%>】</a>
                        </li>
                    <%});%>
                </ul>                        
            </div>
        <%});%>      

資料json是：

var datas = [{
    name: "平安",
    price: "7183.81",
    url: "www.pingan.com"
}, {
    name: "平安",
    price: "7183.81",
    url: "www.pingan.com"
}, {
    name: "平安",
    price: "7183.81",
    url: "www.pingan.com"
}, {
    name: "平安",
    price: "7183.81",
    url: "www.pingan.com"
}];      

調用語句：

$(".containerF").html(_.template($("#t2").html(), datas));      

想放在哪個div下面就放在哪個div下面，隻需要改變類名.containerF

轉載于:https://www.cnblogs.com/clarencexu/p/4702555.html