资讯专栏INFORMATION COLUMN

Underscore源码解析(四)

高胜山 / 2340人阅读

摘要:本文同步自我得博客我在这个系列的第一篇文章说过,我学是为了在学的时候少一些阻碍,从第一篇的写作时间到今天,大概也有个十几二十天,感觉拖得有点久,所以今天将会是源码解析系列的最后一篇文章,我会在这篇文章中介绍剩下的所有函数。

本文同步自我得博客:http://www.joeray61.com

我在这个系列的第一篇文章说过,我学underscore是为了在学backbone的时候少一些阻碍,从第一篇的写作时间到今天,大概也有个十几二十天,感觉拖得有点久,所以今天将会是underscore源码解析系列的最后一篇文章,我会在这篇文章中介绍underscore剩下的所有函数。
先附上前三篇文章的地址:Underscore源码解析(一)、Underscore源码解析(二)、Underscore源码解析(三)

_.zip

</>复制代码

  1. _.zip = function() {
  2. // 将参数转换为数组, 此时args是一个二维数组
  3. var args = slice.call(arguments);
  4. // 计算每一个数组的长度, 并返回其中最大长度值
  5. var length = _.max(_.pluck(args, "length"));
  6. // 依照最大长度值创建一个新的空数组, 该数组用于存储处理结果
  7. var results = new Array(length);
  8. // 循环最大长度, 在每次循环将调用pluck方法获取每个数组中相同位置的数据(依次从0到最后位置)
  9. // 将获取到的数据存储在一个新的数组, 放入results并返回
  10. for(var i = 0; i < length; i++)
  11. results[i] = _.pluck(args, "" + i);
  12. // 返回的结果是一个二维数组
  13. return results;
  14. };

这个函数将每个数组的相同位置的数据作为一个新的二维数组返回, 返回的数组长度以传入参数中最大的数组长度为准, 其它数组的空白位置使用undefined填充。zip函数应该包含多个参数, 且每个参数应该均为数组。

_.indexOf

</>复制代码

  1. _.indexOf = function(array, item, isSorted) {
  2. if(array == null)
  3. return -1;
  4. var i, l;
  5. // 若数组已经经过排序,则调用sortedIndex方法,获取元素插入数组中所处位置的索引号
  6. if(isSorted) {
  7. i = _.sortedIndex(array, item);
  8. return array[i] === item ? i : -1;
  9. }
  10. // 优先调用宿主环境提供的indexOf方法
  11. if(nativeIndexOf && array.indexOf === nativeIndexOf)
  12. return array.indexOf(item);
  13. // 循环并返回元素首次出现的位置
  14. for( i = 0, l = array.length; i < l; i++)
  15. if( i in array && array[i] === item)
  16. return i;
  17. // 没有找到元素, 返回-1
  18. return -1;
  19. };

这个函数的作用是搜索一个元素在数组中首次出现的位置, 如果元素不存在则返回 -1,搜索时使用 === 对元素进行匹配

_.lastIndexOf

</>复制代码

  1. _.lastIndexOf = function(array, item) {
  2. if(array == null)
  3. return -1;
  4. // 优先调用宿主环境提供的lastIndexOf方法
  5. if(nativeLastIndexOf && array.lastIndexOf === nativeLastIndexOf)
  6. return array.lastIndexOf(item);
  7. var i = array.length;
  8. // 循环并返回元素最后出现的位置
  9. while(i--)
  10. if( i in array && array[i] === item)
  11. return i;
  12. // 没有找到元素, 返回-1
  13. return -1;
  14. };

这个函数返回一个元素在数组中最后一次出现的位置, 如果元素不存在则返回 -1,搜索时使用 === 对元素进行匹配

_.range

</>复制代码

  1. _.range = function(start, stop, step) {
  2. // 参数控制
  3. if(arguments.length <= 1) {
  4. // 如果没有参数, 则start = 0, stop = 0, 在循环中不会生成任何数据, 将返回一个空数组
  5. // 如果有1个参数, 则参数指定给stop, start = 0
  6. stop = start || 0;
  7. start = 0;
  8. }
  9. // 生成整数的步长值, 默认为1
  10. step = arguments[2] || 1;
  11. // 根据区间和步长计算将生成的最大值
  12. var len = Math.max(Math.ceil((stop - start) / step), 0);
  13. var idx = 0;
  14. var range = new Array(len);
  15. // 生成整数列表, 并存储到range数组
  16. while(idx < len) {
  17. range[idx++] = start;
  18. start += step;
  19. }
  20. // 返回列表结果
  21. return range;
  22. };

这个函数根据区间和步长, 生成一系列整数, 并作为数组返回,start参数表示最小数,stop参数表示最大数,step参数表示步长

_.bind

</>复制代码

  1. _.bind = function bind(func, context) {
  2. var bound, args;
  3. // 优先调用宿主环境提供的bind方法
  4. if(func.bind === nativeBind && nativeBind)
  5. return nativeBind.apply(func, slice.call(arguments, 1));
  6. // func参数必须是一个函数(Function)类型
  7. if(!_.isFunction(func))
  8. throw new TypeError;
  9. // args变量存储了bind方法第三个开始的参数列表, 每次调用时都将传递给func函数
  10. args = slice.call(arguments, 2);
  11. return bound = function() {
  12. if(!(this instanceof bound))
  13. return func.apply(context, args.concat(slice.call(arguments)));
  14. ctor.prototype = func.prototype;
  15. var self = new ctor;
  16. var result = func.apply(self, args.concat(slice.call(arguments)));
  17. if(Object(result) === result)
  18. return result;
  19. return self;
  20. };
  21. };

这个函数为一个函数绑定执行上下文, 任何情况下调用该函数, 函数中的this均指向context对象,绑定函数时, 可以同时给函数传递调用形参

_.bindAll

</>复制代码

  1. _.bindAll = function(obj) {
  2. // 第二个参数开始表示需要绑定的函数名称
  3. var funcs = slice.call(arguments, 1);
  4. // 如果没有指定特定的函数名称, 则默认绑定对象本身所有类型为Function的属性
  5. if(funcs.length == 0)
  6. funcs = _.functions(obj);
  7. // 循环并将所有的函数上下本设置为obj对象本身
  8. // each方法本身不会遍历对象原型链中的方法, 但此处的funcs列表是通过_.functions方法获取的, 它已经包含了原型链中的方法
  9. each(funcs, function(f) {
  10. obj[f] = _.bind(obj[f], obj);
  11. });
  12. return obj;
  13. };

这个函数将指定的函数, 或对象本身的所有函数上下本绑定到对象本身, 被绑定的函数在被调用时, 上下文对象始终指向对象本身

_.memoize

</>复制代码

  1. _.memoize = function(func, hasher) {
  2. // 用于存储缓存结果的memo对象
  3. var memo = {};
  4. // hasher参数应该是一个function, 它用于返回一个key, 该key作为读取缓存的标识
  5. // 如果没有指定key, 则默认使用函数的第一个参数作为key, 如果函数的第一个参数是复合数据类型, 可能会返回类似[Object object]的key, 这个key可能会造成后续计算的数据不正确
  6. hasher || ( hasher = _.identity);
  7. // 返回一个函数, 该函数首先通过检查缓存, 再对没有缓存过的数据进行调用
  8. return function() {
  9. var key = hasher.apply(this, arguments);
  10. return _.has(memo, key) ? memo[key] : (memo[key] = func.apply(this, arguments));
  11. };
  12. };

这个函数将返回一个函数, 该函数集成了缓存功能, 将经过计算的值缓存到局部变量并在下次调用时直接返回

_.delay

</>复制代码

  1. _.delay = function(func, wait) {
  2. var args = slice.call(arguments, 2);
  3. // 通过setTimeout来延时执行
  4. return setTimeout(function() {
  5. return func.apply(null, args);
  6. }, wait);
  7. };

这个函数的作用是延时执行一个函数,wait单位为ms, 第3个参数开始将被依次传递给执行函数

_.defer

</>复制代码

  1. _.defer = function(func) {
  2. // 相当于_.delay(func, 1, [arguments]);
  3. return _.delay.apply(_, [func, 1].concat(slice.call(arguments, 1)));
  4. };

这个函数的作用是延迟1ms执行函数,javascript是一个单线程的程序,setTimeout(func, time)作用是把func放到处理任务的队列末尾,在其他任务都完成之后的time ms 后执行func

_.throttle

</>复制代码

  1. _.throttle = function(func, wait) {
  2. var context, args, timeout, throttling, more, result;
  3. // whenDone变量调用了debounce方法, 因此在多次连续调用函数时, 最后一次调用会覆盖之前调用的定时器, 清除状态函数也仅会被执行一次
  4. // whenDone函数在最后一次函数执行的时间间隔截止时调用, 清除节流和调用过程中记录的一些状态
  5. var whenDone = _.debounce(function() {
  6. more = throttling = false;
  7. }, wait);
  8. // 返回一个函数, 并在函数内进行节流控制
  9. return function() {
  10. // 保存函数的执行上下文和参数
  11. context = this;
  12. args = arguments;
  13. // later函数在上一次函数调用时间间隔截止时执行
  14. var later = function() {
  15. // 清除timeout句柄, 方便下一次函数调用
  16. timeout = null;
  17. // more记录了在上一次调用至时间间隔截止之间, 是否重复调用了函数
  18. // 如果重复调用了函数, 在时间间隔截止时将自动再次调用函数
  19. if(more)
  20. func.apply(context, args);
  21. // 调用whenDone, 用于在时间间隔后清除节流状态
  22. whenDone();
  23. };
  24. // timeout记录了上一次函数执行的时间间隔句柄
  25. // timeout时间间隔截止时调用later函数, later中将清除timeout, 并检查是否需要再次调用函数
  26. if(!timeout)
  27. timeout = setTimeout(later, wait);
  28. // throttling变量记录上次调用的时间间隔是否已经结束, 即是否处于节流过程中
  29. // throttling在每次函数调用时设为true, 表示需要进行节流, 在时间间隔截止时设置为false(在whenDone函数中实现)
  30. if(throttling) {
  31. // 节流过程中进行了多次调用, 在more中记录一个状态, 表示在时间间隔截止时需要再次自动调用函数
  32. more = true;
  33. } else {
  34. // 没有处于节流过程, 可能是第一次调用函数, 或已经超过上一次调用的间隔, 可以直接调用函数
  35. result = func.apply(context, args);
  36. }
  37. // 调用whenDone, 用于在时间间隔后清除节流状态
  38. whenDone();
  39. // throttling变量记录函数调用时的节流状态
  40. throttling = true;
  41. // 返回调用结果
  42. return result;
  43. };
  44. };

这是函数节流方法, throttle方法主要用于控制函数的执行频率, 在被控制的时间间隔内, 频繁调用函数不会被多次执行,在时间间隔内如果多次调用了函数, 时间隔截止时会自动调用一次, 不需要等到时间截止后再手动调用(自动调用时不会有返回值),throttle函数一般用于处理复杂和调用频繁的函数, 通过节流控制函数的调用频率, 节省处理资源

_.debounce

</>复制代码

  1. _.debounce = function(func, wait, immediate) {
  2. // timeout用于记录函数上一次调用的执行状态(定时器句柄)
  3. // 当timeout为null时, 表示上一次调用已经结束
  4. var timeout;
  5. // 返回一个函数, 并在函数内进行节流控制
  6. return function() {
  7. // 保持函数的上下文对象和参数
  8. var context = this, args = arguments;
  9. var later = function() {
  10. // 设置timeout为null
  11. // later函数会在允许的时间截止时被调用
  12. // 调用该函数时, 表明上一次函数执行时间已经超过了约定的时间间隔, 此时之后再进行调用都是被允许的
  13. timeout = null;
  14. if(!immediate)
  15. func.apply(context, args);
  16. };
  17. // 如果函数被设定为立即执行, 且上一次调用的时间间隔已经过去, 则立即调用函数
  18. if(immediate && !timeout)
  19. func.apply(context, args);
  20. // 创建一个定时器用于检查和设置函数的调用状态
  21. // 创建定时器之前先清空上一次setTimeout句柄, 无论上一次绑定的函数是否已经被执行
  22. // 如果本次函数在调用时, 上一次函数执行还没有开始(一般是immediate设置为false时), 则函数的执行时间会被推迟, 因此timeout句柄会被重新创建
  23. clearTimeout(timeout);
  24. // 在允许的时间截止时调用later函数
  25. timeout = setTimeout(later, wait);
  26. };
  27. };

debounce与throttle方法类似, 用于函数节流, 它们的不同之处在于:

</>复制代码

  1. -- throttle关注函数的执行频率, 在指定频率内函数只会被执行一次
  2. -- debounce函数更关注函数执行的间隔, 即函数两次的调用时间不能小于指定时间

如果两次函数的执行间隔小于wait, 定时器会被清除并重新创建, 这意味着连续频繁地调用函数, 函数一直不会被执行, 直到某一次调用与上一次调用的时间不小于wait毫秒

_.once

</>复制代码

  1. _.once = function(func) {
  2. // ran记录函数是否被执行过
  3. // memo记录函数最后一次执行的结果
  4. var ran = false, memo;
  5. return function() {
  6. // 如果函数已被执行过, 则直接返回第一次执行的结果
  7. if(ran)
  8. return memo;
  9. ran = true;
  10. return memo = func.apply(this, arguments);
  11. };
  12. };

这个函数创建一个只会被执行一次的函数, 如果该函数被重复调用, 将返回第一次执行的结果

_.wrap

</>复制代码

  1. _.wrap = function(func, wrapper) {
  2. return function() {
  3. // 将当前函数作为第一个参数, 传递给wrapper函数
  4. var args = [func].concat(slice.call(arguments, 0));
  5. // 返回wrapper函数的处理结果
  6. return wrapper.apply(this, args);
  7. };
  8. };

这个函数返回一个函数, 该函数会将当前函数作为参数传递给一个包裹函数,在包裹函数中可以通过第一个参数调用当前函数, 并返回结果

_.compose

</>复制代码

  1. _.compose = function() {
  2. // 获取函数列表, 所有参数需均为Function类型
  3. var funcs = arguments;
  4. // 返回一个供调用的函数句柄
  5. return function() {
  6. // 从后向前依次执行函数, 并将记录的返回值作为参数传递给前一个函数继续处理
  7. var args = arguments;
  8. for(var i = funcs.length - 1; i >= 0; i--) {
  9. args = [funcs[i].apply(this, args)];
  10. }
  11. // 返回最后一次调用函数的返回值
  12. return args[0];
  13. };
  14. };

这个函数将多个函数组合到一起, 按照参数传递的顺序, 后一个函数的返回值会被依次作为参数传递给前一个函数作为参数继续处理,_.compose(A, B, C)等同于 A(B(C()))

_.after

</>复制代码

  1. _.after = function(times, func) {
  2. // 如果没有指定或指定无效次数, 则func被直接调用
  3. if(times <= 0)
  4. return func();
  5. // 返回一个计数器函数
  6. return function() {
  7. // 每次调用计数器函数times减1, 调用times次之后执行func函数并返回func函数的返回值
  8. if(--times < 1) {
  9. return func.apply(this, arguments);
  10. }
  11. };
  12. };

after返回一个函数, 该函数作为调用计数器, 当该函数被调用times次(或超过times次)后, func函数将被执行

_.keys

</>复制代码

  1. _.keys = nativeKeys ||
  2. function(obj) {
  3. if(obj !== Object(obj))
  4. throw new TypeError("Invalid object");
  5. var keys = [];
  6. // 记录并返回对象的所有属性名
  7. for(var key in obj)
  8. if(_.has(obj, key))
  9. keys[keys.length] = key;
  10. return keys;
  11. };

这个函数用于获取一个对象的属性名列表(不包含原型链中的属性)

_.values

</>复制代码

  1. _.values = function(obj) {
  2. return _.map(obj, _.identity);
  3. };

这个函数返回一个对象中所有属性的值列表(不包含原型链中的属性)

_.functions / _.methods

</>复制代码

  1. _.functions = _.methods = function(obj) {
  2. var names = [];
  3. for(var key in obj) {
  4. if(_.isFunction(obj[key]))
  5. names.push(key);
  6. }
  7. return names.sort();
  8. };

这个函数获取一个对象中所有属性值为Function类型的key列表, 并按key名进行排序(包含原型链中的属性)

_.extend

</>复制代码

  1. _.extend = function(obj) {
  2. // each循环参数中的一个或多个对象
  3. each(slice.call(arguments, 1), function(source) {
  4. // 将对象中的全部属性复制或覆盖到obj对象
  5. for(var prop in source) {
  6. obj[prop] = source[prop];
  7. }
  8. });
  9. return obj;
  10. };

这个函数将一个或多个对象的属性(包含原型链中的属性), 复制到obj对象, 如果存在同名属性则覆盖

_.pick

</>复制代码

  1. _.pick = function(obj) {
  2. // 创建一个对象, 存放复制的指定属性
  3. var result = {};
  4. // 从第二个参数开始合并为一个存放属性名列表的数组
  5. each(_.flatten(slice.call(arguments, 1)), function(key) {
  6. // 循环属性名列表, 如果obj中存在该属性, 则将其复制到result对象
  7. if( key in obj)
  8. result[key] = obj[key];
  9. });
  10. // 返回复制结果
  11. return result;
  12. };

这个函数返回一个新对象, 并从obj中复制指定的属性到新对象中,第2个参数开始为指定的需要复制的属性名

_.defaults

</>复制代码

  1. _.defaults = function(obj) {
  2. // 从第二个参数开始可指定多个对象, 这些对象中的属性将被依次复制到obj对象中(如果obj对象中不存在该属性的话)
  3. each(slice.call(arguments, 1), function(source) {
  4. // 遍历每个对象中的所有属性
  5. for(var prop in source) {
  6. // 如果obj中不存在或属性值转换为Boolean类型后值为false, 则将属性复制到obj中
  7. if(obj[prop] == null)
  8. obj[prop] = source[prop];
  9. }
  10. });
  11. return obj;
  12. };

这个函数将obj中不存在或转换为Boolean类型后值为false的属性, 从参数中指定的一个或多个对象中复制到obj,一般用于给对象指定默认值

_.clone

</>复制代码

  1. _.clone = function(obj) {
  2. // 不支持非数组和对象类型的数据
  3. if(!_.isObject(obj))
  4. return obj;
  5. // 复制并返回数组或对象
  6. return _.isArray(obj) ? obj.slice() : _.extend({}, obj);
  7. };

这个函数创建一个obj的副本, 返回一个新的对象, 该对象包含obj中的所有属性和值的状态

_.tap

</>复制代码

  1. _.tap = function(obj, interceptor) {
  2. interceptor(obj);
  3. return obj;
  4. };

这个函数执行一个函数, 并将obj作为参数传递给该函数, 函数执行完毕后最终返回obj对象

eq

</>复制代码

  1. function eq(a, b, stack) {
  2. // 检查两个简单数据类型的值是否相等
  3. // 对于复合数据类型, 如果它们来自同一个引用, 则认为其相等
  4. // 如果被比较的值其中包含0, 则检查另一个值是否为-0, 因为 0 === -0 是成立的
  5. // 而 1 / 0 == 1 / -0 是不成立的(1 / 0值为Infinity, 1 / -0值为-Infinity, 而Infinity不等于-Infinity)
  6. if(a === b)
  7. return a !== 0 || 1 / a == 1 / b;
  8. // 将数据转换为布尔类型后如果值为false, 将判断两个值的数据类型是否相等(因为nullundefined, false, 0, 空字符串, 在非严格比较下值是相等的)
  9. if(a == null || b == null)
  10. return a === b;
  11. // 如果进行比较的数据是一个Underscore封装的对象(具有_chain属性的对象被认为是Underscore对象)
  12. // 则将对象解封后获取本身的数据(通过_wrapped访问), 然后再对本身的数据进行比较
  13. // 它们的关系类似与一个jQuery封装的DOM对象, 和浏览器本身创建的DOM对象
  14. if(a._chain)
  15. a = a._wrapped;
  16. if(b._chain)
  17. b = b._wrapped;
  18. // 如果对象提供了自定义的isEqual方法(此处的isEqual方法并非Undersocre对象的isEqual方法, 因为在上一步已经对Undersocre对象进行了解封)
  19. // 则使用对象自定义的isEqual方法与另一个对象进行比较
  20. if(a.isEqual && _.isFunction(a.isEqual))
  21. return a.isEqual(b);
  22. if(b.isEqual && _.isFunction(b.isEqual))
  23. return b.isEqual(a);
  24. // 对两个数据的数据类型进行验证
  25. // 获取对象a的数据类型(通过Object.prototype.toString方法)
  26. var className = toString.call(a);
  27. // 如果对象a的数据类型与对象b不匹配, 则认为两个数据值也不匹配
  28. if(className != toString.call(b))
  29. return false;
  30. // 执行到此处, 可以确保需要比较的两个数据均为复合数据类型, 且数据类型相等
  31. // 通过switch检查数据的数据类型, 针对不同数据类型进行不同的比较
  32. // (此处不包括对数组和对象类型, 因为它们可能包含更深层次的数据, 将在后面进行深层比较)
  33. switch (className) {
  34. case "[object String]":
  35. // 如果被比较的是字符串类型(其中a的是通过new String()创建的字符串)
  36. // 则将B转换为String对象后进行匹配(这里匹配并非进行严格的数据类型检查, 因为它们并非来自同一个对象的引用)
  37. // 在调用 == 进行比较时, 会自动调用对象的toString()方法, 返回两个简单数据类型的字符串
  38. return a == String(b);
  39. case "[object Number]":
  40. // 通过+a将a转成一个Number, 如果a被转换之前与转换之后不相等, 则认为a是一个NaN类型
  41. // 因为NaN与NaN是不相等的, 因此当a值为NaN时, 无法简单地使用a == b进行匹配, 而是用相同的方法检查b是否为NaN(即 b != +b)
  42. // 当a值是一个非NaN的数据时, 则检查a是否为0, 因为当b为-0时, 0 === -0是成立的(实际上它们在逻辑上属于两个不同的数据)
  43. return a != +a ? b != +b : (a == 0 ? 1 / a == 1 / b : a == +b);
  44. case "[object Date]":
  45. // 对日期类型没有使用returnbreak, 因此会继续执行到下一步(无论数据类型是否为Boolean类型, 因为下一步将对Boolean类型进行检查)
  46. case "[object Boolean]":
  47. // 将日期或布尔类型转换为数字
  48. // 日期类型将转换为数值类型的时间戳(无效的日期格式将被换转为NaN)
  49. // 布尔类型中, true被转换为1, false被转换为0
  50. // 比较两个日期或布尔类型被转换为数字后是否相等
  51. return +a == +b;
  52. case "[object RegExp]":
  53. // 正则表达式类型, 通过source访问表达式的字符串形式
  54. // 检查两个表达式的字符串形式是否相等
  55. // 检查两个表达式的全局属性是否相同(包括g, i, m)
  56. // 如果完全相等, 则认为两个数据相等
  57. return a.source == b.source && a.global == b.global && a.multiline == b.multiline && a.ignoreCase == b.ignoreCase;
  58. }
  59. // 当执行到此时, ab两个数据应该为类型相同的对象或数组类型
  60. if( typeof a != "object" || typeof b != "object")
  61. return false;
  62. // stack(堆)是在isEqual调用eq函数时内部传递的空数组, 在后面比较对象和数据的内部迭代中调用eq方法也会传递
  63. // length记录堆的长度
  64. var length = stack.length;
  65. while(length--) {
  66. // 如果堆中的某个对象与数据a匹配, 则认为相等
  67. if(stack[length] == a)
  68. return true;
  69. }
  70. // 将数据a添加到堆中
  71. stack.push(a);
  72. // 定义一些局部变量
  73. var size = 0, result = true;
  74. // 通过递归深层比较对象和数组
  75. if(className == "[object Array]") {
  76. // 被比较的数据为数组类型
  77. // size记录数组的长度
  78. // result比较两个数组的长度是否一致, 如果长度不一致, 则方法的最后将返回result(即false)
  79. size = a.length;
  80. result = size == b.length;
  81. // 如果两个数组的长度一致
  82. if(result) {
  83. // 调用eq方法对数组中的元素进行迭代比较(如果数组中包含二维数组或对象, eq方法会进行深层比较)
  84. while(size--) {
  85. // 在确保两个数组都存在当前索引的元素时, 调用eq方法深层比较(将堆数据传递给eq方法)
  86. // 将比较的结果存储到result变量, 如果result为false(即在比较中得到某个元素的数据不一致), 则停止迭代
  87. if(!( result = size in a == size in b && eq(a[size], b[size], stack)))
  88. break;
  89. }
  90. }
  91. } else {
  92. // 被比较的数据为对象类型
  93. // 如果两个对象不是同一个类的实例(通过constructor属性比较), 则认为两个对象不相等
  94. if("constructor" in a != "constructor" in b || a.constructor != b.constructor)
  95. return false;
  96. // 深层比较两个对象中的数据
  97. for(var key in a) {
  98. if(_.has(a, key)) {
  99. // size用于记录比较过的属性数量, 因为这里遍历的是a对象的属性, 并比较b对象中该属性的数据
  100. // 当b对象中的属性数量多余a对象时, 此处的逻辑成立, 但两个对象并不相等
  101. size++;
  102. // 迭代调用eq方法, 深层比较两个对象中的属性值
  103. // 将比较的结果记录到result变量, 当比较到不相等的数据时停止迭代
  104. if(!( result = _.has(b, key) && eq(a[key], b[key], stack)))
  105. break;
  106. }
  107. }
  108. // 深层比较完毕, 这里已经可以确保在对象a中的所有数据, 对象b中也存在相同的数据
  109. // 根据size(对象属性长度)检查对象b中的属性数量是否与对象a相等
  110. if(result) {
  111. // 遍历对象b中的所有属性
  112. for(key in b) {
  113. // 当size已经到0时(即对象a中的属性数量已经遍历完毕), 而对象b中还存在有属性, 则对象b中的属性多于对象a
  114. if(_.has(b, key) && !(size--))
  115. break;
  116. }
  117. // 当对象b中的属性多于对象a, 则认为两个对象不相等
  118. result = !size;
  119. }
  120. }
  121. // 函数执行完毕时, 从堆中移除第一个数据(在比较对象或数组时, 会迭代eq方法, 堆中可能存在多个数据)
  122. stack.pop();
  123. // 返回的result记录了最终的比较结果
  124. return result;
  125. }

eq函数只在isEqual方法中调用, 用于比较两个数据的值是否相等,与 === 不同在于, eq更关注数据的值,如果进行比较的是两个复合数据类型, 不仅仅比较是否来自同一个引用, 且会进行深层比较(对两个对象的结构和数据进行比较)

_.isEqual

</>复制代码

  1. _.isEqual = function(a, b) {
  2. return eq(a, b, []);
  3. };

不多说了,就是内部函数eq的外部方法

_.isEmpty

</>复制代码

  1. _.isEmpty = function(obj) {
  2. // obj被转换为Boolean类型后值为false
  3. if(obj == null)
  4. return true;
  5. // 检查对象或字符串长度是否为0
  6. if(_.isArray(obj) || _.isString(obj))
  7. return obj.length === 0;
  8. // 检查对象(使用for in循环时将首先循环对象本身的属性, 其次是原型链中的属性), 因此如果第一个属性是属于对象本身的, 那么该对象不是一个空对象
  9. for(var key in obj)
  10. if(_.has(obj, key))
  11. return false;
  12. // 所有数据类型均没有通过验证, 是一个空数据
  13. return true;
  14. };

这个函数用于检查数据是否为空值, 包含"", false, 0, null, undefined, NaN, 空数组(数组长度为0)和空对象(对象本身没有任何属性)

_.isElement

</>复制代码

  1. _.isElement = function(obj) {
  2. return !!(obj && obj.nodeType == 1);
  3. };

这个函数用于验证对象是否是一个DOM对象

_.isArray

</>复制代码

  1. _.isArray = nativeIsArray ||
  2. function(obj) {
  3. return toString.call(obj) == "[object Array]";
  4. };

这个函数用于验证一个变量是否是数组

_.isObject

</>复制代码

  1. _.isObject = function(obj) {
  2. return obj === Object(obj);
  3. };

这个函数用于验证对象是否是一个复合数据类型的对象(即非基本数据类型String, Boolean, Number, null, undefined)

_.isArguments

</>复制代码

  1. _.isArguments = function(obj) {
  2. return toString.call(obj) == "[object Arguments]";
  3. };
  4. // 验证isArguments函数, 如果运行环境无法正常验证arguments类型的数据, 则重新定义isArguments方法
  5. if(!_.isArguments(arguments)) {
  6. // 对于环境无法通过toString验证arguments类型的, 则通过调用arguments独有的callee方法来进行验证
  7. _.isArguments = function(obj) {
  8. // callee是arguments的一个属性, 指向对arguments所属函数自身的引用
  9. return !!(obj && _.has(obj, "callee"));
  10. };
  11. }

这个函数用于检查一个数据是否是一个arguments参数对象

_.isFunction / _.isString / _.isNumber / _.isDate / _.isRegExp

这几个我就放在一起说了,他们都是通过Object.prototype.toString.call(obj)的值来进行判断的

_.isFinite

</>复制代码

  1. _.isFinite = function(obj) {
  2. return _.isNumber(obj) && isFinite(obj);
  3. };

这个函数用于检查一个数字是否为有效数字且有效范围(Number类型, 值在负无穷大 - 正无穷大之间)

_.isNaN

</>复制代码

  1. _.isNaN = function(obj) {
  2. return obj !== obj;
  3. };

在js里,所有数据中只有NaN与NaN不相等

_.isBoolean

</>复制代码

  1. _.isBoolean = function(obj) {
  2. // 支持字面量和对象形式的Boolean数据
  3. return obj === true || obj === false || toString.call(obj) == "[object Boolean]";
  4. };

这个函数用于检查数据是否是Boolean类型

_.isNull

</>复制代码

  1. _.isNull = function(obj) {
  2. return obj === null;
  3. };

这个函数用于检查数据是否是Null值

_.isUndefined

</>复制代码

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

这个函数用于检查数据是否是Undefined值

_.has

</>复制代码

  1. _.has = function(obj, key) {
  2. return hasOwnProperty.call(obj, key);
  3. };

这个函数检查一个属性是否属于对象本身, 而非原型链中

_.noConflict

</>复制代码

  1. _.noConflict = function() {
  2. // previousUnderscore变量记录了Underscore定义前_(下划线)的值
  3. root._ = previousUnderscore;
  4. return this;
  5. };

这个函数一般用于避免命名冲突或规范命名方式,放弃_(下划线)命名的Underscore对象, 并返回Underscore对象

_.identity

</>复制代码

  1. _.identity = function(value) {
  2. return value;
  3. };

这个函数返回与参数相同的值, 一般用于将一个数据的获取方式转换为函数获取方式(内部用于构建方法时作为默认处理器函数)

_.times

</>复制代码

  1. _.times = function(n, iterator, context) {
  2. for(var i = 0; i < n; i++)
  3. iterator.call(context, i);
  4. };

这个函数的作用是使指定的函数迭代执行n次(无参数)

_.escape

</>复制代码

  1. _.escape = function(string) {
  2. return ("" + string).replace(/&/g, "&").replace(//g, ">").replace(/"/g, """).replace(/"/g, "'").replace(///g, "/");
  3. };

这个函数用于将HTML字符串中的特殊字符转换为HTML实体, 包含 & < > " "

_.result

</>复制代码

  1. _.result = function(object, property) {
  2. if(object == null)
  3. return null;
  4. // 获取对象的值
  5. var value = object[property];
  6. // 如果值是一个函数, 则执行并返回, 否则将直接返回
  7. return _.isFunction(value) ? value.call(object) : value;
  8. };

这个函数指定一个对象的属性, 返回该属性对应的值, 如果该属性对应的是一个函数, 则会执行该函数并返回结果

_.mixin

</>复制代码

  1. _.mixin = function(obj) {
  2. // obj是一个集合一系列自定义方法的对象, 此处通过each遍历对象的方法
  3. each(_.functions(obj), function(name) {
  4. // 通过addToWrapper函数将自定义方法添加到Underscore构建的对象中, 用于支持对象式调用
  5. // 同时将方法添加到 _ 本身, 用于支持函数式调用
  6. addToWrapper(name, _[name] = obj[name]);
  7. });
  8. };

这个函数添加一系列自定义方法到Underscore对象中, 用于扩展Underscore插件

_.template

</>复制代码

  1. _.template = function(text, data, settings) {
  2. // 模板配置, 如果没有指定配置项, 则使用templateSettings中指定的配置项
  3. settings = _.defaults(settings || {}, _.templateSettings);
  4. // 开始将模板解析为可执行源码
  5. var source = "__p+="" + text.replace(escaper, function(match) {
  6. // 将特殊符号转移为字符串形式
  7. return "" + escapes[match];
  8. }).replace(settings.escape || noMatch, function(match, code) {
  9. // 解析escape形式标签 <%- %>, 将变量中包含的HTML通过_.escape函数转换为HTML实体
  10. return ""+
  11. _.escape(" + unescape(code) + ")+
  12. "";
  13. }).replace(settings.interpolate || noMatch, function(match, code) {
  14. // 解析interpolate形式标签 <%= %>, 将模板内容作为一个变量与其它字符串连接起来, 则会作为一个变量输出
  15. return ""+
  16. (" + unescape(code) + ")+
  17. "";
  18. }).replace(settings.evaluate || noMatch, function(match, code) {
  19. // 解析evaluate形式标签 <% %>, evaluate标签中存储了需要执行的JavaScript代码, 这里结束当前的字符串拼接, 并在新的一行作为JavaScript语法执行, 并将后面的内容再次作为字符串的开始, 因此evaluate标签内的JavaScript代码就能被正常执行
  20. return "";
  21. " + unescape(code) + "
  22. ;__p+="";
  23. }) + "";
  24. ";
  25. if(!settings.variable)
  26. source = "with(obj||{}){
  27. " + source + "}
  28. ";
  29. source = "var __p="";" + "var print=function(){__p+=Array.prototype.join.call(arguments, "")};
  30. " + source + "return __p;
  31. ";
  32. // 创建一个函数, 将源码作为函数执行体, 将obj和Underscore作为参数传递给该函数
  33. var render = new Function(settings.variable || "obj", "_", source);
  34. // 如果指定了模板的填充数据, 则替换模板内容, 并返回替换后的结果
  35. if(data)
  36. return render(data, _);
  37. // 如果没有指定填充数据, 则返回一个函数, 该函数用于将接收到的数据替换到模板
  38. // 如果在程序中会多次填充相同模板, 那么在第一次调用时建议不指定填充数据, 在获得处理函数的引用后, 再直接调用会提高运行效率
  39. var template = function(data) {
  40. return render.call(this, data, _);
  41. };
  42. // 将创建的源码字符串添加到函数对象中, 一般用于调试和测试
  43. template.source = "function(" + (settings.variable || "obj") + "){
  44. " + source + "}";
  45. // 没有指定填充数据的情况下, 返回处理函数句柄
  46. return template;
  47. };

这个我要介绍的最后一个函数,也是我个人认为比较重要的,它是Underscore模板解析方法, 用于将数据填充到一个模板字符串中,在模板体内, 可通过argments获取2个参数, 分别为填充数据(名称为obj)和Underscore对象(名称为_)

小结

今天一口气把剩下的所有函数都介绍完了,真是累感不爱啊,不过在写作这几篇博客的过程中,我也从Underscore这个框架中学到了很多东西,包括它的优雅的代码风格(至少比我自己写的优雅),还有一个优秀的库整个的架构是怎么搭建起来的。
以后我还会继续为大家分享其他的前端知识和学习心得,thx for reading, hope u enjoy

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/87556.html

相关文章

  • Underscore源码解析(一)

    摘要:本文同步自我得博客最近准备折腾一下,在事先了解了之后,我知道了对这个库有着强依赖,正好之前也没使用过,于是我就想先把彻底了解一下,这样之后折腾的时候也少一点阻碍。 本文同步自我得博客:http://www.joeray61.com 最近准备折腾一下backbone.js,在事先了解了backbone之后,我知道了backbone对underscore这个库有着强依赖,正好undersc...

    neu 评论0 收藏0
  • Underscore源码解析(二)

    摘要:本文同步自我得博客最近十几天都在忙毕业论文的事,所以上一次为大家介绍完这个框架的结构或者说是这个框架的设计思路之后就一直没动静了,今天我又满血复活了,让我们继续来探索的源码奥秘吧。 本文同步自我得博客:http://www.joeray61.com 最近十几天都在忙毕业论文的事,所以上一次为大家介绍完underscore这个框架的结构(或者说是这个框架的设计思路)之后就一直没动静了,今...

    骞讳护 评论0 收藏0
  • JS基础篇-underscore源码解析

    摘要:总想找个机会夯实一下自己的基础,正好最近略有清闲,看视频读书撸代码我选择了第三者怎么感觉有点别扭,看视频的话效率不高适合入门,看书的话一本你不知道的推荐给大家,选择继续看书的话还是算了吧,毕竟读万卷书不如行万里路是吧。 总想找个机会夯实一下自己的JS基础,正好最近略有清闲,看视频?读书?撸代码?我选择了第三者(怎么感觉有点别扭),看视频的话效率不高适合入门,看书的话,一本《你不知道的J...

    anyway 评论0 收藏0
  • underscore源码学习(一)

    摘要:所以,刚开始,我从源码比较短的包含注释只有行开始学习起。一般,在客户端浏览器环境中,即为,暴露在全局中。学习以后判断直接使用看起来也优雅一点滑稽脸。在的函数视线中,的作用执行一个传入函数次,并返回由每次执行结果组成的数组。 前言 最近在社区浏览文章的时候,看到了一位大四学长在寻求前端工作中的面经,看完不得不佩服,掌握知识点真是全面,无论是前端后台还是其他,都有涉猎。 在他写的文章中,有...

    gclove 评论0 收藏0
  • Underscore源码中文注释(转)

    摘要:创建一个全局对象在浏览器中表示为对象在中表示对象保存下划线变量被覆盖之前的值如果出现命名冲突或考虑到规范可通过方法恢复被占用之前的值并返回对象以便重新命名创建一个空的对象常量便于内部共享使用将内置对象的原型链缓存在局部变量方便快速调用将 // Underscore.js 1.3.3 // (c) 2009-2012 Jeremy Ashkenas, DocumentCloud Inc....

    Guakin_Huang 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<