underscore学习笔记—实用功能/Utility

写在前面:

1.5.2版本,计10个函数

1、noConflict(转换_控制变量)

_.noConflict()

放弃Underscore 的控制变量"_"。返回Underscore 对象的引用。

var underscore = _.noConflict();

2、identity(返回传入参数相等的值)

返回与传入参数相等的值. 相当于数学里的: f(x) = x
这个函数看似无用, 但是在Underscore里被用作默认的迭代器iterator.

var moe = {name: 'moe'};
moe === _.identity(moe);
=> true

3、times(调用n次迭代函数)

_.times(n, iterator, [context])

调用给定的迭代函数n次,每一次传递index参数,调用迭代函数。

_.times(3, alert);
=>0,1,2

或者链式语法:

_(3).times(function(n){ genie.grantWishNumber(n); });

4、random(随机整数)

_.random(min,max)

返回一个min 和 max之间的随机整数。如果你只传递一个参数,那么将返回0和这个参数之间的整数。

_.random(0, 100);
=> 42

5、mixin(扩展underscore)

_.mixin(object)

可以用自己的函数扩展underscore。传递一个 {name: function}定义的哈希添加到Underscore对象,以及面向对象封装。

_.mixin({
  capitalize: function(string) {
    return string.charAt(0).toUpperCase() + string.substring(1).toLowerCase();
  }
});
_("fabio").capitalize();
=> "Fabio"

6、uniqueId(生成唯一ID)

_.uniqueId([prefix])

为需要的客户端或DOM元素生成一个全局唯一的id。如果prefix存在,则作为id前缀

_.uniqueId('contact_');
=> 'contact_104'

7、escape(转义html字符串)

_.escape(string)

&<>"', and /字符

_.escape('Curly, Larry & Moe');
=> "Curly, Larry & Moe"

8、unescape(转义成html字符)

_.unescape(string)

替换&&lt;&gt;&quot;&#x27;, and&#x2F;字符。

_.unescape('Curly, Larry & Moe');
=> "Curly, Larry & Moe"

9、result(调用对象属性)

_.result(object, property)

如果对象 object 中的属性 property 是函数, 则调用它, 否则, 返回它。

var object = {cheese: 'crumpets', stuff: function(){ return 'nonsense'; }};
_.result(object, 'cheese');
=> "crumpets"
_.result(object, 'stuff');
=> "nonsense"

10、template(模板)

_.template(templateString, [data], [settings]) 

将 JavaScript 模板编译为可以用于页面呈现的函数, 对于通过JSON数据源生成复杂的HTML并呈现出来的操作非常有用

<%= … %>插入变量

<% … %>执行任意的 JavaScript 代码

<%- … %>插入一个值, 并让其进行HTML转义

data传值给模板,这样模板就会立即呈现而不是返回一个模板函数

settings 是一个哈希表包含任何可以覆盖的设置 _.templateSettings.

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

var list = "<% _.each(people, function(name) { %> <li><%= name %></li> <% }); %>";
_.template(list, {people: ['moe', 'curly', 'larry']});
=> "<li>moe</li><li>curly</li><li>larry</li>"

var template = _.template("<b><%- value %></b>");
template({value: '<script>'});
=> "<b><script></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 %>", {answer: 'no'}, {variable: 'data'});
=> "Using 'with': no"
预编译模板对调试不可重现的错误很有帮助. 这是因为预编译的模板可以提供错误的代码行号和堆栈跟踪, 有些模板在客户端(浏览器)上是不能通过编译的 在编译好的模板函数上, 有  source  属性可以提供简单的预编译功能.

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值