Comprensión orientada a objetos (OOP):
Programación Orientada a Objetos, resultó ser programación orientada a objetos, así como OOD (diseño orientado a objetos) y OOA (análisis orientado a objetos). Entonces, ¿qué está orientado a objetos?
Dé el ejemplo más simple para distinguir orientado a procesos y orientado a objetos
Un día quieres comer carne de cerdo desmenuzada con sabor a pescado, ¿qué debes hacer? Tienes dos opciones
1. Compre sus propios ingredientes, carne, condimento de cerdo desmenuzado con sabor a pescado, musgo de ajo, zanahorias, etc. Luego corte las verduras y la carne, saltee y coloque en un plato.
2. Ve al restaurante y abre la boca: ¡Jefe! ¡Aquí hay una rebanada de cerdo con sabor a pescado!
¿Ves la diferencia? Esto es que 1 está orientado a procesos y 2 está orientado a objetos.
¿Cuáles son las ventajas de la orientación a objetos? En primer lugar, no es necesario saber cómo se elabora el cerdo desmenuzado con sabor a pescado, lo que reduce el acoplamiento. Si de repente no quiere comer carne de cerdo desmenuzada con sabor a pescado y quiere comer repollo Luoyang, puede que no sea fácil para usted. Aún necesita comprar verduras y condimentos. Para 2, demasiado fácil, grita: ¡Jefe! Reemplace las tiras de cerdo con sabor a pescado con repollo Luoyang, que mejora la mantenibilidad. En general, es para reducir el acoplamiento y mejorar la mantenibilidad.
La orientación a procesos es específica y está orientada a procesos. Para resolver un problema, es necesario analizarlo paso a paso y realizarlo paso a paso.
Se modela la orientación a objetos, solo necesitas abstraer una clase, que es una caja cerrada, donde tienes los datos y la solución al problema. ¿Qué funciones se necesitan se pueden utilizar directamente, y no hay necesidad de implementarlas paso a paso. En cuanto a cómo se realiza esta función, ¿qué nos importa? Lo usaremos.
La capa inferior de la orientación a objetos está realmente orientada a procesos. La orientación a procesos se abstrae en clases y luego se encapsula. Es conveniente para nosotros utilizar la orientación a objetos.
No tanto, solo ve al estuche (efecto de fuegos artificiales)
Ideas:
[1] Crear objeto
1] Función de fuegos artificiales Fuego
2] Función de fuegos artificiales Chispa
[2] Describir objeto
1]
Propiedades estáticas de fuegos artificiales La posición
del elemento (cuerpo) agregado al día de fuegos artificiales generado
(x, y) el
número de
fuegos artificiales El radio de la explosión de los fuegos artificiales
Método dinámico
Inicializar init
fireworks moverse hacia arriba, fireMove
explota en el boom de los fuegos artificiales
2]
Propiedades estáticas de los
fuegos artificiales Color de los
fuegos artificiales Posición de los fuegos artificiales arriba a la izquierda
mover también método
Inicializar
el movimiento de init fireworks sparkMove Después de
mover, eliminar los elementos (eliminar tanto los fuegos artificiales como los fuegos artificiales) eliminar
【3 】 Objeto de operación
Haga clic en una determinada posición en la página para generar fuegos artificiales (objeto de fuegos artificiales), y los fuegos artificiales se generarán después de que los fuegos artificiales exploten (llame al objeto de fuegos artificiales)
detalles como sigue:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
html,
body {
overflow: hidden;
height: 100%;
}
body,
div,
p {
margin: 0;
padding: 0;
}
body {
background: #000;
font: 12px/1.5 arial;
color: #7A7A7A;
}
a {
text-decoration: none;
outline: none;
}
#tips,
#copyright {
position: absolute;
width: 100%;
height: 50px;
text-align: center;
background: #171717;
border: 2px solid #484848;
}
#tips {
top: 0;
border-width: 0 0 2px;
}
#tips a {
font: 14px/30px arial;
color: #FFF;
background: #F06;
display: inline-block;
margin: 10px 5px 0;
padding: 0 15px;
border-radius: 15px;
}
#tips a.active {
background: #FE0000;
}
.fire {
width: 3px;
height: 30px;
background: white;
position: absolute;
top: 100%;
}
.spark {
position: absolute;
width: 10px;
height: 10px;
border-radius: 50%;
left: 0;
top: 0;
}
</style>
</head>
<body>
<div id="tips">
<a href="javascript:;" id="auto">自动播放</a>
</div>
<script src="utils.js"></script>
<!--
【1】创建对象
1】烟花 function Fire
2】烟火 function Spark
【2】描述对象
1】烟花
静态属性
生成的烟花天添加的元素（body）
烟花的位置（x,y）
烟火数量
烟火的爆炸的半径
动态方法
初始化 init
烟花向上移动 fireMove
爆炸成烟火 boom
2】烟火
静态属性
烟火的颜色
烟火的位置 top left
动太方法
初始化 init
烟火的移动 sparkMove
移动结束之后 移出元素（把烟火和烟花都移出）remove
【3】操作对象
点击页面中的某个位置是生成 烟花（烟花对象），烟花爆炸之后生成烟火（调用烟火对象） -->
<script>
let ele = document.body;
let auto = $('#auto')
let flag = true; //给一个标识，点击的时候表示自动放烟花还是停止
let timer;
auto.onclick = function(e) {
e.cancelBubble = true;
// 如果flag = true，那么就表示点击自动放烟花
if (flag) {
// 在自动放烟花的过程中，flag = false
flag = false;
timer = setInterval(() => {
new Fire(ele);
}, 1000)
} else {
// flag = false时候，正在放烟花，点击的时候停止放烟花
flag = true;
clearInterval(timer)
}
}
// 点击任意位置时产生烟花
document.onclick = function(e) {
// console.log(1)
// 获取鼠标点击的位置
let x = e.clientX; // 鼠标的水平位置
let y = e.clientY; // 鼠标的垂直位置
new Fire(ele, x, y)
}
// 创建烟花对象
function Fire(ele, left, top) {
this.ele = ele;
this.left = left || getRandom(100, innerWidth - 100);
this.top = top || getRandom(100, innerHeight - 100);
this.r = getRandom(60, 100);
this.num = getRandom(20, 40)
// 初始化函数
this.init()
}
// 描述对象
Fire.prototype = {
// 初始化
init() {
// 创建一个标签节点
this.div = document.createElement('div');
// 添加class名
this.div.classList.add('fire');
this.div.style.left = this.left + 'px';
this.ele.appendChild(this.div);
// 调用烟花移动
this.fireMove()
},
// 烟花移动 (调用封装好的运动函数move())
fireMove() {
// console.log(this.div)
move(this.div, {
top: this.top,
height: 2, // 烟花的高度
// opacity: 0.1 // 为什么给了透明后烟花不会爆炸？
}, () => {
// 这里要使用箭头函数，如果使用普通函数的话this指向的是widow
this.boom();
// 当烟火爆炸的时候 烟花编程透明色
move(this.div, {
opacity: 0
})
})
},
// 烟花爆炸
boom() {
// console.log('爆炸')
// 当烟花到指定的位置后爆炸
let deg = 360 / this.num; // 每一份得到的角度
let degree = 0;
for (let i = 1; i <= this.num; i++) {
degree += deg; // 每循环一次,角度都会跟着变化
let radian = (Math.PI * degree) / 180; // 求弧度
// 所产生烟火的位置
let left = parseInt(Math.cos(radian) * this.r);
let top = parseInt(Math.sin(radian) * this.r);
// 构造一个烟火对象 Spark()
new Spark(this.div, left, top)
}
}
}
// 对象的属性修改
Object.defineProperty(Fire.prototype, 'constructor', {
value: Fire
})
// 创建烟火对象
function Spark(ele, left, top) {
this.ele = ele;
this.color = getRandomColor();
this.left = left || getRandom(100, innerWidth - 100);
this.top = top || getRandom(100, innerHeight - 100);
// 调用初始化函数
this.init();
}
Spark.prototype = {
init() {
this.span = document.createElement('span');
this.span.classList.add('spark');
this.span.style.background = this.color;
this.ele.appendChild(this.span);
// console.log(this.span)
// 调用sparkMove
this.sparkMove()
},
sparkMove() {
move(this.span, {
left: this.left,
top: this.top
}, () => {
// 移除烟花
this.removeEle();
})
},
// 爆炸后移除烟花及烟火
removeEle() {
this.ele.remove();
}
}
Object.defineProperty(Spark.prototype, 'constructor', {
value: Spark
})
</script>
</body>
</html>
Llamado archivo tillils.js
// 获取样式的方法
// 有两个参数
// 参数1：元素
// 参数2：csss属性
function getStyle(ele, attr) {
return style = window.getComputedStyle ? window.getComputedStyle(ele)[attr] : ele.currentStyle[attr]
}
// 封装一个事件监听的函数（兼容）
// 参数：事件源，事件类型，回调函数
function addEvent(ele, type, callback) {
if (ele.addEventListener) {
ele.addEventListener(type, callback);
} else {
ele.attachEvent('on' + type, callback)
}
}
// 动画函数
function move(ele, obj, callback) {
let speed;
let index = 0; //记录定时器的个数
// 循环对象创建定时器
for (let attr in obj) {
// 透明度的变化的时候 0-1
// console.log(attr);
index++;
// 清除上一次的定时器
clearInterval(ele[attr])
// 属性：attr
// 属性值：obj[key]
// box['width'] 给box这个dom元素添加一个 width属性(dom属性)
// dom 对象，以地址形式存储的，当上一次更改dom对象中的值，那么这次获取这个对象的时候是能拿到被更改之后的dom对象
ele[attr] = setInterval(() => {
// 把透明度的取值 改边为0-100的取值
// 0-1=====》0-100
let style;
if (attr == 'opacity') {
style = getStyle(ele, attr) * 100;
} else {
style = parseInt(getStyle(ele, attr));
}
speed = (obj[attr] - style) / 5;
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
style += speed;
if (attr === 'opacity') {
ele.style[attr] = style / 100;
} else {
ele.style[attr] = style + 'px';
}
if (style == obj[attr]) {
clearInterval(ele[attr]);
// 有多少个属性参数动画就会执行多少次
// 执行一次怎么？
// 没清除一次定时器，那么定时器的个数 -1
index--;
// 当定时器的个数 为0 的时候，说明所有动画执行完毕
if (index === 0) {
callback && callback();
}
}
}, 50)
}
}
function $(selector) {
return document.querySelector(selector);
}