jQuery源代码自我理解（二）

最新推荐文章于 2021-06-03 15:50:04 发布

GJWeigege

最新推荐文章于 2021-06-03 15:50:04 发布

阅读量677

点赞数

分类专栏： jQuery JavaScript 源码杂记文章标签： jquery 源代码函数

本文链接：https://blog.csdn.net/GuoJiangweigege/article/details/51859199

版权

JavaScript 同时被 3 个专栏收录

30 篇文章 0 订阅

订阅专栏

jQuery

3 篇文章 0 订阅

订阅专栏

源码杂记

2 篇文章 0 订阅

订阅专栏

下面是自己写的上一篇源码理解：
jQuery源代码自我理解（一）

话不多说，直接开始正题

type()函数用来判断对象的类型。
typeof obj === "object" || typeof obj === "function"判断obj参数是不是对象或者函数，是的话返回class2type[]数组里相对应得类型，否则返回obj参数的基本类型。

例如：

var a=[1];
console.log($.type(a));//返回array

源码中的camelCase()方法用来将一些变量名称转化为驼峰命名形式，比如将background-color转化为backgroundColor。源码代码如下：

camelCase: function( string ) {
        return string.replace( rmsPrefix, "ms-" ).replace( rdashAlpha, fcamelCase );
    }

两次替换，第一次将“-ms-”转化为“ms-”，之后将“-字母”转化为大写的字母。
其中，rmsPrefix、rdashAlpha以及fcamelCase()函数在前面的变量中声明过，代码如下：

var rmsPrefix = /^-ms-/,          //匹配开头就是-ms-的模式
    rdashAlpha = /-([a-z])/g,       //匹配横杠后面的字母
    // Used by jQuery.camelCase as callback to replace()
    fcamelCase = function( all, letter ) {
        return letter.toUpperCase();
    };

函数fcamelCase()将传入的letter转变为大写的字母并返回该字母。参数all是匹配的整个内容，而letter则是后面括号匹配的项即横杠后面的字母，简单例子如下：

var a="-ms-back-grou-nd-color";
console.log($.camelCase(a));//返回msBackGrouNdColor

nodeName()函数返回一个布尔值，函数用于判断传入的第一个对象参数的节点名是否为第二个参数。源码如下：

nodeName: function( elem, name ) {
        return elem.nodeName && elem.nodeName.toLowerCase() === name.toLowerCase();
    }

下面是使用的一个简单例子：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
<title>Example</title>
<script type="text/javascript" src="jquery-3.0.0.js"></script>
</head>
<body>
<div>aaa</div>
<div>bbb<div>bas</div></div>
<script type="text/javascript">
var a=$('div');
console.log($.nodeName(a[1],"div"));
</script>
</body>
</html>

trim()函数用来去除字符串首末两端的空格，源码如下：

trim: function( text ) {
        return text == null ?
            "" :
            ( text + "" ).replace( rtrim, "" );
    }

其中变量rtrim声明赋值如下：

rtrim = /^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g;

正则匹配不同的空格字符，之后替换为””。

makeArray()函数用于合并一个数组。源码如下：

makeArray: function( arr, results ) {
        var ret = results || [];
        if ( arr != null ) {
            if ( isArrayLike( Object( arr ) ) ) {
                jQuery.merge( ret,
                    typeof arr === "string" ?
                    [ arr ] : arr
                );
            } else {
                push.call( ret, arr );
            }
        }
        return ret;
    }

源码中isArrayLike( Object( arr ) )用来判断传入的arr参数是否为类数组对象，Object(arr)会将其转化为一个字符串对象，例如：

console.log(Object("aasd"));
//返回String {0: "a", 1: "a", 2: "s", 3: "d", length: 4, [[PrimitiveValue]]: "aasd"}

利用makeArray()函数可以传递一个参数或者两个参数，例如：

var a="   -ms-back-gr ou- nd-color    ",
b=[2,4,'wq',32];
var c=$.makeArray(a);
console.log(c);//返回["   -ms-back-gr ou- nd-color    "]
c=$.makeArray(a,b);
console.log(c);//返回[2, 4, "wq", 32, "   -ms-back-gr ou- nd-color    "]

inArray()函数用于判断元素是否存在于数组内，传递三个参数，elem为查询的元素，arr为查询的数组，i表示从该位置开始查找。若不存在则返回-1，存在则返回该元素所在的位置。

inArray: function( elem, arr, i ) {
        return arr == null ? -1 : indexOf.call( arr, elem, i );
    }

使用inArray()函数例子如下：

var arr=[2,4,32,5,321];
var result=$.inArray(2,arr);
console.log(result);//返回0

函数grep()函数用于过滤数组，传递三个参数，elem为要过滤的数组，callback为过滤的函数，invert为布尔值（若为true则返回callback函数为false的元素，否则返回callback函数为true的元素）。源码如下：

grep: function( elems, callback, invert ) {
        var callbackInverse,
            matches = [],
            i = 0,
            length = elems.length,
            callbackExpect = !invert;

        // Go through the array, only saving the items
        // that pass the validator function
        for ( ; i < length; i++ ) {
            callbackInverse = !callback( elems[ i ], i );
            if ( callbackInverse !== callbackExpect ) {
            //返回结果若不同于传入的insert参数，则添加入matches数组。
                matches.push( elems[ i ] );
            }
        }

        return matches;
    }

简单例子如下：

var arr=[2,4,32,5,321];
var result=$.grep(arr,function(item,i){
    return item>5;
});
console.log(result);//返回[32, 321]

上述代码返回大于5的数组结果。若添加第三个参数为true，则返回小于5的数组元素，例子如下：

var arr=[2,4,32,5,321];
var result=$.grep(arr,function(item,i){
    return item>5;
},true);
console.log(result);//返回[2, 4, 5]

proxy()函数用于改变函数的作用域，一开始理解不深，后来查看中文文档的例子才对此函数有了一定的了解。源码如下：

proxy: function( fn, context ) {
        var tmp, args, proxy;

        if ( typeof context === "string" ) {
            tmp = fn[ context ];
            context = fn;
            fn = tmp;
        }

        // Quick check to determine if target is callable, in the spec
        // this throws a TypeError, but we will just return undefined.
        if ( !jQuery.isFunction( fn ) ) {
            return undefined;
        }

        // Simulated bind
        args = slice.call( arguments, 2 );
        proxy = function() {
            return fn.apply( context || this, args.concat( slice.call( arguments ) ) );
        };

        // Set the guid of unique handler to the same of original handler, so it can be removed
        proxy.guid = fn.guid = fn.guid || jQuery.guid++;

        return proxy;
    }

前面的第一个if代码段表示：如果传递的上下文context参数是字符串，则将该第一个参数赋值给context，而fn取其下面的context参数所代表的对象方法。例子如下：
HTML代码：

<div id="test">Click Here!</div>

JavaScript代码：

var obj = {
  name: "John",
  test: function() {
    alert( this.name );
    $("#test").unbind("click", obj.test);
  }
};
$("#test").click( obj.test );       //弹出框显示undefined
$("#test").click( jQuery.proxy( obj, "test" ) );      //弹出框显示John

代码将obj.test方法的this强制设置为obj，而不是$(“#test”)所对应的jQuery对象。

都是我看着源码的理解，可能理解的有点简单浅薄，但是之后会慢慢总结整理，而不是像现在简单的将源码和解释贴出来。。还请各位大神多多指教！

GJWeigege

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
jQuery源代码自我理解（二）

下面是自己写的上一篇源码理解： jQuery源代码自我理解（一）type()函数用来判断对象的类型。 typeof obj === "object" || typeof obj === "function"判断obj参数是不是对象或者函数，是的话返回class2type[]数组里相对应得类型，否则返回obj参数的基本类型。例如：var a=[1];console.log($.type(a));
复制链接

扫一扫