introducir
Este artículo presenta principalmente el próximo artículo del patrón de creación de objetos. El uso de varias técnicas puede evitar enormemente errores o escribir un código muy optimizado.
Patrón 6: Función de azúcar de sintaxis
El azúcar de sintaxis funcional es una extensión para agregar rápidamente métodos (funciones) a un objeto. Esto utiliza principalmente las características del prototipo. El código es relativamente simple. Veamos primero el código de implementación:
La copia del código es la siguiente:
if (typeof function.prototype.method! == "función") {
Function.prototype.method = function (nombre, implementación) {
this.prototype [nombre] = implementación;
devolver esto;
};
}
Al extender un objeto, puede usarlo así:
La copia del código es la siguiente:
var persona = function (nombre) {
this.name = name;
}
.method ('getName',
función () {
devolver esto.name;
})
.method ('setname', function (name) {
this.name = name;
devolver esto;
});
De esta manera, agregamos dos métodos: GetName y Setname a la función de la persona. A continuación, verifiquemos el resultado:
La copia del código es la siguiente:
var a = nueva persona ('Adam');
console.log (a.getName ()); // 'Adam'
console.log (a.setName ('eve'). getName ()); // 'Víspera'
Patrón 7: Constante de objeto
Las constantes de objetos son la realización de varios métodos proporcionados por Set, Get, IfDefined en un objeto. Además, el método establecido solo conservará el primer conjunto de objetos, y la configuración posterior no será válida, lo que ha logrado el propósito de que otros no puedan sobrecargar. El código de implementación es el siguiente:
La copia del código es la siguiente:
var constant = (function () {
var constantes = {},
OwnProp = Object.Prototype.HasownProperty,
// Solo se permiten estos tres tipos de valores
permitido = {
Cadena: 1,
Número: 1,
booleano: 1
},
prefix = (math.random () + "_"). slice (2);
devolver {
// Establecer la propiedad con el nombre del nombre
establecer: function (nombre, valor) {
if (this.isDefined (name)) {
devolver falso;
}
if (! OwnProp.call (permitido, typyOf Value)) {
devolver falso;
}
constantes [prefijo + nombre] = valor;
devolver verdadero;
},
// Determinar si hay una propiedad llamada Nombre
isDefined: function (nombre) {
return otherProp.call (constantes, prefijo + nombre);
},
// Obtenga el atributo llamado Nombre
get: function (nombre) {
if (this.isDefined (name)) {
return constantes [prefijo + nombre];
}
regresar nulo;
}
};
} ());
El código de verificación es el siguiente:
La copia del código es la siguiente:
// Verifique si existe
console.log (constant.isdefined ("maxwidth")); // FALSO
// Definición
console.log (constant.set ("maxwidth", 480)); // verdadero
// volver a probar
console.log (constant.isdefined ("maxwidth")); // verdadero
// Intenta redefinir
console.log (constant.set ("maxwidth", 320)); // FALSO
// Determinar si la definición original todavía existe
console.log (constant.get ("maxwidth")); // 480
Modo 8: Modo Sandbox
El modo Sandbox proporciona un contexto separado para uno o más módulos sin afectar el contexto de otros módulos. Por ejemplo, hay una caja de arena con un evento de tres métodos, DOM y AJAX. Si dos de ellos están llamados a formar un entorno, no hay interferencia con los tres entornos. El código de implementación de Sandbox es el siguiente:
La copia del código es la siguiente:
función sandbox () {
// Convertir los parámetros en matriz
var args = array.prototype.slice.call (argumentos),
// El último parámetro es la devolución de llamada
callback = args.pop (),
// excepto para el último parámetro, todos los demás módulos se seleccionarán
módulos = (args [0] && typeof args [0] === "cadena")? Args: Args [0],
i;
// forzar al nuevo operador
if (! (esta instancia de sandbox)) {
devolver nuevo sandbox (módulos, devolución de llamada);
}
// Agregar propiedades
esto.a = 1;
this.b = 2;
// Agregar módulos a este objeto
// Si no hay módulo o el parámetro pasado es "*", entonces todos los módulos se pasan en
if (! módulos || módulos == '*') {
módulos = [];
para (i en sandbox.modules) {
if (sandbox.modules.hasownproperty (i)) {
módulos.push (i);
}
}
}
// Inicializar el módulo requerido
para (i = 0; i <modules.length; i += 1) {
Sandbox.modules [módulos [i]] (esto);
}
// devolución de llamada
devolución de llamada (esto);
}
// Agregar objeto prototipo de forma predeterminada
Sandbox.prototype = {
Nombre: "Mi aplicación",
Versión: "1.0",
getName: function () {
devolver esto.name;
}
};
Luego definimos el módulo inicial predeterminado:
La copia del código es la siguiente:
Sandbox.modules = {};
Sandbox.modules.dom = function (box) {
box.getElement = function () {
};
box.getStyle = function () {
};
box.foo = "bar";
};
Sandbox.modules.event = function (box) {
// Acceso al prototipo de sandbox si es necesario:
// box.constructor.prototype.m = "mmmm";
box.attachevent = function () {
};
box.detacheVent = function () {
};
};
Sandbox.modules.AJAX = function (box) {
box.makerequest = function () {
};
box.getResponse = function () {
};
};
El método de llamada es el siguiente:
La copia del código es la siguiente:
// Método de llamada
Sandbox (['Ajax', 'Event'], function (Box) {
console.log (typeof (box.foo));
// No hay selección DOM, por lo que Box.foo no existe
});
Sandbox ('ajax', 'dom', function (box) {
console.log (typeof (box.attachevent));
// No hay ningún evento seleccionado, por lo que el evento adjunto definido en el evento tampoco existe
});
Sandbox ('*', function (box) {
console.log (caja); // Todos los métodos definidos anteriormente son accesibles
});
A través de tres métodos de llamadas diferentes, podemos ver que el contexto de los tres métodos es diferente. El primero no tiene foo; El segundo no tiene adjunta, porque solo Ajax y DOM están cargados, pero el evento no está cargado; El tercero no carga todo.
Patrón 9: miembros estáticos
Los miembros estáticos son solo propiedades estáticas proporcionadas por una función u objeto, que se pueden dividir en privado y público, al igual que la estática pública y privada estática en C# o Java.
Primero veamos a los miembros públicos. Los miembros públicos son muy simples. Los métodos y funciones que declaramos generalmente son públicos, como:
La copia del código es la siguiente:
// constructor
var gadget = function () {
};
// método estático público
Gadget.isshiny = function () {
devolver "eres apuesto";
};
// Método normal para agregar el prototipo
Gadget.prototype.setprice = function (precio) {
this.price = precio;
};
// llamar a métodos estáticos
console.log (gadget.isshiny ()); // "APUESTAS"
// crear una instancia y llamar al método
var iPhone = new Gadget ();
iPhone.setPrice (500);
console.log (typeof gadget.setPrice); // "indefinido"
console.log (typeof iPhone.isshiny); // "indefinido"
Gadget.prototype.isshiny = gadget.isshiny;
console.log (iPhone.isshiny ()); // "APUESTAS"
En cuanto a los miembros estáticos privados, podemos usar sus características de cierre para implementarlas. Los siguientes son dos métodos de implementación.
El primer método de implementación:
La copia del código es la siguiente:
var gadget = (function () {
// Variables/propiedades estáticas
Var contador = 0;
// El cierre devuelve una nueva implementación del constructor
Función de retorno () {
console.log (contador += 1);
};
} ()); // ejecutar inmediatamente
var g1 = new Gadget (); // registros 1
var g2 = new Gadget (); // registros 2
var g3 = new Gadget (); // registros 3
Se puede ver que, aunque es un objeto nuevo cada vez, el número aún se incrementa, logrando el propósito de los miembros estáticos.
El segundo método:
La copia del código es la siguiente:
var gadget = (function () {
// Variables/propiedades estáticas
Var contador = 0,
Newgadget;
// Implementación de nuevo constructor
Newgadget = function () {
contador += 1;
};
// autorizar el acceso a los métodos
Newgadget.prototype.getLastid = function () {
contador de regreso;
};
// Constructor de sobrescribencia
devolver newgadget;
} ()); // ejecutar inmediatamente
var iPhone = new Gadget ();
iPhone.getLastid (); // 1
var iPod = new Gadget ();
ipod.getLastid (); // 2
var iPad = new Gadget ();
ipad.getLastid (); // 3
El número también se incrementa, que se logra utilizando la función de cierre de su método de autorización interna.
Resumir
Este es el próximo artículo del modo de creación de objetos. Los dos artículos juntos tienen 9 patrones. Son los modos de creación de objetos que a menudo usamos en la programación diaria de JavaScript. Diferentes escenarios juegan diferentes roles. Espero que todos elijan el modo aplicable de acuerdo con sus respectivas necesidades.