jQuery 技术揭秘

1.平时jquery调用页：

index.html :

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<script src="js/jquery.min.js"></script>
	<script>
		var obj = {name:"Tom"};
		var obj1 = {age:30,height:175,weight:68};
		console.log(obj);

		$.extend(obj,obj1);
		console.log(obj);

		// extend 给对象扩展属性 参数2以上
		// extend 给jquery对象扩展属性方法(静态) 参数1
		// extend 给jquery实例对象(公共 原型)扩展属性方法 参数1
		$.extend({
			getName:function(){
				alert("Tom is Tom");
			}
		})
		$.fn.extend({ // 在原型上
			getName:function(){
				alert("Tom is Tom");
			}
		});
		console.log($.getName());
		console.log($().getName());
	</script>
</body>
</html>

 

2.测试页 

test.html :

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>jquery源码</title>
</head>
<body>
	<script src="js/jquery.1.1.0.js"></script>
	<script>
		// 将jquery作为对象对待
		// jQuery.fn  // 指向jquery原型
		// jQuery.extend // 给对象扩展属性
		// jQuery.extend({

		// });
		// jQuery.fn.extend({
			
		// });
		var obj = {name:"tom"};
		var obj1 = {age:30,height:175,weight:68};
		$.extend(obj,obj1)
		$.extend({
			getName:function(){
				//
			}
		});
		var result = $.extend({},obj,obj1);
		console.log(result);
	</script>
</body>
</html>

 

3.自己封装的jquery代码

jquery-1.1.0.js :

/**
 * 创建自运行函数
 * 私有的命名空间
 * 局部作用域
 */
(function(window){ // 局部作用域
	// 2.创建jquery的构造函数
	var jQuery = function(selector){ //jQuery 类
		return new jQuery.prototype.init(selector); // 桥接设计模式
	}
	// 4.将jQuery作为对象,fn是其属性
	jQuery.fn = jQuery.prototype = { // 原型对象
		init:function(selector){ // 原型对象初始化方法,相当于构造函数
			/*
				1:DOM元素
				2:body
				3:字符串 html字符串 #id .class
				4:选择器表达式  #id .class
				5:function 事件回调
				6:对象
			*/
		}

		// jQuery.extend  // 对象 属性
		// jQuery.prototype // 原型 


	};

	// 3.桥接设计模式
	// jQuery.prototype.init.prototype = jQuery.prototype;
	jQuery.fn.init.prototype = jQuery.fn;
	// console.log(jQuery.prototype.init);

	// 5
	jQuery.extend = jQuery.fn.extend = function(){
		var length = arguments.length; // 参数个数
		var target = arguments[0] || {};
		var i = 1;
		var options;
		var name;
		var copy;
		var src;
		// 类型
		if(typeof target !=="object" && typeof target !=="function"){
			target = {}; // 默认是一个对象
		}
		console.log(target);
		// 传一个参数
		if(length == i){
			target = this; // 改变this指向
			console.log(target);
			--i;
		}
		// 传2个以上
		for(;i<length;i++){ // 1
			if((options = arguments[i]) != null){ // 下标为1及以上
				console.log(options);
				for(name in options){ //
					// 循环可枚举属性
					console.log(options[name]);
					copy = options[name];
					src = target[name]; // 第一参数 扩展属性
					console.log(src);
					if(copy != undefined){
						target[name] = copy;
					}
				}
			}
			return target;
		}
		// 扩展工具函数
		jQuery.extend = ({
			isFunction:function(){ // 静态方法
				//
			},
			isWindow:function(){
				//
			}
		})
	}

	window.$ = window.jQuery = jQuery;
})(window) // 1.传window对象(全局作用域里的对象)

console.log($().css); // 数据类型是object  $() 创建实例对象    $(this)  mvc mvvm Grunt

// 类 class 构造函数 函数 对象

// function xxx() {}   Function
// var obj = {};
// obj.name="max"; //私有 静态

/*
	工具函数 jQuery静态方法
	异步列队
	数据缓存
	属性操作
	事件处理
	选择器  // 正则 sizzle
	DOM遍历
	DOM操作
	css操作
	动画
	坐标
*/

.

posted @ 2017-06-30 00:01  每天都要进步一点点  阅读(250)  评论(0)    收藏  举报