underscorejs

Underscore是一个JavaScript实用库，提供了一整套函数式编程的实用功能，但是没有扩展任何JavaScript内置对象。它是这个问题的答案：“如果我在一个空白的HTML页面前坐下，并希望立即开始工作，我需要什么？“...它弥补了部分jQuery没有实现的功能,同时又是Backbone.js必不可少的部分。

Underscore提供了100多个函数,包括常用的: map, filter, invoke — 当然还有更多专业的辅助函数,如:函数绑定, JavaScript模板功能,创建快速索引, 强类型相等测试, 等等.

template_.template(templateString, [settings])
将 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>

另外自己做了一个常用的demo:

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8" />

    <title>UnderscoreDemo</title>

    <link href="style.css" rel="stylesheet" type="text/css" />

    <script src="jquery.js"></script>

    <script src="../underscore.min.js"></script>

</head>

<body>

</body>

</html>

    <script id="historyTpl" type="text/template">

        <%_.each(response, function(item) {%>

            <div class="historyItem">

                <div class="historyDate"><%=item.date%></div>

                    <%_.each(item.list, function(user) {%>

                       <div class="userItem">

                        <img src="<%=user.icon%>"/><!---->

                        <p><%=user.nick%></p>

                        <p><%=user.prize%>天VIP会员</p>

                      </div>

                    <%});%>

            </div>

        <%});%>

    </script>

<script>

    var response=[{"date":"Today","list":[{"uid":333222,"nick":"kitty","icon":"333.png","prize":30}]},{"date":"Yesterday","list":[{"uid":100077,"nick":"hello","icon":"333.png","prize":30}]},{"date":"2015-05-12","list":[{"uid":100077,"nick":"zealer9999","icon":"333.png","prize":30},{"uid":100034,"nick":"100034","icon":"333.png","prize":30}]}];

    $("body").html( _.template($("#historyTpl").html(), response));

</script>

underscorejs的更多相关文章

使用requireJS，backboneJS，和underscoreJS完成自定义模板封装
使用requireJS,backboneJS,和underscoreJS完成自定义模板封装原来的代码当我们进行一个列表的数据填充的时候,是这样做的: //获取美食列表 function getFo ...
不学就吃亏的underscorejs类库学习示例 ——（集合篇）
underscorejs是一个很不错的类库,我的很多项目都引用了这个类库,的确可以带来很多方便. 记得我当初学的时候,看underscorejs的api是看的一知半解的,甚至不明白api里的conte ...
underscorejs 源码走读笔记
Underscore 简介 Underscore 是一个JavaScript实用库,提供了类似Prototype.js的一些功能,但是没有继承任何JavaScript内置对象.它弥补了部分jQuery ...
underscoreJS的Collections 的API
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
BackboneJS and UnderscoreJS
介绍来自API(backbone能做什么?) 当我们开发含有大量Javascript的web应用程序时,首先你需要做的事情之一便是停止向DOM对象附加数据. 通过复杂多变的jQuery选择符和回调 ...
Underscore.js
概述 Underscore.js是一个很精干的库,压缩后只有4KB.它提供了几十种函数式编程的方法,弥补了标准库的不足,大大方便了JavaScript的编程.MVC框架Backbone.js就将这个库 ...
【原】移动web资源整理
2013年初接触移动端,简单做下总结,首先了解下移动web带来的问题设备更新换代快——低端机遗留下问题.高端机带来新挑战浏览器厂商不统一——兼容问题多网络更复杂——弱网络,页面打开慢低端机性能 ...
我们是怎么管理QQ群的
文章背景:腾讯平台上的qq群数以千万百万计,但99%的在吹水扯蛋,从早上的问好开始,到晚上的晚安,无一不浪费青春之时间,看之痛心,无力改变,只好自己建了一个,希望能以此来改变群内交流的氛围或环境. 以 ...
移动web资源整理
[原]移动web资源整理 2013年初接触移动端,简单做下总结,首先了解下移动web带来的问题设备更新换代快--低端机遗留下问题.高端机带来新挑战浏览器厂商不统一--兼容问题多网络更复杂--弱网 ...

随机推荐

Windows 10简体中文最新预览版Build 9926
Windows 10 消费者预览版全新特性: • 全新的开始菜单Win 10的开始菜单产生了较大改变,磁贴界面在原有磁贴概念的基础上进行了大幅度的调整,新的磁贴界面开始支持纵向滚动,并可以利用开始按钮 ...
Android SQLiteOpenHelper(二)
上一篇我们已经了解了SQLiteOpenHelper 和构造函数. 现在我们就来掌握一下:onCreate( ) onUpgrade( ) onDowngrade( ) public void ...
Python的平凡之路（2）
一.标准库(sys & os): Python 的标准库(standard library) 是随着 Python 一起安装在你的电脑中的,是 Python 的一部分 (当然也有特殊情况. ...
no package 'webkit-1.0' found
linux安装程序的时候 ./configure 提示 no package 'webkit-1.0' found 解决方法: 安装 libwebkitgrk-dev包 1. sudo apt-get ...
OD调试篇8
那么今天需要破解的呢,是这样一款软件. 程序刚刚进去会发现一个nag弹窗说没有注册,要花20美金才能注册.只有5天的限制期限可以用了进去之后点击help里的关于这款软件也显示了这是一个 ...
easyUI笔记09.03
layout的布局可以自适应 <body class="easyui-layout"> <div data-options="region:'north ...
Nginx-uri、request_uri、document_uri之间的区别
在nginx中有几个关于uri的变量,包括$uri.$request_uri.$document_uri,下面看一下他们的区别 :$request_uri: /stat.php?id=1585378& ...
Squid代理服务器的安装与配置
一.简介代理服务器英文全称是Proxy Server,其功能就是代理网络用户去取得网络信息. Squid是一个缓存Internet 数据的软件,其接收用户的下载申请,并自动处理所下载的数据.当一个用 ...
Java 学习总结（一）
1. 概述 1.1 dos命令行--常见的命令 l dir : 列出当前目录下的文件以及文件夹 l md : 创建目录 l rd : 删除目录 l cd : 进入指 ...
使用 Windows AIK 创建自定的客户端系统WIM文件
Windows 7/2008 的AIK 3.0下载页面:地址链接 1.8G [3.1补充包为1.4G] 安装3.0后,升级为3.1方法: xcopy E:\ "C:\Program File ...

underscorejs

underscorejs的更多相关文章

随机推荐

热门专题