首页电商视觉设计技术文章正文

UI培训之前端js框架的源码研究

更新时间:2016年03月26日09时52分来源:传智播客UI培训学院浏览次数:

1.1 underscore.js源码

Underscore.js 没有对原生 JavaScript 对象进行扩展,而是通过调用 _() 方法进行封装，一旦封装完成，原生 JavaScript 对象便成为一个 Underscore 对象。

1.1.1 判断给定变量是否是对象

// Is a given variable an object?

_.isObject = function(obj) {

var type = typeof obj;

return type === 'function' || type === 'object' && !!obj;

};

这是underscore.js的判断给定变量是否是object的一段源码。我们知道typeof会返回如下六个值：

1. 'undefined' --- 这个值未定义；2. 'boolean' --- 这个值是布尔值；3. 'string' --- 这个值是字符串；4. 'number' --- 这个值是数值；5. 'object' --- 这个值是对象或null；6. 'function' --- 这个值是函数。

而&&的优先级要高与||。!!的作用相当于Boolean()，将其转换为布尔值。

1.1.2 判断给定值是否是DOM元素

// Is a given value a DOM element?

_.isElement = function(obj) {

return !!(obj && obj.nodeType === 1);

};

同样!!相当于Boolean()的作用，nodeType === 1则说明是元素节点，属性attr是2 ，文本text是3

<body>

var t = document.getElementById('test');

alert(t.nodeType);//1

alert(t.nodeName);//p

alert(t.nodeValue);//null</script></body>

firstChild属性

var t = document.getElementById('test').firstChild;

alert(t.nodeType);//3

alert(t.nodeName);//#test

alert(t.nodeValue);//测试

文本节点也算是一个节点，所以p的子节点是文本节点，所以返回3

1.2 zepto源码

1.2.1 判断是否是数组

isArray = Array.isArray ||

function(object){ return object instanceof Array }

Array.isArray() 方法：如果一个对象是数组就返回true，如果不是则返回false。

instanceof 用于判断一个变量是否某个对象的实例，如

var a= [];

alert(a instanceof Array);//返回 true

同时 alert(a instanceof Object) 也会返回 true

isArray 返回布尔值，如果Array.isArray为true，则返回true，否则返回object instanceof Array的结果。

1.2.2 数据类型判断

class2type = {},

function type(obj) {

return obj == null ? String(obj) :

class2type[toString.call(obj)] || "object"

}

function isFunction(value) { return type(value) == "function" }

function isWindow(obj) { return obj != null && obj == obj.window }

function isDocument(obj) { return obj != null && obj.nodeType == obj.DOCUMENT_NODE }

function isObject(obj) { return type(obj) == "object" }

class2type是一个空对象，实际上一个什么都没有的空对象是这样创建的Object.create(null);

我们可以通过Object.prototype.toString.call()方法来判断数据类型，例如：

console.log(Object.prototype.toString.call(123)) //[object Number] console.log(Object.prototype.toString.call('123')) //[object String] console.log(Object.prototype.toString.call(undefined)) //[object Undefined] console.log(Object.prototype.toString.call(true)) //[object Boolean] console.log(Object.prototype.toString.call({})) //[object Object] console.log(Object.prototype.toString.call([])) //[object Array] console.log(Object.prototype.toString.call(function(){})) //[object Function]

首先如果参数obj是undefined或null，则通过String(obj)转换为对应的原始字符串“undefined”或“null”。

然后class2type[toString.call(obj)]首先借用Object的原型方法toString()来获取obj的字符串表示，返回值的形式是 [object class]，其中的class是内部对象类。

然后从对象class2type中取出[object class]对应的小写字符串并返回；如果未取到则一律返回“object。

1.2.3 get方法

get: function(idx){

return idx === undefined ? slice.call(this) : this[idx >= 0 ? idx : idx + this.length]

取集合中对应指定索引的值，如果idx小于0,则idx等于idx+length,length为集合的长度.

可能你刚看到slice.call(this)会觉得很纳闷，其实不仅是zepto.js的源码，包括jQuery，backbone的源码都是这么写的，只不过它们在最开头做了声明：

var push = array.push;var slice = array.slice;var splice = array.splice;

所以slice.call(this)其实还是Array.slce.call(this)

本文版权归传智播客UI培训学院所有，欢迎转载，转载请注明作者出处。谢谢！
作者：传智播客UI培训学院
首发：