写在前面
在前面的几篇文章中,我们针对JS面向对象中的三要素理论做了一些讲解 ,也结合了一些代码演示,如果你错过了,可以返回去看一看,顺便点点赞:),当然了,我们对于JS面向对象的学习,光有理论基础是不够的,这篇文章,我们将通过实际应用对面向对象做更深刻的认识与总结。
大家对Jquery应该不陌生,如果你看过JQ的源码,应该可以发现它是一个函数,实际上,它是一个ES5的构造函数,和我们ES6中的class一样,而我们通常使用的jq选择器,就是则是一个构造函数的实例,这篇文章,我们将通过模拟一个JQ和JQ选择器,来对面向对象做一个实际的应用。
模拟一个jQuery
通过上面的分析,我们大概知道,JQ实际上也是一个Class,我们可以在其中定义一系列的方法来构造出实例中的方法,也可以通过在class中定义一些列的属性,来构造出实例中的属性。于是,我们的大概雏形就是这样的
class jQuery {
constructor (seletor) {
}
append(node) {
}
addClass(name) {
}
html(data) {
}
// 此处省略N个API
}
接下来就是对JQ选中元素一般具有的属性写出来
class jQuery {
constructor (seletor) {
const slice = Array.prototype.slice
const dom = slice.call(document.querySelectorAll(seletor)) // 过去dom节点,并返回一个数组(可能为多个dom节点)
const len = dom ? dom.length : 0
for(let i = 0; i < len; i++) {
this[i] = dom[i] // 将选中的dom映射到this上
}
this.length = len
this.seletor = seletor || ''
}
append(node) {
}
addClass(name) {
}
html(data) {
}
// 此处省略N个API
}
window.$ = function (selector) {
return new jQuery(selector)
}
// 测试代码
var p = $('p')
console.log(p)
console.log(p.addClass)
到这里,我们就可以在html中使用了。这里我们试一下,在index.html中写一些代码。然后运行,不同环境使用方法可能不同,自行甄别
<body>
<p>jS面向对象应用-1</p>
<p>jS面向对象应用-2</p>
<p>jS面向对象应用-3</p>
<p>jS面向对象应用-4</p>
<p>jS面向对象应用-5</p>
<p>jS面向对象应用-6</p>
</body>
这样,我们的结果如下
于是,我们就模拟除了一个JQ源码,实际上,JQ本身也是这样的思想来实现的,这里大家看一下代码,捋一下就像。下面来思考一个问题。
我们为什么使用面向对象?
-
首先我们要知道一个基础知识点,不管你使用的是什么语言来编程,程序的执行都是按照“顺序、判断、循环”的形式来执行的。这样三个形式就达到了一个结构化的目的。
-
既然编程是有结构化,那么数据也有结构化,这就是面向对象的作用。
-
并且对于计算机来说,结构化的东西才是最简单的。所以我们要尽可能做到数据上的结构化。
-
编程应该简单&抽象
写在后面
到这里,我们关于面向对象的概念以及应用都已经详细的通过代码介绍了,有些概念在js中并不常用,比如封装和多态,但是我们还是要了解一下,只有对面向对象有一个比较明确的认识,在后面学习设计模式的时候,才会更加轻松,或者在工作中才会写出更优秀的代码。
网友评论