jquery截止到当前已经 3.3.1 版本了，如今随着各种浏览器的盛行，前端的框架层出不穷，jquery独步天下，老夫写代码只用jquery，拿起代码就是干的辉煌时代已经过去了。
2006 年，jQuery的第一个版本的面世，凭借着简洁、灵活的编程风格受到了开发者的喜爱。而它本身是一个JavaScript框架，它的设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装了JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。
从之前的风靡到如今的被抛弃，究其原因，不少前端工程师表示，对于jQuery来说，大量的操作DOM虽然方便，但是会牺牲很多页面的性能。另一方面，现阶段React、Vue和Angularjs等主流前端框架并不依赖jQuery，都可以独立使用。况且浏览器的兼容问题越来越少，当浏览器兼容不再是问题时，jQuery的价值就大打折扣了
就在微软收购github的 52 天，github改变也已经放弃了jquery，奇替代方案使用了原生的 js：
使用
querySelectorAll来查询DOM节点；使用
fetch来代替ajax；事件处理使用了事件代理；
使用
DOM标准化写了polyfill；使用了自定义元素。
假如不用，学习下还是可以的
本文粗燥的实现jquery的ready、each、bind、``$.fn.extend、$.extend
初始化$
复制代码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
(function (win) {
var _$ = function (selector, context) {
/**
* 通常咱们定义一个 函数 var Fun = function(){}
* 然后定义一个 Fun.prototype.init = function(){}
* 那么咱们调用init 的时候 得先要实例化对象 var f = new Fun()
* 然后f.init()
* 这里就省去了 var $ = new $()
*/
return new _$.prototype.Init(selector, context);
};
_$.prototype = {
//初始化$
Init: function (selector, context) {
this.elements = [];
/**
* 传入的类型是function 就执行ready事件，如果是document 就将document对象插入到this.elements
* 主要就是判断$(document).ready 和 $(function(){}) 这两种的ready事件的写法
*/
if (typeof selector === "function") {
this.elements.push(document);
this.ready(selector);
} else {
var context = context || document;
var isDocument = (ele) =>
Object.prototype.toString.call(ele) == "[object HTMLDocument]" ||
"[object Document]";
if (isDocument(selector)) {
this.elements.push(selector);
} else {
/**
* 如果是字符串的话就查询该节点 $('.class') | $('#id')
*/
if (context.querySelectorAll) {
var arr = context.querySelectorAll(selector);
for (var i = 0; i < arr.length; i++) {
this.elements.push(arr[i]);
}
}
}
}
},
//实现each
each: function (callback) {},
//实现ready
ready: function (callback) {},
//实现bind
bind: function (type, callback) {},
};
/**
* 让两个作用域不一样的对象共享一个方法，让他们的原型指向一致，即Init.prototype = _$.prototype
* 那么原型一致之后 就可以共享this.elements 属性了。
*/
_$.prototype.Init.prototype = _$.prototype;
window.$ = _$;
})(window || global);
登录后复制ready
复制代码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
//实现ready
ready: function (callback) {
var isDocument = (ele) => Object.prototype.toString.call(ele) == '[object HTMLDocument]' || '[object Document]'
//如果已经取得了节点
if (isDocument(this.elements[0])) {
if (document.addEventListener) { //判断火狐、谷歌
/**
* DOM树构建完成的时候就会执行DOMContentLoaded
* 页面上所有的DOM，样式表，脚本，图片，flash都已经加载完成了，才会触发window.onload
* 这也就是$(document).ready() 比 window.onload 执行早的原因
*
* arguments.callee 博客里面有一篇文章 [js-递归] 里面专门讲到了，这里不再解释了
*/
document.addEventListener('DOMContentLoaded', function () {
document.removeEventListener('DOMContentLoaded', arguments.callee, false)
callback()
}, false)
} else if (document.attachEvent) { //判断IE
document.attachEvent('onreadystatechange', function () {
if (document.readyState == 'complete') {
document.detachEvent('onreadystatechange', arguments.callee);
callback()
}
})
} else if (document.lastChild == document.body) { //body已经加载完了，就直接回调了
callback()
}
}
},
登录后复制each
复制代码1
2
3
4
5
6
7
8
//实现each
each: function (callback) {
if (this.elements.length > 0) {
for (var i = 0; i < this.elements.length; i++) {
callback.call(this, this.elements[i], i);
}
}
},
登录后复制bind
复制代码1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
//实现bind
bind: function (type, callback) {
if (document.addEventListener) { //判断火狐、谷歌
this.each(function (item, i) {
item.addEventListener(type, callback, false)
})
} else if (document.attachEvent) { //判断IE
this.each(function (item, i) {
item.attachEvent('on' + type, callback)
})
} else {
this.each(function (item, i) { //其他浏览器 egg: item.onclick = function(){}
item['on' + type] = callback
})
}
}
登录后复制$.fn.extend/$.extend
$.fn.extend是为查询的节点对象扩展方法，是基于$的原型扩展的方法
$.extend是扩展常规方法，是$的静态方法
官方给出解释：
jQuery.extend(): Merge the contents of two or more objects together into the first object.（把两个或者更多的对象合并到第一个当中）
jQuery.fn.extend():Merge the contents of an object onto the jQuery prototype to provide new jQuery instance methods.（把对象挂载到jQuery的prototype属性，来扩展一个新的jQuery实例方法）
$.fn.extend方法的初衷是我们扩展之后可以用$("").newMetod()这样访问，实际上就是给$原型加一个extend方法。这中间的fn其实类似于命名空间的作用，没什么实际的意义。为的是和$.extend作区分
$.fn.extend
复制代码1
2
3
4
5
6
7
8
9
10
11
12
13
14
; (function (win) {
...
_$.prototype.Init.prototype = _$.prototype;
_$.fn = _$.prototype; //把对象挂载到jQuery的prototype属性
var isObj = (o) => Object.prototype.toString().call(o) === '[object Object]';
$.fn.extend = function (obj) {
if (isObj(obj)) {
for (var i in obj) {
this[i] = obj //注意这里的this指向是 $.prototype
}
}
}
登录后复制$.extend
复制代码1
2
3
4
5
6
7
8
9
var isObj = (o) => Object.prototype.toString().call(o) === '[object Object]';
...
_$.extend = function (obj) {
if (isObj(obj)) {
for (var i in obj) {
this[i] = obj[i]; //注意这里的this指向是 $
}
}
}
登录后复制这俩看上去一模一样啊，没啥区别，注释里面已经说了，this指向不同。咱们来看个例子：
复制代码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
<!DOCTYPE html>
<html>
<head>
<title>jQuery.extend()与jQuery.fn.extend()区别</title>
<meta charset="utf-8" />
<script type="text/javascript" src="jquery.js"></script>
<!-- 开始扩展 -->
<script type="text/javascript">
(function ($) {
$.extend({
sayHello: function () {
console.log("Hello");
},
});
$.fn.extend({
sayHello: function () {
console.log("Hello");
},
});
})(jQuery);
</script>
<!-- 调用 -->
<script type="text/javascript">
$(document).ready(function () {
//$.extend扩展调用
$.sayHello();
//$.fn.extend扩展调用
$("#test").sayHello();
});
</script>
</head>
<body>
<div id="test"></div>
</body>
</html>
登录后复制这样以来就看的很明白了。jQuery.extend(object); 为扩展jQuery类本身，为自身添加新的方法。$.xxx()
jQuery.fn.extend(object);给jQuery对象添加方法$('#test').xxx()
$.extend常见用法
复制代码1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
//在jquery全局对象中扩展一个net命名空间。
$.extend({ net: {} });
//方法扩展到之前扩展的Jquery的net命名空间中去。
$.extend($.net, {
sayHello: function () {
console.log("Hello");
},
});
//extend方法还有一个重载原型
//extend(boolean,dest,src1,src2,src3...),第一个参数boolean代表是否进行深度拷贝
var a = { protocol: "http", hash: { a: 1, b: 2 } };
var b = { host: "chuchur.com", hash: { b: 1, c: 2 } };
var result = $.extend(true, {}, a, b);
console.log(result); //{ protocol: 'http',host: 'chuchur.com', hash: { a: 1, b: 1,c:2 } }
var result = $.extend(false, {}, a, b);
console.log(result); //{ protocol: 'http',host: 'chuchur.com', hash: { b: 1, c:2 } }
登录后复制完整代码
复制代码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
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
(function (win) {
var _$ = function (selector, context) {
/**
* 通常咱们定义一个 函数 var Fun = function(){}
* 然后定义一个 Fun.prototype.init = function(){}
* 那么咱们调用init 的时候 得先要实例化对象 var f = new Fun()
* 然后f.init()
* 这里就省去了 var $ = new $()
*/
return new _$.prototype.Init(selector, context);
};
_$.prototype = {
//初始化$
Init: function (selector, context) {
this.elements = [];
/**
* 传入的类型是function 就执行ready事件，如果是document 就将document对象插入到this.elements
* 主要就是判断$(document).ready 和 $(function(){}) 这两种的ready事件的写法
*/
if (typeof selector === "function") {
this.elements.push(document);
this.ready(selector);
} else {
var context = context || document;
var isDocument = (ele) =>
Object.prototype.toString.call(ele) == "[object HTMLDocument]" ||
"[object Document]";
if (isDocument(selector)) {
this.elements.push(selector);
} else {
/**
* 如果是字符串的话就查询该节点 $('.class') | $('#id')
*/
if (context.querySelectorAll) {
var arr = context.querySelectorAll(selector);
for (var i = 0; i < arr.length; i++) {
this.elements.push(arr[i]);
}
}
}
}
},
//实现each
each: function (callback) {
if (this.elements.length > 0) {
for (var i = 0; i < this.elements.length; i++) {
callback.call(this, this.elements[i], i);
}
}
},
//实现ready
ready: function (callback) {
var isDocument = (ele) =>
Object.prototype.toString.call(ele) == "[object HTMLDocument]" ||
"[object Document]";
//如果已经取得了节点
if (isDocument(this.elements[0])) {
if (document.addEventListener) {
//判断火狐、谷歌
/**
* DOM树构建完成的时候就会执行DOMContentLoaded
* 页面上所有的DOM，样式表，脚本，图片，flash都已经加载完成了，才会触发window.onload
* 这也就是$(document).ready() 比 window.onload 执行早的原因
*
* arguments.callee 博客里面有一篇文章 js-递归里面专门讲到了，这里不再解释了
*/
document.addEventListener(
"DOMContentLoaded",
function () {
document.removeEventListener(
"DOMContentLoaded",
arguments.callee,
false
);
callback();
},
false
);
} else if (document.attachEvent) {
//判断IE
document.attachEvent("onreadystatechange", function () {
if (document.readyState == "complete") {
document.detachEvent("onreadystatechange", arguments.callee);
callback();
}
});
} else if (document.lastChild == document.body) {
//body已经加载完了，就直接回调了
callback();
}
}
},
//实现bind
bind: function (type, callback) {
if (document.addEventListener) {
//判断火狐、谷歌
this.each(function (item, i) {
item.addEventListener(type, callback, false);
});
} else if (document.attachEvent) {
//判断IE
this.each(function (item, i) {
item.attachEvent("on" + type, callback);
});
} else {
this.each(function (item, i) {
//其他浏览器 egg: item.onclick = function(){}
item["on" + type] = callback;
});
}
},
};
/**
* 让两个作用于不一样的对象共享一个方法，让他们的原型指向一直，即Init.prototype = _$.prototype
* 那么指向之后 就可以共享this.elements 属性了。
*/
_$.prototype.Init.prototype = _$.prototype;
var isObj = (o) => Object.prototype.toString().call(o) === "[object Object]";
$.fn.extend = function (obj) {
if (isObj(obj)) {
for (var i in obj) {
this[i] = obj; //注意这里的this指向是 $.prototype
}
}
//....这里是简写
};
_$.extend = function (obj) {
if (isObj(obj)) {
for (var i in obj) {
this[i] = obj[i]; //注意这里的this指向是 $
}
}
//....这里是简写
};
window.$ = _$;
})(window || global);
登录后复制【完】
推荐学习：jQuery视频教程
以上就是你值得了解的JavaScript“继承之jquery”使用方法（代码详解）的详细内容，更多请关注靠谱客其它相关文章！
最后
以上就是飘逸花卷最近收集整理的关于你值得了解的JavaScript“继承之jquery”使用方法（代码详解）的全部内容，更多相关你值得了解内容请搜索靠谱客的其他文章。
本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
发表评论 取消回复