您的位置:首页 > Web前端 > JQuery

jQuery源代码自我理解(二)

2016-07-08 11:00 337 查看
下面是自己写的上一篇源码理解:

jQuery源代码自我理解(一)

话不多说,直接开始正题

type()函数用来判断对象的类型。

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

例如:

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


源码中的camelCase()方法用来将一些
4000
变量名称转化为驼峰命名形式,比如将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对象。

都是我看着源码的理解,可能理解的有点简单浅薄,但是之后会慢慢总结整理,而不是像现在简单的将源码和解释贴出来。。还请各位大神多多指教!
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: