Underscore整体概述

1. 作用域

与其他第三方库一样,Underscore也通过立即执行函数来包裹自己的业务逻辑。

目的:

  • 避免全局污染:所有库中的逻辑,库所定义和使用的变量全部被封装到了该函数的作用域中。
  • 隐私保护:但凡在立即执行函数中声明的函数、变量等,除非是自己想暴露,否则绝无可能在外部获得。
(function(root){
  var _ = function(){
    
  }
  root._ = _
})(this)

2. _ 对象

underscore有下划线的意思,所以underscore通过一个下划线变量 _ 来标识自身。

注: _ 是一个函数对象,之后所有的api都会被挂载到这个对象上,例如_.map()

(funtion(root){
  var _ = function(obj){
   
  }
  _.map = function(){
    //balalala
  }
  // ......
  root._ = _
})(this)

3. _()

虽然Underscore推崇函数式编程,但也支持面向对象风格的函数调用,仅需要通过_()来包裹对象即可。
当我们进行如下调用时:_([1,2,3])会创建一个新的underscore对象实例(从而能够调用underscore提供的方法),并在this._wrapped中存储传入的数据。

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

当使用面向对象的方式调用时,例如传入[1,2,3],函数首先会判断是不是_的实例,如果是直接返回这个实例对象,如果不是则创建一个实例对象new _(obj),然后将参数[1,2,3]赋值给_wrapped,以备后用。

4. mixin

  • mixin(混入)模式是增加代码复用度的一个广泛的设计模式。
  • _.mixin(obj):为underscore对象混入obj具有的功能
  • mixin主要实现了 _ 的原型对象的方法调用

源码如下:

_.mixin = function(obj) {
    _.each(_.functions(obj), function(name) {
        var func = obj[name];

        _.prototype[name] = function() {
            var args = [this._wrapped];
            push.apply(args, arguments);
            return result(this, func.apply( _ , args));
        }
    });
}
_.mixin(_)

最后一句是执行这个mixin函数,执行完后会将 _ 上挂载的方法都挂载到原型对象prototype上,以方便面向对象时的调用

5. 链式调用 _.chain()

  • _.chain(obj):为underscore对象的方法增加链式调用能力
  • _.chain源码如下:
_.chain = function(obj){
  var instance = _(obj)
  instance._chain = true
  return instance
}

比较简单,就是拿到这个实例对象,赋了一个属性 _chain为true,再返回这个实例对象

  • underscore还提供了一个帮助函数result,该函数将会判断方法调用结果,如果该方法的调用者被标识了需要链化,则链化当前的方法执行结果。
  • 源码如下:
var chainResult = function(instance , obj){
  return instance._chain ? _(obj).chain() : obj ;  
}

============这是分割线============


接下来我们就看看,当调用_.unique([1,2,3,1])的时候怎么执行的
先附上源码:

(function(root){
  var _ = function(){}
  
  _.unique = function(arr,callback){
    var ret = [];
    var target, i = 0;
    for (; i < arr.length; i++) {
        var target = callback ? callback(arr[i]) : arr[i];
        if (ret.indexOf(target) === -1) {
            ret.push(target);
        }
    }
    return ret;
  }

  root._ = _
})(this)

代码就不解释了,比较简单,就是在 _ 对象上新建一个unique方法直接调用就行。

如果使用面向对象的调用方式呢?就需要这样写了 _([1,2,3,1]).chain().unique()
先附上源码:

(function(root){
  var push = Array.prototype.push;
  //面向对象调用时返回_的实例,然后将参数存储在_wrapped中
  var _ = function(obj) {
    if (obj instanceof _) {
        return obj;
    }
    if (!(this instanceof _)) {
        return new _(obj);
    }
    this._wrapped = obj;
  }
  //给_定义一个去重的函数
  _.unique = function(arr, callback) {
    var ret = [];
    var target, i = 0;
    for (; i < arr.length; i++) {
        var target = callback ? callback(arr[i]) : arr[i];
        if (ret.indexOf(target) === -1) {
            ret.push(target);
        }
    }
    return ret;
  }
   //定义一个遍历函数
  _.each = function(target, callback) {
    console.log(target)
    var key, i = 0;
    if (_.isArray(target)) {
        var length = target.length;
        for (; i < length; i++) {
            callback.call(target, target[i], i);
        }
    } else {
        for (key in target) {
            callback.call(target, key, target[key]);
        }
    }
  }
  //开启链接式的调用
  _.chain = function(obj) {
    var instance = _(obj);
    instance._chain = true;
    return instance;
  }

  //辅助函数    obj   数据结果
  var result = function(instance, obj) {
    //_(obj).chain() 会对传入的obj创建一个新的实例对象,返回出去
    return instance._chain ? _(obj).chain() : obj;
  }
  //获取_上所有绑定的函数
  _.functions = function(obj) {
    var result = [];
    var key;
    for (key in obj) {
        result.push(key);
    }
    return result;
  }
  //类型检测
  _.isArray = function(array) {
    return toString.call(array) === "[object Array]";
  }
  //将函数加载到
  _.mixin = function(obj) {
    _.each(_.functions(obj), function(name) {
        var func = obj[name];

        _.prototype[name] = function() {
            var args = [this._wrapped];
            push.apply(args, arguments);
            return result(this, func.apply(this, args));
        }
    });
}

root._ = _
})(this)

以上基本就是underscore的源码框架了。

  1. 先解释_.mixin(_)
  • 函数一开始就会调用这个函数,传入的参数就是我们自定义的参数,例如[1,2,3],然后调用each方法,each方法传入两个参数,第一个参数_.functions(obj),就是获取绑定在 _ 上面的所有函数,返回的是一个数组。
  • 继续往里走,第二个参数回去调用数组中各个函数名,拿到这个函数。
  • 继续,之后会给 _ 的prototype绑定函数,
    var args = [this._wrapped]就是获取我们传进来的参数[1,2,3,1]
    push.apply(args,arguments)如果后面调用方法时,还有参数,则合并push进args里。(如果不了解apply的可以看看我之前写的call apply bind的理解这篇文章)
  • 最后调用result这个函数,第一个参数this就是当前的实例对象,第二个参数就是调用unique的方法。
  • 最后返回的结果,是调用chain后的实例对象
  1. _([1,2,3,1]).chain().unique()
  • 首先_([1,2,3,1])会生成一个实例对象,instance
  • 调用chain方法,给instance创建一个属性chain并且设置为true,表示可以链式调用
  • 调用unique方法,此处的unique方法不是 _ 的方法,而是_.prototype的方法,也就是mixin中的函数。
  • 最后返回result的结果,也就是执行unique方法后的实例对象。
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 214,922评论 6 497
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,591评论 3 389
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 160,546评论 0 350
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,467评论 1 288
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,553评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,580评论 1 293
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,588评论 3 414
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,334评论 0 270
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,780评论 1 307
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,092评论 2 330
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,270评论 1 344
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,925评论 5 338
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,573评论 3 322
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,194评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,437评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,154评论 2 366
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,127评论 2 352

推荐阅读更多精彩内容

  • Swift1> Swift和OC的区别1.1> Swift没有地址/指针的概念1.2> 泛型1.3> 类型严谨 对...
    cosWriter阅读 11,094评论 1 32
  • Lua 5.1 参考手册 by Roberto Ierusalimschy, Luiz Henrique de F...
    苏黎九歌阅读 13,781评论 0 38
  • UnderScore对象封装 Underscore像jQuery一样,将数据封装在一个自定义对象中——Unders...
    小淘气_嘻阅读 1,110评论 0 0
  • 几乎在车上度过的一天。 姐姐现在这么成熟? 像...中年妇女,孩子上小学了的那种。
    延小狼阅读 205评论 1 1
  • 关于中秋节的来历,有很多古老的传说,其中“嫦娥奔月”流传最广。传说,嫦娥的丈夫后羿是一位为民除害的英雄,两人...
    运安阁阁主阅读 375评论 0 0