Underscore.js

Underscore.js

Underscore一个JavaScript实用库，提供了一整套函数式编程的实用功能，但是没有扩展任何JavaScript内置对象。

它弥补了部分jQuery没有实现的功能,同时又是Backbone.js必不可少的部分。

Underscore还可以被使用在Node.js运行环境

API地址：http://www.css88.com/doc/underscore/

下载： git clone https://github.com/jashkenas/underscore

分类知识点

Collections

Collections是集合，指那些由单个元素组成，能够使用下标操作的数据类型的统称，比如Array，Object，String等，从underscore的源码来看，这一类函数只用到最基本的[]运算符和for循环，以及对由此构成的新方法的组合运用。这一类方法有：each、map、reduce、find等。

Arrays

相对Collections的鸟枪而言，Arrays有了小钢炮，能够使用Array内置的方法，比如slice。underscore的Arrays方法不仅适用于Array类型，也适用于String和Array-like类型的对象。这一类方法有：union、intersection、difference、indexOf等。

简单介绍一下Array-like，顾名思义，就是像Array而不是Array的一种数据类型，它的特点是能够通过数字下标（0、1、2 ...）访问，有length属性，但是不能使用Array的内置方法。这类里面比较常见的是arguments，就是函数的参数列表，Object.getOwnPropertyNames(arguments)的返回值除了参数列表外，还有length和callee两个属性。那么对这种类型如果要想用Array的内置方法怎么办呢？可以通过数组泛化来调用，有两种方式：

 Array. method (obj, function(){});
Array.prototype. method .call(obj, function(){}); 

 

在underscore里面主要用了call的方式。既然提到了call，就再对call进行一下解释。

在javascript中call和apply常用于实现继承机制，二者很类似，只有第二个参数略有差异。调用 call() 方法时，调用者是需要执行的函数对象，第一个参数就是要执行函数中的 this变量，后面的参数都会作为参数传递给要执行函数。例如：

var me = {
    name: "Alex",
    City: "Beijing",
};
function sayHello(comments) {console.log("Hi, " + this.name + comments)};
sayHello.call(me, ", you are great!");

执行后会打印出“Hi, Alex, you are great!”。

再比如

a.func().call(b) 

就相当于b继承了a, 结果就是b调用了a的func()方法。

在Collections部分的源码中经常要对Array或Array-like类型与Object类型分开来处理，用到了一个技巧

if (obj.length === +obj.length) {}

对于前者而言，返回为true，而Object没有length属性，obj.length返回的是undefined，"+"是将其他类型转化为数字或者NaN，等同于Number(obj.length)，+undefined的结果是NaN，因此整个表达式返回false。这里有一个知识点是null, false, undefined, NaN的关系。

Functions

underscore中Functions部分提供了一些与Function相关的函数，在javascript里，函数本身也是一种变量类型，函数名只是指向函数对象的引用值，跟其他变量有一样的行为。

函数本身也有length属性，代表函数能够接受的参数个数；相对而言，arguments.length表示的是实际传入的参数个数，二者数量可以不同。如果实参比形参要少，没有的参数被赋值为undefined。

Functions部分的函数有些使用了闭包(closure)，用于保存状态或者作为缓存，比如once、after和memoize等。闭包是javascript的一大特色，原理是根据链式作用域(chain scope)的原则，上级变量对下级可见。如果在对象或者函数内部再定义函数，而内部的函数使用了上级的变量，当将这个函数被作为返回值时，返回的函数就成为闭包，而上级的变量因为仍旧被使用因此会一直保存在内存中。

这一类的函数包括：bind、memorize、debounce、throttle等。

Objects

Objects部分最复杂的一个函数是内部用的equal，可能也是整个underscore最复杂的一个，这里最重要的知识点就是javascript的判等，注意引用类型不能直接使用“==”或“===”，需要使用迭代函数转化成原始类型进行比较。underscore的isEqual函数与javascript的完全等同(===)或相等(==)不太一样，更符合人的直觉。根据源码简单总结一下规则，有顺序，前面的规则没有匹配才匹配后面的：

1. 如果两个变量完全等同，且不为0，则返回true。如果是0的话，要保证符号一样(0和-0认为不相等)
2. 如果两个变量都是null或都是undefined，返回true
3. 如果两个变量的类型不一样，返回false，类型使用Object.prototype.toString.call()来获得
4. 对于String类型，原始类型和包装类型，只要值一样，认为相等

   “a” isEqual new String("a")

5. 两个变量都是NaN返回true，判断是否是NaN依据Object.prototype.toString.call()为[object Number]，且a!=+a；其他Number类型依据egal原则判断
6. 对于Date和Boolean类型转化为原始的数字类型进行比较
7. RegExp类型要比较source、global、multiline和ignoreCase几个属性
8. 函数变量认为不相等(引用指向同一个函数的情况已经在第一条规则排除了)
9. 对于数组和普通对象类型，基于上面的规则递归判断，所有子对象都相等才返回true

Objects部分的函数包括：keys、values、has、isEqual以及一对isType判断类型的函数。

Utility

Utility部分根据比较有用的是生成随机数和生成ID，还包括增加自定义函数的mixin，转义html的escape，以及一个简单的html模板函数。

OO方式

除了使用函数风格的underscore外，还可以使用面向对象的方式，在这种方式下，underscore支持链式调用。

重要方法介绍：

1 Underscore对象封装

//定义一个内置对象
var data={
name:'ccy'
}
//通过_()方法将对象创建为一个Underscore对象
//underData对象的原型中包含了Underscore重定义的所有方法ta，可以任意使用
var underData=_(data);
//通过value()方法获得原生数据，即data
underData.value();

2链式操作

Underscore支持链式操作，但你需要先调用chain()方法进行声明：

    var arr = [10, 20, 30];  
    _(arr)  
        .chain()  
        .map(function(item){ return item++; })  
        .first()  
        .value();

 

如果调用了chain()方法，Underscore会将所调用的方法封装在一个闭包内，并将返回值封装为一个Underscore对象并返回：

  // 这是Underscore中实现链式操作的关键函数，它将返回值封装为一个新的Underscore对象，并再次调用chain()方法，为方法链中的下一个函数提供支持。  
    var result = function(obj, chain) {  
        return chain ? _(obj).chain() : obj;  
    }

3扩展自定义方法

我们可以通过mixin()方法轻松地向Underscore中扩展自定义方法

这些方法被追加到Underscore的原型对象中，所有创建的Underscore对象都可以使用这些方法，它们享有和其它方法同样的环境。

 _.mixin({  
        method1: function(object) {  
            // todo  
        },  
        method2: function(arr) {  
            // todo  
        },  
        method3: function(fn) {  
            // todo  
        }  
    });

4遍历集合

each()和map()方法是最常用用到的两个方法，它们用于迭代一个集合（数组或对象），并依次处理集合中的每一个元素，

map()方法与each()方法的作用、参数相同，但它会将每次迭代函数返回的结果记录到一个新的数组并返回。

    var arr = [1, 2, 3];
     
    _(arr).map(function(item, i) {
    arr[i] = item + 1;
    });
     
    var obj = {
    first : 1,
    second : 2
    }
     
    _(obj).each(function(value, key) {
    return obj[key] = value + 1;
    });

5函数节流

函数节流是指控制一个函数的执行频率或间隔（就像控制水流的闸门一样），Underscore提供了debounce()和throttle()两个方法用于函数节流。

• debounce()方法关注函数执行的间隔，即函数两次的调用时间不能小于指定时间。
• throttle()方法更关注函数的执行频率，即在指定频率内函数只会被调用一次。

需求:当用户在文本框输入搜索条件时，自动查询匹配的关键字并提示给用户

    <input type="text" id="search" name="search" />  
    <script type="text/javascript">  
        var query = _(function() {  
            // 在这里进行查询操作  
        }).debounce(200);  
     
        $('#search').bind('keypress', query);  
    </script>

需求:当用户拖动浏览器滚动条时，调用服务器接口检查是否有新的内容

    <script type="text/javascript">  
        var query = _(function() {  
            // 在这里进行查询操作  
        }).throttle(500);  
     
        $(window).bind('scroll', query);  
    </script>

6模板解析

Underscore提供了一个轻量级的模板解析函数，它可以帮助我们有效地组织页面结构和逻辑。

    <!-- 用于显示渲染后的标签 -->
    <ul id="element"></ul>
     
    <!-- 定义模板，将模板内容放到一个script标签中 -->
    <script type="text/template" id="tpl">
    <% for(var i = 0; i < list.length; i++) { %>
    <% var item = list[i] %>
    <li>
    <span><%=item.firstName%> <%=item.lastName%></span>
    <span><%-item.city%></span>
    </li>
    <% } %>
    </script>
    <script type="text/javascript" src="underscore/underscore-min.js"></script>
    <script type="text/javascript">
    // 获取渲染元素和模板内容
    var element = $('#element'),
    tpl = $('#tpl').html();
     
    // 创建数据, 这些数据可能是你从服务器获取的
    var data = {
    list: [
    {firstName: '<a href="#">Zhang</a>', lastName: 'San', city: 'Shanghai'},
    {firstName: 'Li', lastName: 'Si', city: '<a href="#">Beijing</a>'},
    {firstName: 'Wang', lastName: 'Wu', city: 'Guangzhou'},
    {firstName: 'Zhao', lastName: 'Liu', city: 'Shenzhen'}
    ]
    }
     
    // 解析模板, 返回解析后的内容
    var html = _.template(tpl, data);
    // 将解析后的内容填充到渲染元素
    element.html(html);
    </script>

在本例中，我们将模板内容放到一个<script>标签中，你可能已经注意到标签的type是text/template而不是text/javascript，因为它无法作为JavaScript脚本直接运行。

我也建议你将模板内容放在<script>中，因为如果你将它们写在一个<div>或其它标签中，它们可能会被添加到DOM树中进行解析（即使你隐藏了这个标签也无法避免）。

在本例中，我们将模板内容和需要填充的数据传递给template方法，它会按以下顺序进行处理：

• 将模板内容解析为可执行的JavaScript（解析模板标签）
• 通过with语句将解析后的JavaScript作用域修改为我们传递的数据对象，这使我们能够直接在模板中通过变量形式访问数据对象的属性
• 执行解析后的JavaScript（将数据填充到模板）
• 返回执行后的结果

我们经常会遇到一种情况：多次调用template方法将数据渲染到同一个模板。

假设我们有一个分页列表，列表中的每一条数据都通过模板渲染，当用户进入下一页，我们会获取下一页的数据并重新渲染，实际上每次渲染的模板都是同一个，但刚才描述的template所有处理过程总会被执行。

其实Underscore的template方法提供了一种更高效的调用方式，我们将上面代码中的最后两句修改为：

    // 解析模板, 返回解析后的内容
    var render = _.template(tpl);
    var html = render(data);
    // 将解析后的内容填充到渲染元素
    element.html(html);

你会发现细微的差别：我们在调用template方法时只传递了模板内容，而没有传递数据，此时template方法会解析模板内容，生成解析后的可执行JavaScript代码，并返回一个函数，而函数体就是解析后的JavaScript，因此当我们调用该函数渲染数据时，就省去了模板解析的动作。

你应该将返回的函数存储起来（就像我将它存储在render变量中一样），再通过调用该函数来渲染数据，特别是在同一个模板可能会被多次渲染的情况下，这样做能提高执行效率

_.template模板函数只能解析3种模板标签：

<%  %>：用于包含JavaScript代码，这些代码将在渲染数据时被执行。

<%= %>：用于输出数据，可以是一个变量、某个对象的属性、或函数调用（将输出函数的返回值）。

<%- %>：用于输出数据，同时会将数据中包含的HTML字符转换为实体形式（例如它会将双引号转换为&quot;形式），用于避免XSS攻击。

当我们希望将数据中的HTML作为文本显示出来时，常常会使用<%- %>标签。

Underscore还允许你修改这3种标签的形式，如果我们想使用{% %}、{%= %}、{%- %}作为标签，可以通过修改templateSettings来实现，就像这样：

    _.templateSettings = {
    evaluate : /\{%([\s\S]+?)\%\}/g,
    interpolate : /\{%=([\s\S]+?)\%\}/g,
    escape : /\{%-([\s\S]+?)%\}/g
    }