Nos idiomas tradicionais orientados a objetos, adicionar funções aos objetos geralmente usa herança, mas o método da herança pode trazer problemas: quando a classe pai mudar, todas as suas subclasses mudarão de acordo.
Quando um script JavaScript está em execução, adicionar comportamento em um objeto (ou em seu protótipo) afeta todas as instâncias desse objeto.
O decorador é uma alternativa para a implementação da herança, que adiciona novos recursos através da forma de métodos sobrecarregados. Esse padrão pode adicionar seu próprio comportamento antes ou depois do decorador para obter um objetivo específico.
O padrão do decorador é uma maneira de adicionar dinamicamente mais funções às funções existentes. Cada função a ser decorada é colocada em uma função separada e, em seguida, use essa função para envolver o objeto de função existente a ser decorado. Portanto, quando o comportamento especial precisa ser executado, o código de chamada pode usar seletiva e sequencialmente a função de decoração para envolver o objeto conforme necessário. A vantagem é que ele distingue as responsabilidades centrais da classe (função) da função decorativa.
Podemos definir funções de ferramentas da seguinte forma:
Function.prototype.before = function (anteriorfn) {var self = this; // Salvar a referência da função Função original () {// Retorna a função proxy que contém a nova função e a função original antes defn.Apply (this, argumentos); // Execute a nova função e garante que isso não seja sequestrado Return Self.Apply (isto, argumentos); // Execute a função original e retorne o resultado da execução da função original e verifique se isso não é sequestrado}}; Function.prototype.after = function (Afterfn) {var self = this; retornar function () {var ret = self.apply (this, argumentos); Afterfn.Apply (isto, argumentos); retornar retorno; }};Os parâmetros anteriores e depois estão aqui estão novas funções (adicione decoração) para estender novas funções para a função original. A única diferença entre eles é a ordem de execução diferente. Se você não deseja contaminar o protótipo da função, pode usar o seguinte método:
var antes = function (fn, anteriorfn) {return function () {anteriorfn.apply (this, argumentos); retornar fn.Apply (isto, argumentos); }}; var após = function (fn, Afterfn) {return function () {var ret = fn.apply (this, argumentos); Afterfn.Apply (isto, argumentos); retornar ret; }};Exemplo: coloque um parâmetro na solicitação HTTP para impedir ataques de CSRF
var ajax = function (tipo, url, param) {console.log (param); // Envie um pouco de código de solicitação AJAX um pouco ...}; var antes do FUNCHN = function (type, url, param) {param.token = 'token';}; ajax = ajax.be antes (antes do nome); ajax ('get', 'http: //.com/userinfo', {name: 'SufA' '}}}} 'Token'}Ao decorar dinamicamente os parâmetros do token para a função AJAX, em vez de modificar diretamente os parâmetros da função original, a função AJAX ainda é uma função pura, melhorando sua reutilização e pode ser usada diretamente em outros projetos sem modificações.
Exemplo: Verificação do formulário (separe a entrada de verificação do código enviado do formulário e, em seguida, decore dinamicamente a função de entrada de verificação antes do formulário enviado. Dessa maneira, podemos escrever a peça de entrada de verificação em um formulário de plug-in para uso em diferentes projetos)
// Verifique a função de entrada var validata = function () {if (userName.value === '') {alert ('nome de usuário não pode estar vazio'); retornar falso; } if (senha.value === '') {alert ('senha não pode estar vazia'); retornar falso; }}; // Função de envio do formulário var vir formsubMit = function () {var param = {nome de usuário: userName.Value, senha: senha.Value}; ajax ('http://xxx.com/login'.param);}; formsubMit = formsubMit.before (validata); submitbtn.onClick = function () {formsubMit ();};REFERÊNCIAS: "Javascript Pattern" "JavaScript Design Pattern and Development Practice"
O exposto acima é todo o conteúdo deste artigo. Espero que seja útil para o aprendizado de todos e espero que todos apoiem mais o wulin.com.