源码分析之jQuery.merge函数
来源:互联网 发布:临床医学英国留学 知乎 编辑:程序博客网 时间:2024/05/19 00:08
测试代码1:
var obj={ 0:"xx", 1:"female", length:2}var arr=[1,2,3];alert($.merge(arr,obj));//打印[1,2,3,xx,female]//不要求第二个参数是数组对象,但是obj前面的下标必须是0,1等数字,而且必须是从0开始的,//因为从源码就能看出来,j是从0开始的!这样才会出现j++不断加入如果obj前面不是数字,//或者数字不是从0开始的,那么获取到的数组就会[1,2,3,,]也就是有些属性不能添加进来!测试代码2:
var obj={ name:"xx", 1:"female", length:2}var arr=[1,2,3];alert($.merge(arr,obj));//因为第二个对象的下标不是从0开始的!所以second[0]不存在,所以是空,最后打印[1,2,3,,female]测试代码3:
try{ }catch(e){ alert(e.message);//用e.message输出错误信息!}//为了兼容IE<9,有些浏览器会把NodeLists元素的length转化为NAN!测试代码4:
var obj={'0':"zero","1":"one",length:2}alert(typeof obj.length);//返回numbervar obj={'0':"zero","1":"one",length:"2"}alert(typeof obj.length);//返回string,不要求length必须加上双引号
如果第二个参数的length可以转化为数字,那么 就转化为数字!
merge源码分析:
merge: function( first, second ) {//如果second.length是一个字符串,那么+second.length就是数字了,通过typeof +"123"将返回number//如果是+ "xx"那么就会返回0,typeof还是会返回numbervar len = +second.length,j = 0,i = first.length;//通过i不断的往里面添加,数组长度自动增加//通过该循环,j就是第二个数组的长度while ( j < len ) {first[ i++ ] = second[ j++ ];}// Support: IE<9// Workaround casting of .length to NaN on otherwise arraylike objects (e.g., NodeLists)//在IE<9中,会把NodeList等类数组对象的length转为NaNif ( len !== len ) {while ( second[j] !== undefined ) {first[ i++ ] = second[ j++ ];}}//重新设置数组长度,数组的长度一般是number类型first.length = i;return first;}
pushStack方法中用到了jQuery.merge方法:
pushStack: function( elems ) {// Build a new jQuery matched element setvar ret = jQuery.merge( this.constructor(), elems );//this.constructor()=$()相当于返回一个空的jQuery对象,length是0,但是有很多属性方法!// Add the old object onto the stack (as a reference)ret.prevObject = this;//merge方法会获取到第二个参数的length,对于DOM对象来说第二个参数是undefined,所以什么也不做,因此把它ret.context = this.context;//放在数组中才能真正用到merge方法!如$("span").pushStack([$("#n9")[0]])这样返回的jQuery对象就不是空的了!// Return the newly-formed element setreturn ret;//通过这里我们可以看到pushStack返回的是通过参数构建的jQuery对象,不过该jQuery对象保存了调用者context,以及通过prevObj} //保存了调用者的引用,该引用用于end方法!
总结:merge方法的逻辑还是比较简单的,但是要注意,merge方法的第二个参数可以不是数组(只要有length属性就可以了),甚至对象的键名可以不是数字,虽然这种情况将导致插入的全部是undefined!
1 0
- 源码分析之jQuery.merge函数
- jQuery源码分析之jQuery.makeArray函数
- jQuery源码分析之proxy函数
- jQuery源码分析之$.inArray()函数
- jQuery源码分析之$.index函数
- jQuery源码分析之$.map函数
- jQuery源码分析之contains函数
- jQuery源码分析之globalEval函数
- jQuery源码之init函数的分析
- HBase源码分析之Region合并merge
- jquery源码分析之扩展函数 extend, $.extend
- jQuery源码分析之$.grep()函数四问
- jQuery源码分析之appendTo,prependTo,insertBefore,insertAfter,replaceWith函数
- jQuery源码分析之ajaxConverter与ajaxHandleResponse函数
- jQuery源码分析-each函数
- jQuery源码分析-extend函数
- jQuery源码分析之深入理解jQuery.data,jQuery._data以及data实例函数十八问
- jquery源码分析之Callbacks
- 关于ubuntu无法开机问题,显示安装错误 ubuntu install problem the configuration defaults for gnome power manager have
- Android 开发基础系列——添加NDK路径
- 中文分词 及发展现状(总结的不错)
- Intel开发者手册《翻译附录A-C》
- 网上选课系统设计书
- 源码分析之jQuery.merge函数
- AndroidStudio第一次构建出现Buiding 'Project Name' Gradle project info长时间等待
- 兼容火狐浏览器,jq animate backgroundPosition
- PDF文本操作
- XUtils框架的使用
- [MySQL分享]--MySQL体系结构(InnoDB引擎)
- 机器学习中的算法(1)-决策树模型组合之随机森林与GBDT
- Cannot find class 'org.junit.Test' on project build path
- Eclipse如何创建并部署web project