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、一、2 ...）访问，有length属性，可是不能使用Array的内置方法。这类里面比较常见的是arguments，就是函数的参数列表，Object.getOwnPropertyNames(arguments)的返回值除了参数列表外，还有length和callee两个属性。那么对这种类型若是要想用Array的内置方法怎么办呢？能够经过数组泛化来调用，有两种方式：

1  Array. method (obj, function(){});
2 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对象封装

1 //定义一个内置对象
2 var data={
3 name:'ccy'
4 }
5 //经过_()方法将对象建立为一个Underscore对象
6 //underData对象的原型中包含了Underscore重定义的全部方法ta，能够任意使用
7 var underData=_(data);
8 //经过value()方法得到原生数据，即data
9 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()方法更关注函数的执行频率，即在指定频率内函数只会被调用一次。

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

1     <input type="text" id="search" name="search" />  
2     <script type="text/javascript">  
3         var query = _(function() {  
4             // 在这里进行查询操做  
5         }).debounce(200);  
6      
7         $('#search').bind('keypress', query);  
8     </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 }