封装自己的 jquery 框架

说到jquery，那就给大家先简单的介绍一下什么是jquery

jquery是JavaScript函数的一种封装。jQuery封装了JavaScript常用的功能代码（函数），提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。

1. jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（框架）于2006年1月由John
   Resig发布。
2. jquery是指一种封装好的JavaScript函数库，一个轻量级的"写的少，做的多"的JavaScript库。
3. jQuery封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。
4. jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。

详情请去jquery官网 查看！

一，封装jquery`

接下来就说我封装jquery的一些心得和在网上查找的一些资料，由什么问题和错误望告知，谢谢！`

1，jqery的封装原理：

1、js的全局代码区只有一个，这样就会造成同名变量的值会被覆盖。‘

2、使用对象封装，将代码封装到对象中，但对象如果被覆盖，则全部失效，风险极高。

3、使用工厂模式，将代码进行封装，但是并没有解决问题。

4、将封装的函数名字去除，避免覆盖，但是函数没有办法调用了

5、匿名自调用。’可以在页面加载的时候调用一次，但是不能重复调用，并且数据没有办法获取。

6、使用闭包，在全局区中不能够获取函数体内的数据。使用更大作用域的变量来记录小作用域变量的值。

2，如何封装自己的 jQuery

返回new 一个初始化函数

	function jQuery(selector){
		// 返回new 一个初始化函数
		return new jQuery.fn.init(selector);
	}

1
2
3
4
5

定义其构造函数显式原型

// 定义JQuery构造函数的显示原型
	jQuery.fn =jQuery.prototype = {
		constructor:jQuery,
		jquery:"9.0.0",
		length:0,
		get(index){
			return this[index];
		},
1
2
3
4
5
6
7
8

这里使用沙箱模式，可以防止全局污染

<script>
(function(window,undefined){
var jQuery = function (ele){
return new jQuery.prototype.init(ele)
}
1
2
3
4
5

原型替换

jQuery.fn = jQuery.prototype ={
constructor:jQuery,
init:function(ele){
var ele = document.querySelectorAll(ele);
[].push.apply(this,ele);
},
1
2
3
4
5
6

这里用 css () 举例子

css:function(name,value){
if(arguments.length == 2){
1
2

设置 css 样式

}else if(arguments.length == 1){
if( typeof name === 'object'){
1
2

设置多个样式

}else if(typeof name == 'string'){
// 通过 getComputedStyle 获取
}
}
return this;
}
}
1
2
3
4
5
6
7

最关键的一步

jQuery.prototype.init.prototype = jQuery.fn;
1

暴露给全局

window.jQuery = window.$ = jQuery;
})(window)
</script>
1
2
3

2，jquery 方法封装

给jquery 身上设置全局方法；

 		// 方法一：
        jQuery.myFunction = function(str){
            console.log(str);
        }
        //方法一调用：
        $.myFunction('直接给jq身上设置全局方法');
        //方法二：
        // 同时添加多方法
        jQuery.extend({
            myFunction:function(str){
                console.log(str);
            },
            myFunction1:function(str){
                console.log(str);
            }
        })
        //方法二调用：
        $.myFunction('给jq身上同时添加多个全局方法');

        //方法三：
        jQuery.nameSpaces = {
            myFunction:function(str){
                console.log(str);
            },
            myFunction1:function(str){
                console.log(str);
            }
        }
        //方法三调用：
        $.nameSpaces.myFunction('用命名空间的方式给jq添加多个全局方法');
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

二，下面是我封装jquery的代码

jquer.js

;(function(){
	// 匿名函数自执行
	// jQ的构造函数
	function jQuery(selector){
		// 返回new 一个初始化函数
		return new jQuery.fn.init(selector);
	}
	// 定义JQuery构造函数的显示原型
	jQuery.fn =jQuery.prototype = {
		constructor:jQuery,
		jquery:"9.0.0",
		length:0,
		get(index){
			return this[index];
		},
		/* click(callback){
			// 单击时候让this的每个元素执行callback回调函数
			for(var i=0;i
		/* toggle(){
			// 遍历每个元素如果display不是none就隐藏，否则就显示
			for(var i=0;i
		each(callback){
			for(var i=0;i<this.length;i++){
				callback(this[i])
			}
			return this;
		},
		click(callback){
			// item指向的被遍历的每个元素
			this.each(function(item){
				// 让每个元素注册click事件 执行callback方法
				// 也就是click 括号里面的回调函数
				item.addEventListener("click",callback);
			})
			return this;
		},
		toggle(){
			this.each(function(item){
				if(item.style.display!="none"){
					item.style.display="none"
				}else{
					item.style.display="block";
				}
			})
		}
	}
	// jq初始化函数
	jQuery.fn.init =function(selector){
		// 获取到选择列表
		var list = document.querySelectorAll(selector);
		// 当前对象的长度
		this.length = list.length;
		for(var i=0;i<list.length;i++){
			//遍历类别对 this赋值
			this[i] = list[i];
		}
	}
	// 如何让new  init 产生对象拥有JQuery显示原型上的所有方法呢？
	jQuery.fn.init.prototype = jQuery.fn;
	// 全局对jQuery与$可以访问
	window.$=window.jQuery = jQuery;
	
})()
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76

jquery.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-9.0.0.js"></script>
	</head>
	<body>
		<h1>jquery还是大哥吗？</h1>
		<p>是的</p>
		<h1>市场占用96.8%</h1>
		<button>切换</button>
		<script>
			// jq实现链式操作
			// 给button注册一个点击事件
			// each函数编写
			 $("button").click(function(){
				 // 让h1切换显示与隐藏
				 $("h1").toggle().click(function(){
					 alert(this.innerText);
				 });
			 })
		</script>
	</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25