jQuery源代码自我理解(二)
2016-07-08 11:00
337 查看
下面是自己写的上一篇源码理解:
jQuery源代码自我理解(一)
话不多说,直接开始正题
type()函数用来判断对象的类型。
例如:
源码中的camelCase()方法用来将一些
4000
变量名称转化为驼峰命名形式,比如将background-color转化为backgroundColor。源码代码如下:
两次替换,第一次将“-ms-”转化为“ms-”,之后将“-字母”转化为大写的字母。
其中,rmsPrefix、rdashAlpha以及fcamelCase()函数在前面的变量中声明过,代码如下:
函数fcamelCase()将传入的letter转变为大写的字母并返回该字母。参数all是匹配的整个内容,而letter则是后面括号匹配的项即横杠后面的字母,简单例子如下:
nodeName()函数返回一个布尔值,函数用于判断传入的第一个对象参数的节点名是否为第二个参数。源码如下:
下面是使用的一个简单例子:
trim()函数用来去除字符串首末两端的空格,源码如下:
其中变量rtrim声明赋值如下:
正则匹配不同的空格字符,之后替换为””。
makeArray()函数用于合并一个数组。源码如下:
源码中isArrayLike( Object( arr ) )用来判断传入的arr参数是否为类数组对象,Object(arr)会将其转化为一个字符串对象,例如:
利用makeArray()函数可以传递一个参数或者两个参数,例如:
inArray()函数用于判断元素是否存在于数组内,传递三个参数,elem为查询的元素,arr为查询的数组,i表示从该位置开始查找。若不存在则返回-1,存在则返回该元素所在的位置。
使用inArray()函数例子如下:
函数grep()函数用于过滤数组,传递三个参数,elem为要过滤的数组,callback为过滤的函数,invert为布尔值(若为true则返回callback函数为false的元素,否则返回callback函数为true的元素)。源码如下:
简单例子如下:
上述代码返回大于5的数组结果。若添加第三个参数为true,则返回小于5的数组元素,例子如下:
proxy()函数用于改变函数的作用域,一开始理解不深,后来查看中文文档的例子才对此函数有了一定的了解。源码如下:
前面的第一个if代码段表示:如果传递的上下文context参数是字符串,则将该第一个参数赋值给context,而fn取其下面的context参数所代表的对象方法。例子如下:
HTML代码:
JavaScript代码:
代码将obj.test方法的this强制设置为obj,而不是$(“#test”)所对应的jQuery对象。
都是我看着源码的理解,可能理解的有点简单浅薄,但是之后会慢慢总结整理,而不是像现在简单的将源码和解释贴出来。。还请各位大神多多指教!
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对象。
都是我看着源码的理解,可能理解的有点简单浅薄,但是之后会慢慢总结整理,而不是像现在简单的将源码和解释贴出来。。还请各位大神多多指教!
相关文章推荐
- Jquery的parent和parents(找到某一特定的祖先元素)
- dataTables插件-基本初始化
- jQuery UI 的时分秒控件
- JQuery动态添加控件并取值
- 使用jQuery UI方法
- jquery.serialize() 函数语法及简单实例
- 抛弃jQuery,拥抱原生JavaScript
- jQuery EasyUI+ashx实现数据库的CIUD操作
- Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法总结
- Jquery遮罩层实现代码
- jquery.serialize() 函数语法及简单实例
- Jquery基本使用
- jQuery Ajax同步参数导致浏览器假死怎么办
- jquery实现上一页下一页
- Jquery事件委托之Safari
- jquery中attr和prop的区别
- 使用Jquery的Ajax异步提交有二进制数据的表单实现方案
- jquery插件封装:消息对话框
- jQuery日期插件
- jquery分页优化