introduzir
Este artigo apresenta principalmente o próximo artigo do padrão de criação de objetos. O uso de várias técnicas pode evitar erros ou escrever um código muito simplificado.
Padrão 6: Função Sintaxe Açúcar
Função Sintaxe Açúcar é uma extensão para adicionar rapidamente métodos (funções) a um objeto. Isso usa principalmente as características do protótipo. O código é relativamente simples. Vamos primeiro olhar para o código de implementação:
A cópia do código é a seguinte:
if (typeof function.prototype.method! == "function") {
Function.prototype.method = function (nome, implementação) {
this.prototype [nome] = implementação;
devolver isso;
};
}
Ao estender um objeto, você pode usá -lo assim:
A cópia do código é a seguinte:
var pessoa = função (nome) {
this.name = nome;
}
.method ('getName',
function () {
retornar este.name;
})
.method ('setName', function (nome) {
this.name = nome;
devolver isso;
});
Dessa forma, adicionamos dois métodos: GetName e SetName à função da pessoa. Em seguida, vamos verificar o resultado:
A cópia do código é a seguinte:
var a = nova pessoa ('adam');
console.log (a.getName ()); // 'Adam'
console.log (A.SetName ('Eve'). getName ()); // 'Véspera'
Padrão 7: Objeto constante
As constantes de objetos são a modalidade de vários métodos fornecidos por conjunto, get, ifFined em um objeto. Além disso, o método SET reterá apenas o primeiro conjunto de objetos, e a configuração posterior será inválida, o que alcançou o objetivo de que outras pessoas sejam incapazes de sobrecarregar. O código de implementação é o seguinte:
A cópia do código é a seguinte:
var constant = (function () {
var constantes = {},
OwnProp = object.prototype.HasownProperty,
// apenas esses três tipos de valores são permitidos
permitido = {
String: 1,
Número: 1,
Booleano: 1
},
prefixo = (math.random () + "_"). Slice (2);
retornar {
// Defina a propriedade com nome
SET: function (nome, valor) {
if (this.isdefined (nome)) {
retornar falso;
}
if (! OwnProp.Call (permitido, tipoof valor)) {
retornar falso;
}
Constantes [prefixo + nome] = value;
retornar true;
},
// determinar se existe um nome nomeado
ISDefined: function (nome) {
return thomeprop.call (constantes, prefixo + nome);
},
// Obtenha o atributo nomeado nome
Get: function (nome) {
if (this.isdefined (nome)) {
constantes de retorno [prefixo + nome];
}
retornar nulo;
}
};
} ());
O código de verificação é o seguinte:
A cópia do código é a seguinte:
// Verifique se existe
console.log (constant.isdefined ("maxwidth")); // false
// Definição
console.log (constant.set ("maxwidth", 480)); // verdadeiro
// reteste
console.log (constant.isdefined ("maxwidth")); // verdadeiro
// Tente redefinir
console.log (constant.set ("maxwidth", 320)); // false
// determinar se a definição original ainda existe
console.log (constant.get ("maxwidth")); // 480
Modo 8: Modo Sandbox
O modo Sandbox fornece um contexto separado para um ou mais módulos sem afetar o contexto de outros módulos. Por exemplo, existe uma caixa de areia com três métodos, DOM e AJAX. Se dois deles são chamados para formar um ambiente, não há interferência nos três ambientes. O código de implementação do Sandbox é o seguinte:
A cópia do código é a seguinte:
função sandbox () {
// Converter parâmetros em matriz
var args = array.prototype.slice.call (argumentos),
// O último parâmetro é o retorno de chamada
retorno de chamada = args.pop (),
// exceto para o último parâmetro, todos os outros módulos a serem selecionados
módulos = (args [0] && typeof args [0] === "string")? args: args [0],
eu;
// forçar o novo operador
if (! (esta instância de sandbox)) {
devolver nova sandbox (módulos, retorno de chamada);
}
// Adicione propriedades
this.a = 1;
this.b = 2;
// Adicione módulos a este objeto
// Se não houver módulo ou o parâmetro passado é "*", então todos os módulos são passados em
if (! módulos || módulos == '*') {
módulos = [];
para (i em sandbox.modules) {
if (sandbox.modules.hasownProperty (i)) {
modules.push (i);
}
}
}
// inicialize o módulo necessário
for (i = 0; i <modules.length; i += 1) {
Sandbox.modules [módulos [i]] (isto);
}
// Ligue para o retorno de chamada
retorno de chamada (isso);
}
// Adicione o objeto de protótipo por padrão
Sandbox.prototype = {
Nome: "meu aplicativo",
Versão: "1.0",
getName: function () {
retornar este.name;
}
};
Em seguida, definimos o módulo inicial padrão:
A cópia do código é a seguinte:
Sandbox.modules = {};
Sandbox.modules.dom = function (caixa) {
box.getElement = function () {
};
box.getStyle = function () {
};
box.foo = "bar";
};
Sandbox.modules.event = function (caixa) {
// Acesso ao protótipo Sandbox, se necessário:
// box.constructor.prototype.m = "mmmm";
box.attachevent = function () {
};
box.detachevent = function () {
};
};
Sandbox.modules.ajax = function (caixa) {
box.makerequest = function () {
};
box.getResponse = function () {
};
};
O método de chamada é o seguinte:
A cópia do código é a seguinte:
// Método de chamada
Sandbox (['Ajax', 'Event'], function (caixa) {
console.log (typeof (box.foo));
// não há seleção de DOM, então box.foo não existe
});
Sandbox ('Ajax', 'Dom', função (caixa) {
console.log (typeof (box.attachevent));
// Não há nenhum evento selecionado, então o Anexevent definido no evento também não existe
});
Sandbox ('*', função (caixa) {
console.log (caixa); // Todos os métodos definidos acima são acessíveis
});
Através de três métodos de chamada diferentes, podemos ver que o contexto dos três métodos é diferente. O primeiro não tem foo; O segundo não possui onedEvent, porque apenas Ajax e DOM são carregados, mas o evento não é carregado; o terceiro não carrega tudo.
Padrão 9: Membros estáticos
Os membros estáticos são apenas propriedades estáticas fornecidas por uma função ou objeto, que pode ser dividido em privado e público, assim como estático público e estático privado em C# ou Java.
Vamos primeiro olhar para os membros públicos. Os membros públicos são muito simples. Os métodos e funções que declaramos geralmente são públicos, como:
A cópia do código é a seguinte:
// construtor
var gadget = function () {
};
// Método estático público
Gadget.isshiny = function () {
retornar "você aposto";
};
// Método normal para adicionar o protótipo
Gadget.prototype.setprice = function (preço) {
this.price = preço;
};
// Ligue para os métodos estáticos
console.log (gadget.isshiny ()); // "você apostou"
// Crie uma instância e chame o 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 ()); // "você apostou"
Quanto aos membros estáticos privados, podemos usar seus recursos de fechamento para implementá -los. A seguir, são apresentados dois métodos de implementação.
O primeiro método de implementação:
A cópia do código é a seguinte:
var gadget = (function () {
// variáveis/propriedades estáticas
var contador = 0;
// O fechamento retorna uma nova implementação do construtor
Return function () {
console.log (contador += 1);
};
} ()); // execute imediatamente
var g1 = new gadget (); // logs 1
var g2 = novo gadget (); // Logs 2
var g3 = new gadget (); // Logs 3
Pode -se observar que, embora seja um novo objeto sempre, o número ainda está incrementado, alcançando o objetivo dos membros estáticos.
O segundo método:
A cópia do código é a seguinte:
var gadget = (function () {
// variáveis/propriedades estáticas
var contador = 0,
Newgadget;
// nova implementação do construtor
Newgadget = function () {
contador += 1;
};
// autoriza o acesso aos métodos
Newgadget.prototype.getLastid = function () {
contador de retorno;
};
// Substituir o construtor
retornar newgadget;
} ()); // execute imediatamente
var iPhone = new gadget ();
iPhone.getLastid (); // 1
var ipod = new gadget ();
ipod.getLastid (); // 2
var ipad = new gadget ();
ipad.getLastid (); // 3
O número também é incrementado, o que é alcançado usando o recurso de fechamento de seu método de autorização interna.
Resumir
Este é o próximo artigo do modo de criação de objetos. Os dois artigos juntos têm 9 padrões. Eles são os modos de criação de objetos que costumamos usar na programação diária de JavaScript. Cenários diferentes desempenham papéis diferentes. Espero que todos escolha o modo aplicável de acordo com suas respectivas necessidades.