jQuery源码解读:部分jQuery东西要领完成

jQuery作为前端最盛行的类库,没有之一,源码必须得读一读。本博将不按期更新源码解读内容,假如解读不正确的处所,还请同学们在批评中斧正。

本系列文章基于jquery-1.9.1.js。(编者注:虽然JQ已出到2.X,本文所述的要领是基础要领,没有版本之差,关于进修有所协助)

一、$.type() 推断js数据类型

用法:$.type(new Array()); //array

部分源码(截取症结部分,请疏忽源码语法):

//天生typelist的map
class2type = {}
jQuery.each("Boolean Number String Function Array Date RegExp Object Error".split(" "), function(i, name) {
    class2type[ "[object " + name + "]" ] = name.toLowerCase();
});

//每一个对象实例都有toString要领
core_toString = class2type.toString

//主要领
type: function( obj ) {
    if ( obj == null ) {
        return String( obj );
    }
    return typeof obj === "object" || typeof obj === "function" ?
        class2type[ core_toString.call(obj) ] || "object" :
        typeof obj;
}

解读:

1、class2type天生后的内容为

var class2type = {
    "[object Boolean]":"boolean",
    "[object Number]":"number",
    "[object String]":"string",
    "[object Function]":"function",
    "[object Array]":"array",
    "[object Date]":"date",
    "[object RegExp]":"regexp",
    "[object Object]":"object",
    "[object Error]":"error"
}

2、core_toString运用的是对象实例的toString

一切继随自Object的对象都有toString要领,为何一定要运用object.toString,由于array,function虽然有toString要领,但该要领举行了重写,array挪用toString打印的数组成员用逗号离隔的字符串。这里运用的是{}.toString.call(obj);转变toString的this指向为object实例。jquery为何运用的是class2type.toString.call,如许就能够少声明一个object。

var func = function(){};
var arr = [];
console.log({}.toString.call(func)); //[object Function]
console.log({}.toString.call(arr)); //[object Array]

如许就获得class2type的键名,以此推断数据类型。

二、$.each() 遍历一个数组或对象。

each()实在照样运用的for来举行轮回的,除了轻易外,因其做了一下简朴的封装,所以效力照样要比for差,关于大型轮回,只管运用for.

三、$.trim() 去除字符串两头的空格。

rtrim = /^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g
core_version = "1.9.1"
//仅仅是运用字符串的trim要领
core_trim = core_version.trim

//主要领,起首尝试运用字符串原生的trim要领(非IE支撑)
//不支撑的话,运用String.prototype.trim.call("\uFEFF\xA0")
//末了运用正则replace
trim: core_trim && !core_trim.call("\uFEFF\xA0") ?
    function( text ) {
        return text == null ?
            "" :
            core_trim.call( text );
    } :

    // 上述两个要领不支撑,运用自定义的要领,清空双方的空格或特别字符
    function( text ) {
        return text == null ?
            "" :
            ( text + "" ).replace( rtrim, "" );
    }

该要领须要诠释的是,“\uFEFF”和“\xA0”。

某些软件,在保留一个以UTF-8编码的文件时,会在文件最先的处所插进去三个不可见的字符(0xEF 0xBB 0xBF,即BOM),转码后是“\uFEFF”,因而我们在读取时须要本身去掉这些字符。

“\xA0”实在就是HTML中常见的“&nbsp”

四、$.isNumeric() 推断是不是是数字

isNumeric: function( obj ) {
    return !isNaN( parseFloat(obj) ) && isFinite( obj );
}

isFinite() 函数用于搜检其参数是不是是无穷大。假如 number 是有限数字(或可转换为有限数字),那末返回 true。不然,假如 number 是 NaN(非数字),或者是正、负无穷大的数,则返回 false。

五、$.isEmptyObject() 推断对象是不是为空

isEmptyObject: function( obj ) {
    var name;
    for ( name in obj ) {
        return false;
    }
    return true;
}

这个要领很好懂,就不多诠释

六、$.parseJSON() 将JSON字符串转换为JSON对象

// JSON RegExp
rvalidchars = /^[\],:{}\s]*$/,
rvalidbraces = /(?:^|:|,)(?:\s*\[)+/g,
rvalidescape = /\\(?:["\\\/bfnrt]|u[\da-fA-F]{4})/g,
rvalidtokens = /"[^"\\\r\n]*"|true|false|null|-?(?:\d+\.|)\d+(?:[eE][+-]?\d+|)/g

parseJSON: function( data ) {
    // 假如有原生的JSON对象支撑,运用原生对象
    if ( window.JSON && window.JSON.parse ) {
        return window.JSON.parse( data );
    }

    if ( data === null ) {
        return data;
    }

    if ( typeof data === "string" ) {

        // 去掉两头空格,制表符,bom
        data = jQuery.trim( data );

        if ( data ) {
            // 保证输入的字符串是可用的JSON字符串
            if ( rvalidchars.test( data.replace( rvalidescape, "@" )
                .replace( rvalidtokens, "]" )
                .replace( rvalidbraces, "")) ) {
                console.log(data);
                return ( new Function( "return " + data ) )();
            }
        }
    }

    jQuery.error( "Invalid JSON: " + data );
}

这个要领主如果看上面几个正则表达式,从字符串转JSON对象,仅仅是运用return ( new Function( “return ” + data ) )();

七、$.globalEval() 在全局作用域实行一段JS剧本

// 在全局作用域实行JS剧本
globalEval: function( data ) {
    if ( data && jQuery.trim( data ) ) {
        // 在IE中运用execScript
        // 由于运用匿名函数,所以作用域运用的是window
        ( window.execScript || function( data ) {
            window[ "eval" ].call( window, data );
        } )( data );
    }
}

jQuery该要领源于:Jim Driscoll

要领道理:eval作用域题目

var a = "window";
function b(){
    eval('var a = "b"');
}
b();
alert(a); //a的效果为window;IE、chrome、FF效果一致
window.eval和eval不一样的处所:

var a = "window";
function b(){
    window.eval('var a = "b"');
}
b();
alert(a); //IE下照样a的效果照样window,chrome、FF的a的效果b

via Just Jason’s Blog

    原文作者:江小湖Laker
    原文地址: https://segmentfault.com/a/1190000002450582
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞