$、jQuery是什么?

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

?細不細很開心哦，豁然開朗

$.extend是做什么的？

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

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經常用的，參數靈活給人有點混亂的感覺，有時不注意可能會使用不當遇到坑。

$.extend(true,objA,objB,objC) ?第一參數如果是boolean類型，則用來標明是否深克隆拷貝對象。將objB深克隆拷貝到objA，再將objC深克隆拷貝到objA $.extend(objA,objB,objC)　　　若第一個參數不為boolean，則用直接值復制的方式拷貝對象，第一個參數對象（包括object、array、function類型）定義為target目標對象：將objB值復制到objA，再將objC復制到objA $.extend(objA)?　　　　　　　　如果只有一個參數對象，則target目標對象設為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對于方法回調有2個很有意思的封裝$.Deferred，$.callback。各有各的適用場景：

$.callback("rule") ：

1.維護一個有規則的回調方法列表，提供add、fire、remove接口給調用者

2.關注的是多個事件以何種邏輯調用

3.作為回調方法的中間層，將方法的執行fire和方法的監聽add、remove解耦

?

規則rule：

once 每次調用后方法置空
memory add新方法時，調用上一次fire的參數值觸發當前方法
unique 不重復
stopOnFalse false 執行鏈中斷

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.作為回調方法中間層，解耦事件的定義dfd.done(fn).fail(fn)和方法的執行dfd.resolve(ars)
2.支持鏈式，擅長控制處理事件調用的時機
3.提供靈活的接入代碼方式：最強大的莫過于$.Deferred()可以接受一個函數參數，$.Deferred()所生成的deferred對象將作為這個函數的默認參數。

function wait(dtd){setTimeout(function(){dtd.resolve("yinshen");},2000);} /**最基礎的實現,傳入Deferred對象var dtd=$.Deferred();dtd.done(function(data){console.log(data);});wait(dtd);**//**定義實現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);});

?

轉載于:https://www.cnblogs.com/yinshen/archive/2013/03/16/2963944.html

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。