$、jQuery是什么?

平時天天在用的$到底是個什么東西？$("id")思考，感覺像個工廠方法。提供selector創(chuàng)建jquery對象。 一看源碼繞暈了，剝繭抽絲吧 定義jquery對象，原型上添加方法 function _jQuery(selector){} _jQuery.prototype={...} **************************************************** 想更簡潔的創(chuàng)建jQuery對象 jQuery=function(selector){return new _jQuery(selector); } function _jQuery(selector){} 創(chuàng)建一個快捷接口方便修改jQuery原型 jQuery.fn=_jQuery.prototype={...} **************************************************** 將_jQuery掛到j(luò)Query的原型屬性init上 jQuery.prototype.init=_jQuery=function(selector){... } jQuery.fn=_jQuery.prototype={...}=jQuery.prototype.init.prototype jQuery=function(selector){return new jQuery.prototype.init(selector); } **************************************************** 將_jQuery去掉 jQuery.prototype.init=function(selector){... } jQuery.fn={...}=jQuery.prototype.init.prototype jQuery=function(selector){return new jQuery.prototype.init(selector); }看到這里應(yīng)該明白了平時我們用的最多jQuery($)只是個包裝方法。 為了方便我們擴(kuò)展實際的_jQuery對象(jQuery.prototype.init)原型暴露出$.fn, 在這基礎(chǔ)上jQuery.fn=jQuery.prototype讓我們用的更習(xí)慣。 所以最后出來這繞來繞去略顯奇葩的源碼：jQuery=function(selector){return new jQuery.prototype.init(selector); } jQuery.fn=jQuery.prototype={...init:function(){...} }

?細(xì)不細(xì)很開心哦，豁然開朗

$.extend是做什么的？

　　這個接口有點(diǎn)靈活，還是看過源碼后用起來才有底氣

jQuery.extend = jQuery.fn.extend = function() {var src, copyIsArray, copy, name, options, clone,target = arguments[0] || {},i = 1,length = arguments.length,deep = false;// Handle a deep copy situationif ( typeof target === "boolean" ) {deep = target;target = arguments[1] || {};// skip the boolean and the targeti = 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 passedif ( length === i ) {target = this;--i;}for ( ; i < length; i++ ) {// Only deal with non-null/undefined valuesif ( (options = arguments[ i ]) != null ) {// Extend the base objectfor ( name in options ) {src = target[ name ];copy = options[ name ];// Prevent never-ending loopif ( target === copy ) {continue;}// Recurse if we're merging plain objects or arraysif ( 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 themtarget[ name ] = jQuery.extend( deep, clone, copy );// Don't bring in undefined values} else if ( copy !== undefined ) {target[ name ] = copy;}}}}// Return the modified objectreturn target; };

jquery 的$.extend經(jīng)常用的，參數(shù)靈活給人有點(diǎn)混亂的感覺，有時不注意可能會使用不當(dāng)遇到坑。

$.extend(true,objA,objB,objC) ?第一參數(shù)如果是boolean類型，則用來標(biāo)明是否深克隆拷貝對象。將objB深克隆拷貝到objA，再將objC深克隆拷貝到objA $.extend(objA,objB,objC)　　　若第一個參數(shù)不為boolean，則用直接值復(fù)制的方式拷貝對象，第一個參數(shù)對象（包括object、array、function類型）定義為target目標(biāo)對象：將objB值復(fù)制到objA，再將objC復(fù)制到objA $.extend(objA)?　　　　　　　　如果只有一個參數(shù)對象，則target目標(biāo)對象設(shè)為this（$.fn/$）：將objA屬性值賦值給$.fn/$ 例： 獲得A對象的深拷貝 　　　　　　　　　　　　　　$.extend(true,{},A); 克隆A對象同時，獲得B、C對象的屬性。　　　　 ?$.extend(true,{},A,B,C); jquery插件寫法　　　　　　　　　　　　　　　　 $.extend({ center:function(){...} }); =$.fn.center=function(){...} ?

$.Deferred $.callback的用途？

?

jquery對于方法回調(diào)有2個很有意思的封裝$.Deferred，$.callback。各有各的適用場景：

$.callback("rule") ：

1.維護(hù)一個有規(guī)則的回調(diào)方法列表，提供add、fire、remove接口給調(diào)用者

2.關(guān)注的是多個事件以何種邏輯調(diào)用

3.作為回調(diào)方法的中間層，將方法的執(zhí)行fire和方法的監(jiān)聽add、remove解耦

?

規(guī)則rule：

once 每次調(diào)用后方法置空
memory add新方法時，調(diào)用上一次fire的參數(shù)值觸發(fā)當(dāng)前方法
unique 不重復(fù)
stopOnFalse false 執(zhí)行鏈中斷

function fn1( value ){console.log( value );return false; }function fn2( value ){fn1("fn2 says:" + value);return false; }var callbacks = $.Callbacks( "unique memory" ); callbacks.add( fn1 ); callbacks.fire( "foo" ); callbacks.add( fn1 ); // repeat addition callbacks.add( fn2 ); callbacks.fire( "bar" ); callbacks.add( fn2 ); callbacks.fire( "baz" ); callbacks.remove( fn2 ); callbacks.fire( "foobar" );/* output: foo fn2 says:foo bar fn2 says:bar baz fn2 says:baz foobar */

?

$.Deferred

1.作為回調(diào)方法中間層，解耦事件的定義dfd.done(fn).fail(fn)和方法的執(zhí)行dfd.resolve(ars)
2.支持鏈?zhǔn)?#xff0c;擅長控制處理事件調(diào)用的時機(jī)
3.提供靈活的接入代碼方式：最強(qiáng)大的莫過于$.Deferred()可以接受一個函數(shù)參數(shù)，$.Deferred()所生成的deferred對象將作為這個函數(shù)的默認(rèn)參數(shù)。

function wait(dtd){setTimeout(function(){dtd.resolve("yinshen");},2000);} /**最基礎(chǔ)的實現(xiàn),傳入Deferred對象var dtd=$.Deferred();dtd.done(function(data){console.log(data);});wait(dtd);**//**定義實現(xiàn)Deferred接口* var dtd=$.Deferred();dtd.promise(wait);wait.done(function(data){console.log(data);}); wait(dtd);**/ /**將自己包裝成Deferred對象，簡潔**/$.Deferred(wait).done(function(data){console.log(data);});

?

轉(zhuǎn)載于:https://www.cnblogs.com/yinshen/archive/2013/03/16/2963944.html

總結(jié)

以上是生活随笔為你收集整理的jQuery源码学习的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。