En los idiomas tradicionales orientados a objetos, agregar funciones a los objetos a menudo usa herencia, pero el método de herencia puede traer problemas: cuando la clase principal cambia, todas sus subclases cambiarán en consecuencia.
Cuando se ejecuta un script JavaScript, agregar comportamiento en un objeto (o en su prototipo) afecta todas las instancias de ese objeto.
El decorador es una alternativa a la implementación de la herencia, que agrega nuevas características a través de la forma de métodos sobrecargados. Este patrón puede agregar su propio comportamiento antes o después del decorador para lograr un propósito específico.
El patrón del decorador es una forma de agregar dinámicamente más funciones a las funciones existentes. Cada función que se decorará se coloca en una función separada, y luego usa esta función para envolver el objeto de función existente para decorar. Por lo tanto, cuando se necesita realizar un comportamiento especial, el código de llamada puede usar de forma selectiva y secuencial la función de decoración para envolver el objeto según sea necesario. La ventaja es que distingue las responsabilidades centrales de la clase (función) de la función decorativa.
Podemos definir las funciones de la herramienta de la siguiente manera:
Function.prototype.before = function (antes de fn) {var self = this; // Guardar la referencia de la función de retorno de la función original () {// Devuelve la función proxy que contiene la nueva función y la función original antes de la aplicación (this, argumentos); // ejecutar la nueva función y asegurarse de que esto no sea secuestrado return self.apply (esto, argumentos); // Ejecutar la función original y devolver el resultado de ejecución de la función original y asegurarse de que esto no esté secuestrado}}; Function.prototype.after = function (afterfn) {var self = this; function de return () {var ret = self.apply (this, argumentos); Afterfn.apply (esto, argumentos); regreso de regreso; }};Los parámetros antes de Fn y Afterfn aquí son nuevas funciones (Agregar decoración) para extender nuevas funciones para la función original. La única diferencia entre ellos es la orden de ejecución diferente. Si no desea contaminar el prototipo de la función, puede usar el siguiente método:
var antes = function (fn, antes de fn) {return function () {antes de fn.apply (this, argumentos); devolver fn.apply (esto, argumentos); }}; var después = function (fn, afterfn) {return function () {var ret = fn.apply (this, argumentos); Afterfn.apply (esto, argumentos); regresar ret; }};Ejemplo: coloque un parámetro en la solicitud HTTP para evitar ataques CSRF
var ajax = function (type, url, param) {console.log (param); // Envía un código de solicitud AJAX un poco ...}; var antes de fn = function (type, url, param) {param.token = 'token';}; ajax = ajax.bebore (antes de lo anterior); ajax ('get', 'http: //...com/UserInfo', {name: 'Sufa'});//{name: 'SUMFA: ToKen: toKen: 'Token'}Al decorar dinámicamente los parámetros de token a la función AJAX, en lugar de modificar directamente los parámetros en la función original, la función AJAX sigue siendo una función pura, mejorando su reutilización, y puede usarse directamente en otros proyectos sin ninguna modificación.
Ejemplo: Verificación del formulario (separe la entrada de verificación del código enviado por el formulario y luego decore dinámicamente la función de entrada de verificación antes del formulario enviado. De esta manera, podemos escribir la parte de entrada de verificación en un formulario de complemento para su uso en diferentes proyectos)
// verificar la función de entrada var validata = function () {if (username.value ==== '') {alert ('UserName no se puede vaciar'); devolver falso; } if (contraseña.value === '') {alert ('la contraseña no se puede vaciar'); devolver falso; }}; // Función de envío de formulario var FormSubMit = function () {var param = {username: username.value, contraseña: contraseña.value}; Ajax ('http://xxx.com/login',param);}; formsubMit = formsubmit.before (validata); subsitbtn.onclick = function () {formsubmit ();};Referencias: "Patrón de JavaScript" "JavaScript Patrón de diseño y práctica de desarrollo"
Lo anterior es todo el contenido de este artículo. Espero que sea útil para el aprendizaje de todos y espero que todos apoyen más a Wulin.com.