简介
underscore.js
作为一个优秀的JavaScript工具库,提供了很多使用的功能,同时考虑了浏览器的兼容性,并且代码加上注释只有2K行,很利于阅读和学习。
使用版本:
_.VERSION = '1.8.3';
1 基础
1.1 立即执行函数
(function() {
...
}());
underscore.js
的文件整体用一个立即执行函数包裹,防止其内部和其他代码之间的相互污染。
1.2 获取全局命名空间
1.3 使用变量保存常用函数
var push = ArrayProto.push,
slice = ArrayProto.slice,
toString = ObjProto.toString,
hasOwnProperty = ObjProto.hasOwnProperty;
因为在进行压缩代码的时候,push
,slice
等可以被替换为a
,b
等,而ArrayProto.push
无法压缩。
1.4 兼容Object.create
var Ctor = function() {}
var baseCreate = function(prototype) {
if (!_.isObject(prototype)) return {};
if (nativeCreate) return nativeCreate(prototype);
Ctor.prototype = prototype;
var result = new Ctor;
Ctor.prototype = null;
return result;
};
如果当前环境不存在Object.create()
,则用baseCreate
代替。
因为Object.create(obj)
是创建一个空的对象,使它的__porto__
指向obj,所以要用一个暂时的类Ctor
来实现。
1.5 回调函数封装
2 函数处理相关
2.1 debounce
_.debounce(function, wait, [immediate])
在function
最后一次调用后,再等待wait
时间后,再执行最后一次函数。
如果immediate
为true
,会在调用_.debounce(function, wait, [immediate])
时,立即执行一次,并且wait
时间内不会再执行。
原理:
每次调用函数时,先clearTimeout(timeout)
,清除wait时间内上次的函数调用
再执行timeout(func,wait)
。
如果immediate
为true,会马上执行一次,并且用一个空的func
占位,timeout(func,wait)
函数,保证wait
时间内不会执行第二次。
3. 判断变量类型相关
3.1 isArray
如果存在es5
以上支持的Array.isArray
则用Array.isArray
,否则通过调用Object.prototype.toString.call(array)
来实现
var isArray = Array.isArray || function (obj) {
return Object.prototype.toString.call(array) === '[object Array]'
}
3.2 isFunction
最好用的方法是type of obj == 'function' || false
,注意IE8因为有bug,
type of obj == 'function'
obj为object的时候,也会判断为true
,所以用这种方式修复了bug。
var nodelist = root.document && root.document.childNodes;
if (typeof /./ != 'function' && typeof Int8Array != 'object' && typeof nodelist != 'function') {
_.isFunction = function (obj) {
return typeof obj == 'function' || false;
};
}
3.3 isObject
obj为函数/对象的时候,都是object,此外因为type of null = 'object',所以去除了为
null`的情况。
_.isObject = function (obj) {
var type = typeof obj
return type === 'function' || type === 'object' && !!object
}