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>