js conjuntos de habilidades aplicación

directorio

1. decorador

1, decorador

/ **

sh22n: Autor
enlace: https://juejin.im/post/5e7822c3e51d4526f23a45ae
Fuente: Pepitas

* /

decorador de clase

Cuando decorativo, decorador método recibe generalmente un cierto tipo como un parámetro. Aquí es una propiedad estática para aumentar la clase de destino  test ejemplos:

const decoratorClass = (targetClass) => { 
    targetClass.test = '123' 
} 
@decoratorClass 
clase de prueba {} 
Test.test; // '123'

funciones de orden superior utilizando las propiedades, también pueden pasar parámetros al decorador, los parámetros para determinar qué clases de procesamiento.

const conlanguage = (idioma) => (targetClass) => { 
    targetClass.prototype.language = lengua; 
} 
@WithLanguage ( 'chino' ) 
de clase Estudiante { 
} 
estudiante const = nueva Estudiante (); 
student.language; // 'chino'

Atributos de clase decorador

Los atributos de clase se pueden utilizar en las propiedades decorativas de la clase, método, get/set función, típicamente tres parámetros:

1. objetivo : la clase modificada
2. nombrar a nombre de los miembros de la clase:
3. descriptor : descriptor atributo, el objeto pasará este parámetro Object.defineProperty

combinación decorativa

Si desea utilizar varios decoradores, entonces, ¿cómo hacerlo? Decorador se puede superponer, se realizan secuencialmente de acuerdo con la distancia desde la decorativo / atribuye a.

Persona de la clase { 
    @time 
    @log 
    por ejemplo () {} 
}

Ejemplos: estabilización de la imagen y el acelerador

const = aceleración (tiempo) => { 
    dejó prev = nueva fecha ();
    retorno (objetivo, nombre, descriptor) => { 
        const func = descriptor.value;
        si ( typeof func === 'función' ) { 
            descriptor.value = función (... args) { 
                const ahora = nueva fecha ();
                si (ahora - prev> espera) { 
                    fn.apply ( este , args); 
                    prev = nuevo Date ();
                }
            } 
        } 
    } 
} 

Clase App extiende React.Component { 
    componentDidMount () { 
        window.addEveneListener ( 'scroll', este .scroll); 
    } 
    ComponentWillUnmount () { 
        window.removeEveneListener ( 'scroll', este .scroll); 
    } 
    @Throttle ( 50 ) 
    de desplazamiento () {} 
}

antirrebote const = (tiempo) => { 
    dejar temporizador; 
    retorno (objetivo, nombre, descriptor) => { 
        const func = descriptor.value;
        si ( typeof func === 'función' ) { 
            descriptor.value = función (... args) {
                 si (temporizador) clearTimeout (temporizador) 
                temporizador = setTimeout (() => { 
                    fn.apply ( este , args) 
                } , espera) 
            } 
        } 
    } 
}