教育行业A股IPO第一股(股票代码 003032)

全国咨询/投诉热线:400-618-4000

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>
    <p id="test">测试</p><script>
    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培训学院
首发:http://www.itcast.cn/ui 
0 分享到:
和我们在线交谈!