jq代码分析函数

迷南。 2022-07-10 05:27 171阅读 0赞

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

返回一个参数的字符串形式

Ajax之jsonp和script部分

创建一个script标签 和一个回调函数 返回一个json数据

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>