jq代碼分析 函數

 

extend

 

第 一個參數可以對象  也可以是布爾    (如果是布爾值表示是否深度便利)

如果是一個對象則 擴展到原來的對象上去

如果是多個對象   則每個對象都擴展到原來的對象上去

 

var wt = function(){

};

wt.extend = function() {

                   var target = arguments[0] || {}, i = 1, length = arguments.length, deep = false, options;

                  

                   //根據第一個參數來判斷是否深度遍歷

                   if ( typeof target === "boolean" ) {

                            deep = target;

                            target = arguments[1] || {};

                            i = 2;         

                   }

                   

 

                   if ( typeof target !== "object" )

                            target = {};

        

        

                   //如果只有一個遍歷對象  (在有判斷深度遍歷的時候 i=2了 這時是2個以上參數 遍歷對象從地2個開始)        

                   // 用 target引用wt

                   if ( length == i ) {

                            target = this;

                            --i;

                   }

        

 

                   for ( ; i < length; i++ )

 

                            if ( (options = arguments[ i ]) != null )

 

                                     for ( var name in options ) {

                                               var src = target[ name ], copy = options[ name ];

        

                                               if ( target === copy )

                                                        continue;

                                               //如果他們引用的同一個對象 跳出循環 避免重複遍歷

 

                                               if ( deep && copy && typeof copy === "object" && !copy.nodeType )

                                                        target[ name ] = wt.extend( deep,

 

                                                                 src || ( copy.length != null ? [ ] : { } )

                                                        , copy );

                                               //進行深度遍歷     

 

                                               else if ( copy !== undefined )

                                                        target[ name ] = copy;

                                     }

 

                  return target;

};

 

each

 

有3個參數 第一個是集合 可以是數組,對象,元素集合(如document.body.getElementsByTagName('div')) 
第2個參數是函數 就是每次便利的時候需要執行的函數
如果不帶第3個參數arg
且如果第一個參數是obj callbacl的第一個參數是  屬性名  第二個是屬性直
如果第一個參數是 數組or元素集合 則第一個參數某項的索引 第2個參數是直
第3個參數 是指callback的所需要的參數 可以爲空 且必須爲數組
  function each( object, callback, args ) { var name, i = 0, length = object.length; // if ( args ) { //如果有參數 且object是對象 便利對象 並且用object所對應的屬性值來調用callback if ( length === undefined ) { for ( name in object ) if ( callback.apply( object[ name ], args ) === false ) //提供一個可以調處循環的機制 如果執行完callback返回的是false 則跳出循環 break; } else //如果有參數 且object是數組or元素集合 則.... for ( ; i < length; ) if ( callback.apply( object[ i++ ], args ) === false ) break; } else { //如果沒有參數且object是對象 則執行下面的 if ( length === undefined ) { 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; } //對象的用法 且沒有第3個參數 each({a:'aa',b:'bb'},function(key,value){ alert(key+'---------'+value); //可以看到第一個參數是對象的屬性 第2個參數是該屬性對應的值 }); each({a:'aa'},function(){ for(var i=0,l=arguments.length;i<l;i++){ alert(arguments[i]) //可以看出打印出來的是1 2 3 4 5 } },[1,2,3,4,5]); //如果是數組 each(['a','s','d','f'],function(i,value){ alert(value+'---------'+i); //可以看到第2個參數是數組裏面的某項 第1個參數i是該項的索引 }); //元素集合的暫時忽略

 

 

browser

 

判斷瀏覽器的類型   根據window.navigator.userAgent字符串來判斷瀏覽器的類型

 

+function(userAgent){ window.browser = { version: (userAgent.match( /.+(?:rv|it|ra|ie)[//: ]([/d.]+)/ ) || [0,'0'])[1], safari: /webkit/.test( userAgent ), opera: /opera/.test( userAgent ), msie: /msie/.test( userAgent ) && !/opera/.test( userAgent ), mozilla: /mozilla/.test( userAgent ) && !/(compatible|webkit)/.test( userAgent ) }; }(navigator.userAgent.toLowerCase()); browser.msie&&(alert('IE'+browser.version)); browser.mozilla&&(alert('火狐'+browser.version));

 

param  

 

返回一個參數的字符串形式

 

function each( object, callback, args ) { var name, i = 0, length = object.length; if ( args ) { if ( length === undefined ) { for ( name in object ) if ( callback.apply( object[ name ], args ) === false ) break; } else for ( ; i < length; ) if ( callback.apply( object[ i++ ], args ) === false ) break; } else { if ( length === undefined ) { 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; }; var toString = Object.prototype.toString; function isFunction( obj ) { return toString.call(obj) === "[object Function]"; }; function isArray( obj ) { return toString.call(obj) === "[object Array]"; }; //----------------------------------------------------------------------------------------- function param(a){ var s = []; function add(key,value){ s[s.length] = encodeURIComponent(key) + '=' + encodeURIComponent(value); }; if(isArray(a)){ each(a,function(){ add(this.name,this.value); }); }else{ for(var j in a){ if(isArray(a[j])) each(a,function(){ add(this.name,this.value); }); else add( j , isFunction(a[j]) ? a[j]() : a[j] ); } }; return s.join("&").replace(/%20/g, "+"); } alert(param({})

 

 

Ajax之jsonp和script部分

創建一個script標籤 和一個回調函數 返回一個json數據

function extend(){ var target = arguments[0] || {}, i = 1, length = arguments.length, deep = true, options; if ( typeof target === "boolean" ) { deep = target; target = arguments[1] || {}; i = 2; } if ( typeof target !== "object" && Object.prototype.toString.call(target)!="[object Function]") target = {}; for(;i<length;i++){ if ( (options = arguments[ i ]) != null ) for(var name in options){ var src = target[ name ], copy = options[ name ]; if ( target === copy ) continue; if ( deep && copy && typeof copy === "object" && !copy.nodeType ){ target[ name ] = arguments.callee( deep, src || ( copy.length != null ? [ ] : { } ), copy ); } else if(copy !== undefined) target[ name ] = copy; } } return target; }; //---------------------------------------------------------------------------- (function(){ var window = this, now=function(){return +new Date;},jsc = now(), ajaxSettings = { url: 'http://www.beiju.com?a=a', global: true, type: "GET", contentType: "application/x-www-form-urlencoded", processData: true, async: true, xhr:function(){ return window.ActiveXObject ? new ActiveXObject("Microsoft.XMLHTTP") : new XMLHttpRequest(); }, accepts: { xml: "application/xml, text/xml", html: "text/html", script: "text/javascript, application/javascript", json: "application/json, text/javascript", text: "text/plain", _default: "*/*" } }; //************************************************************************************************** window.ajax = function(s){ s = extend(true, s, extend(true,{},ajaxSettings, s)); var jsre = /=/?(&|$)/g, jsonp,data,type = s.type.toUpperCase(); //暫時考慮的都是jsonp的情況 所以這裏橫成立 if ( s.dataType == "jsonp" ) { if ( type == "GET" ) { if ( !s.url.match(jsre) ) //如果url中沒有? 就代表 只是一個url 沒有參數 所以後面+上callback //如果有? 代表有參數 所以用&來連接jsonp的形式 s.url += (s.url.match(//?/) ? "&" : "?") + (s.jsonp || "callback") + "=?"; } else if ( !s.data || !s.data.match(jsre) ) s.data = (s.data ? s.data + "&" : "") + (s.jsonp || "callback") + "=?"; s.dataType = "json"; }; function success(data){ s.success&&s.success(data); }; //這裏頁是橫成立的 if ( s.dataType == "json" && (s.data && s.data.match(jsre) || s.url.match(jsre)) ) { //jsc是上面算出來的 ++後 就可以一直都是唯一的了 jsonp = "jsonp" + jsc++; if ( s.data ) s.data = (s.data + "").replace(jsre, "=" + jsonp + "$1"); //把=?替換成 = jsonp + 時間戳 因爲下面要吧回調函數名設置成全局的 所以能避免衝突 s.url = s.url.replace(jsre, "=" + jsonp + "$1"); s.dataType = "script"; //加上一個全局的 變量 這個就是回調函數了 window[ jsonp ] = function(tmp){ data = tmp; success(data); //complete(); window[ jsonp ] = undefined; try{ delete window[ jsonp ]; } catch(e){} if ( head ) head.removeChild( script ); }; } //如果沒有設置cache屬性 就認爲不需要緩存下來 好像也只有ie會緩存 if ( s.dataType == "script" && s.cache == null ) s.cache = false; if ( s.cache === false && type == "GET" ) { var ts = now(); var ret = s.url.replace(/(/?|&)_=.*?(&|$)/, "$1_=" + ts + "$2"); //爲了避免緩存+上的時間戳 s.url = ret + ((ret == s.url) ? (s.url.match(//?/) ? "&" : "?") + "_=" + ts : ""); }; if ( s.data && type == "GET" ) { s.url += (s.url.match(//?/) ? "&" : "?") + s.data; // IE likes to send both get and post data, prevent this s.data = null; }; //一個判斷url的正則 parts[0]爲整個 1爲頭 ł爲域名 var parts = /^(/w+:)?////([^//?#]+)/.exec( s.url ); //如果不是請求的當前頁面 if ( s.dataType == "script" && type == "GET" && parts&& ( parts[1] && parts[1] != location.protocol || parts[2] != location.host )){ //創建標籤並建立好回調 var head = document.getElementsByTagName("head")[0]; var script = document.createElement("script"); script.src = s.url; if (s.scriptCharset) script.charset = s.scriptCharset; // Handle Script loading if ( !jsonp ) { var done = false; script.onload = script.onreadystatechange = function(){ if ( !done && (!this.readyState ||this.readyState == "loaded" || this.readyState == "complete") ) { done = true; success(); //complete(); script.onload = script.onreadystatechange = null; head.removeChild( script ); } } } head.appendChild(script); // We handle everything using the script element injection return undefined; } }; //************************************************************************************************** })(); ajax({ dataType : 'jsonp', url : 'http://www.google.com/base/feeds/snippets?q=jquery&alt=json-in-script', success : function(o){ for(var name in o) alert(name +'__________'+o[name]); } })

 

 ready

 也就是$(document).ready中的 ready

在非ie瀏覽器中  document 的 DOMContentLoaded 方法 可以DOM結構加載完畢之後觸發

在ie中 可以用 執行document.documentElement.doScroll("left")

因爲沒有再加完的時候是會拋出異常的  所以可以不停的重複執行  直到加載成功.

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>ready</title> </head> <body> <img src="http://avatar.profile.csdn.net/B/D/F/2_sz_haitao.jpg"></br> <img src="http://avatar.profile.csdn.net/2/0/5/2_crazywa.jpg"></br> <img src="http://avatar.profile.csdn.net/F/F/E/2_kk3k2005.jpg"></br> <script type="text/javascript"> (function(doc,undefined){ var win = this, // 判斷 頁面元素是否已經全部解析完成 的變量 isReady = false, readyBound = false, //一個集合 當有多個ready的時候 就會有回調函數的集合 readyList = [], readyTo = function(){ // Make sure that the DOM is not already loaded if ( !isReady ) { // Remember that the DOM is ready isReady = true; // If there are functions bound, to execute if ( readyList ) { // Execute all of them /*each( jQuery.readyList, function(){ this.call( document, jQuery ); }); */ // Reset the list of functions for(var i=0,l=readyList.length;i<l;i++){ readyList[i].call(document); } readyList = null; } } }, bindReady = function(){ //readyBound 可以保證 ready函數只執行一次 if (readyBound) return; readyBound = true; //Mozilla, Opera and webkit 等瀏覽器 用 DOMContentLoaded 這個東西會在所有的dom解析完的時候執行 if (doc.addEventListener){ doc.addEventListener( "DOMContentLoaded", function(){ doc.removeEventListener( "DOMContentLoaded", arguments.callee, false ); readyTo(); }, false ); // 還是要給window加上onload 怕出現意外的情況 //win.addEventListener( "load", readyTo, false ); //ie 的 }else{ doc.attachEvent("onreadystatechange", function(){ if (doc.readyState === "complete" ){ doc.detachEvent("onreadystatechange", arguments.callee); readyTo(); }; }); // If IE and not an iframe // continually check to see if the document is ready if ( doc.documentElement.doScroll && win == win.top ){ (function(){ if ( isReady ) return; // 因爲在ie下面 dom結構不加載完成 執行document.documentElement.doScroll("left")是會拋出異常的 // 所以不停的執行這個 直到不拋出異常位置 說明dom結構已經加載完成............ try { doc.documentElement.doScroll("left"); } catch( error ) { setTimeout( arguments.callee, 0 ); return; } // and execute any waiting functions readyTo(); })(); } // 還是要給window加上onload 怕出現意外的情況 //win.attachEvent( "onload", readyTo); } }; win.ready = function(fn){ bindReady(); isReady ? fn.call(document) : readyList.push(fn); }; })(document); ready(function(){ alert(document.getElementById('xx').innerHTML); }); window.onload = function(){alert(123)} </script> <div id='xx' style="height:200px; width:200px; background-color:#0000FF">我在ready函數的下面</div> </body> </html>

 

 

data 

應該緩存 或者是保存數據的機制

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb-2312" /> <title>Untitled Document</title> </head> <body> <div id='a11'></div> <script> function now(){ return +new Date; }; function $$(id){ return document.getElementById(id); }; function isArray(obj){ return Object.prototype.toString.call(obj) === "[object Array]"; } function isFunction(obj){ return Object.prototype.toString.call(obj) === "[object Function]"; } //如果參數是數組 創建一個新的數組副本 如果不是數組 返回包含中個參數的數組 function makeArray(array){ var ret = []; if(array != null){ var i = array.length; //不存在length 這個屬性 或者是 字符串 或者是function (ps length 是函數的形參的個數 不是 window) if(i==null || typeof array === 'string' ||isFunction(array)||array.setInterval) ret[0] = array; else while(i) ret [--i] = arrry[i] } return ret }; var expando = "jQuery" + now(), uuid = 0, cache = {}; function data(elem, name, data){ var id = elem[expando]; if(!id) id = elem[expando] = ++uuid; if(name&&!cache[id]) cache[id] = {}; if(data !== undefined) cache[id][name] = data; return name ? cache[id][name] : id; } function removeData(elem, name){ //找到這個索引 var id = elem[expando]; if (name){ if (cache[id]) { //如果存在中個屬性 刪除 delete cache[id][name]; name = ""; for ( name in cache[ id ] ) break; //看看這個cache[ id ]是否已經是空對象了 如果是空對象了 在ie下 還要把對應的屬性刪除掉 if ( !name ) removeData(elem); } // Otherwise, we want to remove all of the element's data }else{ //刪除掉這個元素對應的所有的data所有的....... try { delete elem[expando]; } catch(e){ // IE has trouble directly removing the expando // but it's ok with using removeAttribute if ( elem.removeAttribute ) elem.removeAttribute( expando ); } // Completely remove the data cache delete cache[id]; } } //加入到隊列 其實也是用到的data function queue(elem, type, d){ if(elem){ type = (type || "fx")+'queue'; var q = data(elem,type); //如果 不存在type那個緩存 或者是 緩存的數據部室數組 改成數組 if(!q || isArray(d)) q = data( elem, type, makeArray(d)); else q.push(d); return q; } }; //執行隊列中的函數 吧函數中的this指向elem function dequeue(elem, type){ var qu = queue(elem,type); fn = qu.shift(); if( !type || type === "fx") fn = queue[0]; if(fn !== undefined) fn.call(elem); }; window.onload = function(){ alert(data($$('a11'),'hh')); data($$('a11'),'hh','v5v5v5v5'); alert(data($$('a11'),'hh')); queue($$('a11'),'xx',function(){ alert(1); }); queue($$('a11'),'xx',function(){ alert(2); }); queue($$('a11'),'xx',function(){ alert(3); }); queue($$('a11'),'xx',function(){ alert(4); }); dequeue($$('a11'),'xx'); dequeue($$('a11'),'xx'); dequeue($$('a11'),'xx'); dequeue($$('a11'),'xx'); } </script> </body> </html>