1. Orientado a procesos y orientado a objetos
1.1 Orientado a procesos
- Orientado a procesos es analizar los pasos necesarios para resolver el problema, y luego usar funciones para implementar estos pasos paso a paso, y luego llamarlos uno por uno.
1.2 Orientación a objetos
- Orientado a objetos es descomponer los asuntos en objetos individuales, y luego la división del trabajo y la cooperación entre los objetos.
1.3 Comparación de orientado a procesos y orientado a objetos
| Orientado al proceso | Orientado a objetos | |
|---|---|---|
| ventaja | El rendimiento es superior al orientado a objetos y es adecuado para cosas que están estrechamente relacionadas con el hardware, como la programación orientada a procesos utilizada por microcomputadoras de un solo chip. | Fácil de mantener, fácil de reutilizar, fácil de expandir, debido a que la orientación a objetos tiene las características de encapsulación, herencia y polimorfismo, se puede diseñar un sistema de bajo acoplamiento, lo que hace que el sistema sea más flexible y fácil de mantener. |
| Desventaja | No es fácil de mantener, no es fácil de reutilizar y no es fácil de expandir. | El rendimiento es inferior al orientado a procesos |
2. Objetos y clases
2.1 Objeto
Un objeto se compone de atributos y métodos: es una colección desordenada de pares clave-valor, que se refieren a una cosa específica.
- Atributos: las características de las cosas, que están representadas por atributos en objetos (sustantivos comunes).
- Método: el comportamiento de las cosas, representado por métodos en objetos (verbos comunes)
2.1.1 Crear objeto
//以下代码是对对象的复习
//字面量创建对象
var ldh = {
name: '刘德华',
age: 18
}
console.log(ldh);
//构造函数创建对象
function Star(name, age) {
this.name = name;
this.age = age;
}
var ldh = new Star('刘德华', 18)//实例化对象
console.log(ldh);
Clase 2.2
- En ES6, el concepto de una clase se agregó recientemente. Puede usar la palabra clave class para declarar una clase y luego usar esta clase para crear una instancia de un objeto. Una clase abstrae la parte pública de un objeto. Generalmente se refiere a una determinada clase (clase). El objeto se refiere específicamente a una determinada, y un objeto concreto se instancia a través de la clase.
2.2.1 Crear una clase
- gramática:
//步骤1 使用class关键字
class name {
// class body
}
//步骤2使用定义的类创建实例 注意new关键字
var xx = new name();
- Ejemplo
// 1. 创建类 class 创建一个 明星类
class Star {
// 类的共有属性放到 constructor 里面
constructor(name, age) {
this.name = name;
this.age = age;
}
}
// 2. 利用类创建对象 new
var ldh = new Star('刘德华', 18);
console.log(ldh);
El resultado de ejecutar el código anterior:
A partir de los resultados, podemos ver que los resultados de la operación son los mismos que los del constructor.
2.2.2 Creación de clases para agregar atributos y métodos
// 1. 创建类 class 创建一个类
class Star {
// 类的共有属性放到 constructor 里面 constructor是 构造器或者构造函数
constructor(uname, age) {
this.uname = uname;
this.age = age;
}//------------------------------------------->注意,方法与方法之间不需要添加逗号
sing(song) {
console.log(this.uname + '唱' + song);
}
}
// 2. 利用类创建对象 new
var ldh = new Star('刘德华', 18);
console.log(ldh); // Star {uname: "刘德华", age: 18}
ldh.sing('冰雨'); // 刘德华唱冰雨
El resultado de ejecutar el código anterior:
Atención:
- Cree una clase a través de la palabra clave class, todavía definimos habitualmente la primera letra del nombre de la clase en mayúsculas
- Hay una función de constructor en la clase, que puede aceptar los parámetros pasados y devolver el objeto de instancia al mismo tiempo
- La función constructora llamará automáticamente a esta función siempre que new genere una instancia, si no escribimos esta función, la clase también generará automáticamente esta función.
- No es necesario agregar una coma entre varios métodos de función
- Generar instancia nueva no se puede omitir
- Especificación de sintaxis, no agregue paréntesis después del nombre de clase de la clase creada, agregue paréntesis después del nombre de la clase de instancia generada, y el constructor no necesita agregar función
2.2.3 Herencia de clases
- gramática
// 父类
class Father{
}
// 子类继承父类
class Son extends Father {
}
- Ejemplo
class Father {
constructor(surname) {
this.surname= surname;
}
say() {
console.log('你的姓是' + this.surname);
}
}
class Son extends Father{
// 这样子类就继承了父类的属性和方法
}
var damao= new Son('刘');
damao.say(); //结果为 你的姓是刘
El resultado de ejecutar el código anterior:
-
La subclase usa la palabra clave super para acceder al método de la clase principal
//定义了父类 class Father { constructor(x, y) { this.x = x; this.y = y; } sum() { console.log(this.x + this.y); } } //子元素继承父类 class Son extends Father { constructor(x, y) { super(x, y); //使用super调用了父类中的构造函数 } } var son = new Son(1, 2); son.sum(); //结果为3Nota:
-
En herencia, si crea una instancia de una subclase para generar un método, primero vea si la subclase tiene este método, y si hay uno, ejecute la subclase primero
-
En herencia, si no existe tal método en la subclase, busque si la clase principal tiene este método, si es así, ejecute el método de la clase principal (el principio de proximidad)
-
Si la subclase quiere heredar los métodos de la clase padre y al mismo tiempo extender sus propios métodos dentro de sí misma, use super para llamar al constructor de la clase padre, y super debe ser llamado antes que la subclase this.
// 父类有加法方法 class Father { constructor(x, y) { this.x = x; this.y = y; } sum() { console.log(this.x + this.y); } } // 子类继承父类加法方法 同时 扩展减法方法 class Son extends Father { constructor(x, y) { // 利用super 调用父类的构造函数 super 必须在子类this之前调用,放到this之后会报错 super(x, y); this.x = x; this.y = y; } subtract() { console.log(this.x - this.y); } } var son = new Son(5, 3); son.subtract(); //2 son.sum();//8El resultado de ejecutar el código anterior es:
-
-
Siempre preste atención al punto de esto, los atributos y métodos comunes en la clase deben usarse con esto.
- El esto en el constructor apunta al nuevo objeto de instancia
- Los métodos personalizados, generalmente también apuntan a nuevos objetos de instancia
- Después de vincular el evento, esto apunta a la fuente del evento que desencadenó el evento.
-
En ES6, la clase no tiene promoción variable, por lo que la clase debe definirse antes de que se pueda crear una instancia del objeto a través de la clase [Error en la transferencia de imagen de enlace externo, el sitio de origen puede tener un mecanismo de enlace antirrobo, se recomienda guardar el imagen y cárguela directamente (img-qBoIoO9X-1598259736549) (images / img2.png)]
3. Cambio de la barra de pestañas de la versión orientada a objetos
3.1 Requisitos funcionales
- Haga clic en la barra de pestañas para cambiar el efecto.
- Haga clic en el signo + para agregar elementos de pestaña y elementos de contenido.
- Haga clic en el número x para eliminar el elemento de la pestaña actual y el elemento de contenido.
- Haga doble clic en el texto del elemento de la pestaña o en el texto del elemento de contenido para modificar el contenido del texto dentro
3.2 Preparación del caso
- Obtener el elemento de título
- Obtener el elemento de contenido
- Obtenga el número x del botón eliminado
- Cree un nuevo archivo js, defina la clase, agregue los métodos de atributo requeridos (cambiar, eliminar, agregar, modificar)
- Siempre preste atención al punto de este
3.3 Interruptor
-
Vincule el evento de clic al título obtenido, muestre el área de contenido correspondiente y almacene el índice correspondiente
this.lis[i].index = i; this.lis[i].onclick = this.toggleTab; -
Utilice la exclusividad para realizar la exhibición de un solo elemento
toggleTab() { //将所有的标题与内容类样式全部移除 for (var i = 0; i < this.lis.length; i++) { this.lis[i].className = ''; this.sections[i].className = ''; } //为当前的标题添加激活样式 this.className = 'liactive'; //为当前的内容添加激活样式 that.sections[this.index].className = 'conactive'; }
3.4 añadir
-
Agregar botón + evento de clic de enlace
this.add.onclick = this.addTab; -
Realice la adición de título y contenido, y haga un buen trabajo de procesamiento exclusivo
addTab() { that.clearClass(); // (1) 创建li元素和section元素 var random = Math.random(); var li = '<li class="liactive"><span>新选项卡</span><span class="iconfont icon-guanbi"> </span></li>'; var section = '<section class="conactive">测试 ' + random + '</section>'; // (2) 把这两个元素追加到对应的父元素里面 that.ul.insertAdjacentHTML('beforeend', li); that.fsection.insertAdjacentHTML('beforeend', section); that.init(); }
3.5 eliminar
-
Vincular el evento de clic al botón eliminar x del elemento
this.remove[i].onclick = this.removeTab; -
Obtenga todo el elemento principal donde se encuentra el botón de eliminación en el que se hizo clic y elimine el título y el contenido correspondientes
removeTab(e) { e.stopPropagation(); // 阻止冒泡 防止触发li 的切换点击事件 var index = this.parentNode.index; console.log(index); // 根据索引号删除对应的li 和section remove()方法可以直接删除指定的元素 that.lis[index].remove(); that.sections[index].remove(); that.init(); // 当我们删除的不是选中状态的li 的时候,原来的选中状态li保持不变 if (document.querySelector('.liactive')) return; // 当我们删除了选中状态的这个li 的时候, 让它的前一个li 处于选定状态 index--; // 手动调用我们的点击事件 不需要鼠标触发 that.lis[index] && that.lis[index].click(); }
3.6 Editar
-
Vincular eventos de doble clic a elementos (título y contenido)
this.spans[i].ondblclick = this.editTab; this.sections[i].ondblclick = this.editTab; -
En el evento de doble clic, maneje el estado de selección de texto, modifique el nodo DOM interno y realice la transferencia de los valores antiguos y nuevos.
editTab() { var str = this.innerHTML; // 双击禁止选定文字 window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty(); // alert(11); this.innerHTML = '<input type="text" />'; var input = this.children[0]; input.value = str; input.select(); // 文本框里面的文字处于选定状态 // 当我们离开文本框就把文本框里面的值给span input.onblur = function() { this.parentNode.innerHTML = this.value; }; // 按下回车也可以把文本框里面的值给span input.onkeyup = function(e) { if (e.keyCode === 13) { // 手动调用表单失去焦点事件 不需要鼠标离开操作 this.blur(); } } }