jquery核心功能分析
作者:zccst
核心功能包括:
jQuery是如何定义的,如何调用的,如何扩展的。掌握核心方法是如何实现的,是理解jQuery源码的关键。这里理解了一切豁然开朗。
1,如何定义,即入口
//DefinealocalcopyofjQuery
varjQuery=function(selector,context){
//ThejQueryobjectisactuallyjusttheinitconstructor'enhanced'
returnnewjQuery.fn.init(selector,context,rootjQuery);//jQuery对象仅仅是构造函数jQuery.prototype.init加强版
}
2,jQuery的原型,及与jQuery.fn.init的关系
//定义对象方法,也即只有通过$("xx").的方式才能调用。
jQuery.fn=jQuery.prototype={
init:function(selector,context,rootjQuery){
returnjQuery.makeArray(selector,this);
}
其他还有很多属性和方法,
属性有:jquery,constructor,selector,length
方法有:toArray,get,pushStack,each,ready,slice,first,last,eq,map,end,push,sort,splice
...
}
//把jQuery.prototype赋给jQuery.prototype.init.prototype,是为了后面的实例化
//GivetheinitfunctionthejQueryprototypeforlaterinstantiation
jQuery.fn.init.prototype=jQuery.fn;
也即是,$("xx")拥有了实例方法,可以调用。(调用jQuery.prototype下定义的方法)
为什么jQuery要返回jQuery.fn.init对象?
jQuery=function(selector,context){
//ThejQueryobjectisactuallyjusttheinitconstructor'enhanced'
returnnewjQuery.fn.init(selector,context,rootjQuery);
}
jQuery.fn=jQuery.prototype={
……
}
jQuery.fn.init.prototype=jQuery.fn;
在stackoverflow上找到类似问题:
http://stackoverflow.com/questions/4754560/help-understanding-jquerys-jquery-fn-init-why-is-init-in-fn
还有这个
http://stackoverflow.com/questions/1856890/why-does-jquery-use-new-jquery-fn-init-for-creating-jquery-object-but-i-can/1858537#1858537
IbelievethecodeiswritteninthisfashionsothatthenewkeywordisnotrequiredeachtimeyouinstantiateanewjQueryobjectandalsotodelegatethelogicbehindtheobjectconstructiontotheprototype.TheformerIbelieveistomakethelibrarycleanertouseandthelattertokeeptheinitialisationlogiccleanlyinoneplaceandallowinittoberecursivelycalledtoconstructandreturnanobjectthatcorrectlymatchesthepassedarguments.
3,extend扩展对象方法和静态方法原理
jQuery.extend=jQuery.fn.extend=function(){
vartarget=arguments[0]||{};
returntarget;
}
使用extend就方便了,无非就是$.extend({});和$.fn.extend({});如果你能在看到fn时理解联想到是jQuery.prototype就好了。
再通过this作用域看一下:
$.extend->this是$->this.aa()
$.fn.extend->this是$.fn->this.aa()
附extend实现细节:
使用场景:
1,扩展一些函数
只有一个参数。例如:$.extend({f1:function(){},f2:function(){},f3:function(){}})
2,合并多个对象到第一个对象
(1)浅copy,第一个参数是目标对象。例如
vara={name:"hello"}
varb={age:30}
$.extend(a,b);//a={name:"hello",age:30}
(2)深copy,第一个参数是TRUE,第二个参数是目标对象。例如
vara={name:{job:"it"}};
varb={name:{age:30}};
//$.extend(a,b);
$.extend(true,a,b);
console.log(a);
jQuery.extend = jQuery.fn.extend = function() { var options, name, src, copy, copyIsArray, clone, target = arguments[0] || {}, i = 1, length = arguments.length, deep = false; // 是不是深复制 Handle a deep copy situation if ( typeof target === "boolean" ) { deep = target; target = arguments[1] || {}; // skip the boolean and the target i = 2; } // 不是对象类型 Handle case when target is a string or something (possible in deep copy) if ( typeof target !== "object" && !jQuery.isFunction(target) ) { target = {}; } // 扩展插件的情况 extend jQuery itself if only one argument is passed if ( length === i ) {//$.extend({f1:function(){},f2:function(){},f3:function(){}}) target = this;//this是$,或是$.fn --i; } for ( ; i < length; i++ ) {//可能有多个对象扩展到第一个对象上 // Only deal with non-null/undefined values if ( (options = arguments[ i ]) != null ) {//options是一个对象 // Extend the base object for ( name in options ) { src = target[ name ]; //src是target里已经存在的value(也可能不存在) copy = options[ name ];//copy是待合入的一个value // 防止循环引用 Prevent never-ending loop if ( target === copy ) {//例如:var a={};$.extend(a,{name:a});//可能导致循环引用 continue; } // if是深复制else是浅复制 Recurse if we're merging plain objects or arrays if ( deep && copy && ( jQuery.isPlainObject(copy) || (copyIsArray = jQuery.isArray(copy)) ) ) { if ( copyIsArray ) { copyIsArray = false; clone = src && jQuery.isArray(src) ? src : []; } else { clone = src && jQuery.isPlainObject(src) ? src : {}; } // 亮了,直至剥离至最深一层非对象类型,而且是逐个。Never move original objects, clone them target[ name ] = jQuery.extend( deep, clone, copy ); // Don't bring in undefined values } else if ( copy !== undefined ) { target[ name ] = copy;//target[ name ] = options[ name ]; } } } } // Return the modified object return target; };
jQuery.extend({...})分析
看一下是如何写的
jQuery.extend({
prop:""
method:function(){}
});
可以看出,这些方法是jQuery的静态属性和方法(也即是工具方法),将来既可以直接提供给用户使用,也可以在内部使用。
具体实现的工具属性和方法有(同时也标注了哪些在内部使用)
jQuery.extend({
expando:生成唯一JQ字符串(内部)
noConflict():防止冲突
isReady:DOM是否加载完(内部)
readyWait:等待多少文件的计数器(内部)
holdReady():推迟DOM触发
ready():准备DOM触发
isFunction():是否为函数
isArray():是否为数组
isWindow():是否为window
isNumeric():是否为数字
type():判断数据类型
isPlainObject():是否为对象自变量
isEmptyObject():是否为空的对象
error():抛出异常
parseHTML():解析节点
parseJSON():解析JSON
parseXML():解析XML
noop():空函数
globalEval():全局解析JS
camelCase():转驼峰
nodeName():是否为指定节点名(内部)
each():遍历集合
trim():去前后空格
makeArray():类数组转真数组
inArray():数组版indexOf
merge():合并数组
grep():过滤新数组
map():映射新数组
guid:唯一标识符(内部)
proxy():改this指向
access():多功能值操作(内部)
now():当前时间
swap():CSS交换(内部)
});
jQuery.ready.promise=function(){};监测DOM的异步操作(内部)
functionisArraylike(){}类似数组的判断(内部)
如果您觉得本文的内容对您的学习有所帮助,您可以微信: