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>

版权声明：本文为博主原创文章，未经博主允许不得转载。