Underscore.js 分析

Underscore.js的源码和适合第一次看源码的人,因为文件比较小,而且没有依赖,读起来比较轻松。代码写的还很是很简练的。

我看的是1.7的源码,下面说说我觉得比较有意思的几个地方

1.

_.isUndefined = function(obj) {
    return obj === void 0;
};

代码里好几个地方都用到了void 0,而不是undefined判断一个object是不是undefined。据说这样是因为有些浏览器允许改变undefined的值。比如undefined = 1

2.

以前用jQuery的时候就用到过noConflict,一直在好奇是怎么实现的。原来Underscore.js里的实现这么简单

var root = this;

var previousUnderscore = root._;

_.noConflict = function() {
    root._ = previousUnderscore;
    return this;
};

3.

Underscore.js支持两种方式调用,一种是直接用_.func(params)调用,还有以类似oop的方式调用

_.each([‘a‘, ‘b‘, ‘c‘], function(element, index){
    console.log(element);
});

_([‘a‘, ‘b‘, ‘c‘]).each(function(element, index){
    console.log(element);
});

这是怎么做到的呢?

首先,定义了_下面的函数,比如

  _.each = _.forEach = function(obj, iteratee, context) {
    if (obj == null) return obj;
    iteratee = createCallback(iteratee, context);
    var i, length = obj.length;
    if (length === +length) {
      for (i = 0; i < length; i++) {
        iteratee(obj[i], i, obj);
      }
    } else {
      var keys = _.keys(obj);
      for (i = 0, length = keys.length; i < length; i++) {
        iteratee(obj[keys[i]], keys[i], obj);
      }
    }
    return obj;
  };

如果把javascript中的对象看作类,这样的定义就类似定义了类 ‘_’的static成员函数,直接通过 _.func就可以调用。但是 类‘_‘的实例 new _(),是不能调用的。

只是oop主要靠下面的两个函数

 var _ = function(obj) {
    if (obj instanceof _) return obj;
    if (!(this instanceof _)) return new _(obj);
    this._wrapped = obj;
  };

  // Add your own custom functions to the Underscore object.
  _.mixin = function(obj) {
    _.each(_.functions(obj), function(name) {
      var func = _[name] = obj[name];
      _.prototype[name] = function() {
        var args = [this._wrapped];
        push.apply(args, arguments);
        return result.call(this, func.apply(_, args));
      };
    });
  };

  // Add all of the Underscore functions to the wrapper object.
  _.mixin(_);

先看第一个函数,当调用_([‘a‘, ‘b‘, ‘c‘])的时候,第一个函数会执行。它做的事情就是把一个obj变成了‘_‘的一个实例(new _()),并且把obj存到该实例的_wrapped中。

该函数的实现也很有意思。当调用_[‘a‘, ‘b‘, ‘c‘]的时候,第一次执行到第二句,this是全局的window, 因此if(!(this instanceof _)) 成立,所以执行new _(obj),这时候第二次进入该函数,此时的this已经是新的_ instance实例,因此直接执行到了第三行,即把this_wrapped赋值为obj。

TBC...

时间: 2024-10-07 06:26:01

Underscore.js 分析的相关文章

underscore.js 分析 第三天

// Create a safe reference to the Underscore object for use below. // 为Underscore对象创建一个安全的引用 // _为一个函数对象,它的实例服从单例模式. var _ = function(obj) { if (obj instanceof _) return obj; if (!(this instanceof _)) return new _(obj); this._wrapped = obj; }; 来一个最简单

underscore.js 分析 第四天

查看underscore包含多少属性和方法 通过阅读JavaScript 获取对象的键的数组 var a = _; var arr = Object.keys(a); console.log(arr); 在underscore1.9中包含了135个属性和方法.

underscore.js 分析6 map函数

作用:通过转换函数(iteratee迭代器)映射列表中的每个值产生价值的新数组.iteratee传递三个参数:value,然后是迭代 index. _.map([1, 2, 3], function(num){ return num * 3; }); => [3, 6, 9] _.map({one: 1, two: 2, three: 3}, function(num, key){ return num * 3; }); => [3, 6, 9] _.map([[1, 2], [3, 4]],

HiShop2.x版本中的上传插件分析,得出所用的模板语言为Underscore.js 1.6.0且自己已修改

效果: 上传组件非常的酷,但是分析其使用JS写法使用了模板语言的,代码如下: <script type="text/j-template" id="tpl_popbox_ImgPicker_listItem"> <# _.each(dataset,function(url){ #> <li> <span class="img-list-overlay"><i class="img-l

underscore.js依赖库函数分析二(查找)

查找: 在underscore.js封装了对dom查找的操作,find()和filter()函数,find()函数的查找操作是返回首个与条件相符的元素值,filter()函数是找到与条件相符的所有元素,则返回的就是一个数组,如果没有找到符合条件,则返回一个空的数组.接下来一个个分析: find()函数: 该函数根据iterator迭代器中的自定义函数条件,在集合列表中查找符合条件的第一个元素,如果找到,则返回第一个元素,否则返回“undefined”. 实例: /** * Created by

underscore.js依赖库函数分析一

Underscore简介: underscore是一个非常简洁,实用的javascript库,和jQuery封装类型差不多,但underscore是backbone的依赖 库,想运行backbone就必须先引入underscore.js.“_”开头是依赖库underscore的一个特征,用于区分其他库函数名.“.” 以后就是函数的名称. Underscore函数: underscore中封装了60多个函数,供开发者使用,接下来一个个分析. 1.each()和map函数 underscore中ea

underscore.js 源码分析5 基础函数和each函数的使用

isArrayLike 检测是数组对象还是纯数组 var property = function(key) { return function(obj) { return obj == null ? void 0 : obj[key]; }; }; var getLength = property('length'); var isArrayLike = function(collection) { var length = getLength(collection); return typeo

Underscore.js 1.3.3 源码分析收藏

Underscore是一个提供许多函数编程功能的库,里面包含了你期待(在Prototype.js和Ruby中)的许多功能.但是没有扩展任何内置的Javascript对象,也就是说它没有扩展任何内置对象的原型.它被定位为jQuery和Backbone.js的基础层 源码注释转之网上他人之备注,特收藏以后方便阅读. // Underscore.js 1.3.3 // (c) 2009-2012 Jeremy Ashkenas, DocumentCloud Inc. // Underscore is

underscore.js源码解析

一直想针对一个框架的源码好好的学习一下编程思想和技巧,提高一下自己的水平,但是看过一些框架的源码,都感觉看的莫名其妙,看不太懂,最后找到这个underscore.js由于这个比较简短,一千多行,而且读起来容易一些,所以就决定是它了,那废话不多说开始我们的源码学习. underscore.js源码GitHub地址: https://github.com/jashkenas/underscore/blob/master/underscore.js 本文解析的underscore.js版本是1.8.3