面向过程 (洗衣服)-- 站在一个执行者的角度去做事情
// 1. 找个盆
// 2. 收集要洗的衣服
// 3. 放水放洗衣液
// 4. 洗一洗
// 5. 晒一晒
面向对象 – 站在指挥者的角度
// 1. 找个对象
// 2. 让他去洗
// 面向对象不是用来替代面向过程, 是封装了面向过程的代码
// 面向对象 + 面向过程的代码
// 面向对象编程的三大特征:
// 1. 封装:函数封装,使用对象来封装
// 2. 继承:子承父业,一个对象没有的属性和方法,另外一个对象有,拿过来直接使用,就实现了继承(拿来主义)
// js中继承是指对象之间的关系
// 其他编程语言中,类与类的关系
// 3. 多态:多种形态,js不支持多态的
// int num = 10; // 只有强类型语言才有多态,,,例如java就是强类型语言
// num = "abc";
// var num = 10; // js是弱类型语言
// num = 'abc';
// num = function(){}
// 小结:
// 1. 对象:无序键值对的集合
// 2. 面向对象编程:是一种开发思想
// 3. 面向过程: 关注点:做事情的顺序, 先干嘛,然后干嘛,最后做啥
// 面向对象: 关注点:找对象(把要干的事情封装在自己的方法里了)
// 4. 三大特征:
// 封装 继承 多态
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div, p{
height: 100px;
background-color: #f99;
margin: 20px;
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<script>
// 举例-面向过程&&面向对象
// 需求:给所有的div添加5px边框
// 面向过程
// 1. 找对象
// 2. 循环设置每个div的边框
// 1.
/*
var divs = document.querySelectorAll("div");
var ps = document.querySelectorAll("p");
// 2.
for (var i = 0; i < divs.length; i++) {
divs[i].style.border = "5px solid #ccc";
}
for (var i = 0; i < ps.length; i++) {
ps[i].style.border = "5px solid #ccc";
}
*/
// 使用函数上面的代码
// 获取元素
/*
function getEle(ele){
return document.querySelectorAll(ele);
}
// 设置边框
function setBorder(ele){
for (var i = 0; i < ele.length; i++) {
ele[i].style.border = "5px solid #ccc";
}
}
setBorder( getEle("div") );
setBorder( getEle("p") );
*/
// 上面造成全局污染
// 面向对象
// 使用对象进行封装, 可以减少全局污染的问题
var tools = {
// 获取元素
getEle: function (ele){
return document.querySelectorAll(ele);
},
// 设置边框
setBorder: function (ele){
for (var i = 0; i < ele.length; i++) {
ele[i].style.border = "5px solid #ccc";
}
}
}
tools.setBorder( tools.getEle("div") );
tools.setBorder( tools.getEle("p") );
// 使用面向对象的好处:
// 找个那个对象,让对象里面的功能(方法)去实现效果
</script>
</body>
</html>