写在前面
在前面的几篇文章中，我们针对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中并不常用，比如封装和多态，但是我们还是要了解一下，只有对面向对象有一个比较明确的认识，在后面学习设计模式的时候，才会更加轻松，或者在工作中才会写出更优秀的代码。
网友评论