相關文章:
? jQuery插件開發全解析 讀jq之四 jquery1.43源碼分析之核心部分 推薦圈子:
Jquery 更多相關推薦
這個部分是jquery一些常用的工具方法. 包括為jquery對象擴展了一些數組里的方法.一些測試方法,函數代理和瀏覽器的特性檢測.
isArray: function( obj ) {return toString.call(obj) === "[object Array]";}
var A = function(){}
A.prototype = new Array; var a = new A;alert (a instanceof Array) //true
isArray:?function(object)?{???
return?object?!=?null?&&?typeof?object?==?"object"?&&??'splice'?in?object?&&?'join'?in?object;???
}??
Array.prototype.each = function(fn){for (var i = 0, l = this.length; i < l; i++){fn(this[i]); //當前元素作為回調函數的參數.}
};[1, 2, 3].each(function(i){alert (i); //i 就是上面的 this[i]
})
Array.prototype.each = function(fn){for (var i = 0, l = this.length; i < l; i++){fn.call(this[i], i, this[i]);}
};[1, 2, 3].each(function(i, n){alert ([this, i, n]);
})
Array.prototype.each = function(fn){for (var i = 0, l = this.length; i < l; i++){if ( fn.call(this[i], i, this[i]) === false ) break; //當回調函數返回false的時候, 中止循環.}
};[1, 2, 3].each(function(i, n){if (n >= 2) {return false;}alert (n)
})
each: function( callback, args ) {return jQuery.each( this, callback, args );},
jQuery.each
each: function( object, callback, args ) {
/*
object為目標jquery對象, callback為回調函數, args表示callback方法里的參數, 如果不傳, 就為默認的i(下標), n(當前元素).
*/var name, i = 0, //對象屬性名、 數組下標length = object.length,isObj = length === undefined || jQuery.isFunction(object);
/*
isObj判斷object是單個對象還是數組, 如果是單個對象, 就遍歷它的屬性, 如是數組, 就循環每個元素.
*/if ( args ) { //如果給callback傳遞了參數if ( isObj ) { //如果是單個對象for ( name in object ) { //遍歷屬性if ( callback.apply( object[ name ], args ) === false ) {
/*
執行回調函數, 如果回調函數返回false, 退出循環. 回調函數里的參數為自己傳遞的args.
*/break;}}} else { //如果是數組for ( ; i < length; ) { //循環數組if ( callback.apply( object[ i++ ], args ) === false ) { //執行回調函數, 如果回調函數返回false, 退出循環.break;}}}} else { //基本同上, 除了用i和value代替參數argsif ( isObj ) {for ( name in object ) {if ( callback.call( object[ name ], name, object[ name ] ) === false ) {break;}}} else {for ( var value = object[0];i < length && callback.call( value, i, value ) !== false; value = object[++i] ) {}}}return object;},
$.each( { name: "John", lang: "JS" }, function(i, n){alert( "Name: " + i + ", Value: " + n );})
$({ name: "John", lang: "JS" }).each(function(i, n){alert( "Name: " + i + ", Value: " + n );})
var ary = $.map( [0,1,2], function(n){return n + 4;
}); alert (ary);
map: function( callback ) {return this.pushStack( jQuery.map(this, function( elem, i ) {return callback.call( elem, i, elem );}));},
map: function( elems, callback, arg ) {var ret = [], value; //ret是待填充的數組.//value引用回調函數的返回值for ( var i = 0, length = elems.length; i < length; i++ ) { value = callback( elems[ i ], i, arg );
//執行回調函數. elems[ i ]表示當前元素值, i表示當前循環到了
//第幾個元素. arg參數是1.26版本里沒有的.只供內部使用if ( value != null ) { //當返回值不為空時. ret[ ret.length ] = value; //push進新數組.}}return ret.concat.apply( [], ret ); },
<body><div><span></span></div><div><span></span></div><div><span></span></div><div><span></span></div><div></div>
</body><script>var ary = $.map( document.getElementsByTagName('div'), function(n){return n.childNodes[0];}); alert (ary.length)</script>
grep: function( elems, callback, inv ) { //至少需要前2個參數, 待過濾的數組和過濾函數. 第3個參數沒有什么必要.默認為false. 如果填true 就在過濾函數返回false的時候選擇那個元素.var ret = []; //空數組, 待會裝載過濾后的元素.for ( var i = 0, length = elems.length; i < length; i++ ) { //循環待過濾數組.if ( !inv !== !callback( elems[ i ], i ) ) {
//inv默認為undefined, callback也有可能返回undefined. 等號2端前面都加個!是為了讓inv和//callback統一轉化為boolean類型進行===的判斷.其實可以簡單看成//inv !== callback( elems[ i ], i ) )ret.push( elems[ i ] ); //符合條件的塞進數組}}return ret;},
ready: function( fn ) {jQuery.bindReady(); //添加監聽函數if ( jQuery.isReady ) { //如果dom加載完成了fn.call( document, jQuery ); //立刻執行函數} else if ( readyList ) {readyList.push( fn ); //否則把函數添加進readyList}return this;},
bindReady: function() {if ( readyBound ) { //默認為falsereturn;}readyBound = true;if ( document.readyState === "complete" ) {
//如果$().ready()的時候,document已經加載完成了.return jQuery.ready(); //執行readyList里的方法}if ( document.addEventListener ) { //如果支持w3c標準事件模型, 如firefox opera, safari
document.addEventListener("DOMContentLoaded",DOMContentLoaded, false );
//當dom加載完成時, 觸發DOMContentLoaded方法. DOMContentLoaded方
//法可查看源碼742行.window.addEventListener( "load", jQuery.ready, false ); //保險起見, 給window.onload上面也綁定jQuery.ready, 這是其它方法都 //失效,逼不得以的情況.} else if ( document.attachEvent ) { //如果是IE事件模型
document.attachEvent("onreadystatechange", DOMContentLoaded); //實際上是判斷當document.readyState === "complete"時, 執行
// readyList里的函數, 見源碼754行. window.attachEvent( "onload", jQuery.ready ); //同上面的window.addEventListener/*
下面的代碼只針對IE瀏覽器和頁面不在iframe之中的情況, 當頁面處在iframe中, 好像有時候用doScroll()會出問題 (不過我測試了幾次, 似乎沒有發現這個問題 - -!).*/var toplevel = false;try {toplevel = window.frameElement == null; //判斷是IE并且頁面不在iframe當中} catch(e) {}if ( document.documentElement.doScroll && toplevel ) {doScrollCheck();
//不停的執行document.documentElement.doScroll("left"); 直到不報異常
}}}
jQuery.readyready: function() {if ( !jQuery.isReady ) { if ( !document.body ) { //至少要保證document.body存在. 似乎又是為IE做的hackreturn setTimeout( jQuery.ready, 13 ); //每隔13ms調用, resig似乎對13這個數字情有獨鐘, 是因為比較接近cpu//平均一幀的時間?}jQuery.isReady = true; //設置isReadyif ( readyList ) {var fn, i = 0;while ( (fn = readyList[ i++ ]) ) {fn.call( document, jQuery ); //依次執行readyList里的方法.}readyList = null;//清空readyList,盡早釋放內存. 因為當isReady為true時,//$().ready().對于參數里方法,采取的是來一個執行一個.已經無須// readyList了.}if ( jQuery.fn.triggerHandler ) { //觸發document上綁定的事件jQuery( document ).triggerHandler( "ready" );}}}
function doScrollCheck() {if ( jQuery.isReady ) {return;}try {document.documentElement.doScroll("left");} catch( error ) {setTimeout( doScrollCheck, 1 ); return;}//不停的執行document.documentElement.doScroll("left")//直到沒有異常拋出jQuery.ready();
}
(function(){alert(this.name);
}).call({name: "__游樂場"})
document.getElementById('div1').onclick = function(){~function(){alert (this.id);}()
}
document.getElementById('div1').onclick = function(){var self = this;~function(){alert (self.id);}()
}
Function.prototype.bind = function(obj){var self = this; return function(){ //返回一個閉包, 調用的時候把obj當成this.self.call(obj); }
}
document.getElementById('div1').onclick = function(){~function(){alert (this.id);}.bind(this)()
}
var obj = {name: "John",test: function() {alert( this.name );$("#test").unbind("click", obj.test);} };$("#test").click( jQuery.proxy( obj, "test" ) ); // 以下代碼跟上面那句是等價的: // $("#test").click( jQuery.proxy( obj.test, obj ) );// 可以與單獨執行下面這句做個比較。// $("#test").click( obj.test );
proxy: function( fn, proxy, thisObject ) { //參數分別為被代理函數, this代理, thisObject是內部用的變量, 用來修正被代理函數if ( arguments.length === 2 ) {if ( typeof proxy === "string" ) { //如果第二個參數為字符型, 參看上面的第一種調用方式.thisObject = fn; //修正thisObject指向obj對象. 這里代碼雖然寫的fn, 看起來像一個函數//實際上是第一種調用方式傳遞進來的某個對象. fn = thisObject[ proxy ]; //被代理函數修正為obj對象的某個屬性函數.proxy = undefined;
//清空proxy, 跟下面的if ( !proxy && fn ) 統一處理只有一個參數fn的情況.} else if ( proxy && !jQuery.isFunction( proxy ) ) { //上面第二種調用方式thisObject = proxy;
//修正thisObject指向obj對象.proxy = undefined;
//清空proxy, 跟下面的 if ( !proxy && fn ) 統一處理只有一個參數fn的情況.}}if ( !proxy && fn ) { // 如果只有一個參數, proxy為undefined. 有2個參數的絕大部分情況下, proxy也已經被設置為undefined. 這里的條件判斷都為trueproxy = function() { return fn.apply( thisObject || this, arguments );
//進行代理, 如果只有一個參數, thisObject顯然是undefined, 這里的代理對象還是原來的this. 注意proxy返回一個函數, 這里的第二個參數arguments是以后調用proxy函數時候的arguments};}if ( fn ) {proxy.guid = fn.guid = fn.guid || proxy.guid || jQuery.guid++; //設置一個全局標識符, 在event系統中用到.}return proxy;}
總結
以上是生活随笔 為你收集整理的jquery1.43源码分析之工具方法 的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔 網站內容還不錯，歡迎將生活随笔 推薦給好友。
