introduzir
Alguns dos modos que introduzimos neste artigo são chamados de modo de inicialização e modo de desempenho, que são usados principalmente para inicialização e melhoria de desempenho. Alguns modos já foram mencionados antes, então aqui está apenas um resumo.
Funções que são executadas imediatamente
No 4º capítulo desta série, "Expressões de funções chamadas agora", descrevemos funções semelhantes em detalhes. Aqui, apenas daremos dois exemplos simples para resumir.
A cópia do código é a seguinte:
// Depois de declarar a função, execute a função imediatamente
(function () {
console.log ('Cuidado!');
} ());
// As funções declaradas dessa maneira também podem ser executadas imediatamente
! function () {
console.log ('Cuidado!');
} ();
// O método a seguir também está ok
~ function () { / * code * /} ();
-function () { / * code * /} ();
+function () { / * code * /} ();
Inicialização imediatamente executada do objeto
Esse padrão significa que, quando um objeto é declarado (não uma função), um dos métodos no objeto será executado imediatamente para executar o trabalho de inicialização. Geralmente, esse padrão pode ser usado no código executado ao mesmo tempo.
A cópia do código é a seguinte:
({
// Aqui você pode definir constantes e definir outros valores
MaxWidth: 600,
MaxHeight: 400,
// é claro, você também pode definir métodos de utilitário
gimmemax: function () {
Retorne this.maxWidth + "X" + this.maxHeight;
},
// inicialização
init: function () {
console.log (this.gimmemax ());
// mais código ...
}
}). init (); // isso inicia a inicialização
Inicialização da ramificação
A inicialização da filial refere-se à inicialização de diferentes códigos de acordo com diferentes condições (cenários), que é a chamada atribuição de declaração condicional. Antes, quando estávamos fazendo processamento de eventos, geralmente usamos códigos como os seguintes:
A cópia do código é a seguinte:
var utils = {
addListener: function (el, tipo, fn) {
if (typeof window.addeventListener === 'function') {
el.addeventListener (tipo, fn, falso);
} else if (typeof document.attachevent! == 'indefinido') {
el.attachevent ('on' + tipo, fn);
} outro {
el ['on' + type] = fn;
}
},
Removelistener: function (el, tipo, fn) {
}
};
Vamos melhorá -lo. Primeiro, precisamos definir duas interfaces, uma para adicionar identificador de eventos e a outra para remover a alça de evento. O código é o seguinte:
A cópia do código é a seguinte:
var utils = {
addListener: null,
Removelistener: NULL
};
O código de implementação é o seguinte:
A cópia do código é a seguinte:
if (typeof window.addeventListener === 'function') {
utils.addlistener = função (el, tipo, fn) {
el.addeventListener (tipo, fn, falso);
};
} else if (typeof document.attachevent! == 'indefinido') {// ie
utils.addlistener = função (el, tipo, fn) {
el.attachevent ('on' + tipo, fn);
};
utils.removelistener = função (el, tipo, fn) {
el.detachevent ('on' + tipo, fn);
};
} else {// outros navegadores antigos
utils.addlistener = função (el, tipo, fn) {
el ['on' + type] = fn;
};
utils.removelistener = função (el, tipo, fn) {
el ['on' + type] = null;
};
}
Não é muito conveniente usar? O código é muito mais elegante.
Funções autodenomadas
Geralmente, o código da função de mesmo nome é reescrever dentro da função, como:
A cópia do código é a seguinte:
var scarem = function () {
alerta ("boo!");
scarme = function () {
alerta ("boo duplo!");
};
};
Esse tipo de código é muito confuso. Vamos primeiro olhar para os resultados da execução do exemplo:
A cópia do código é a seguinte:
// 1. Adicione novos atributos
scarme.property = "corretamente";
// 2. Scareme atribui um novo valor
var brincalhão = scarme;
// 3. Ligue como um método
var spooky = {
Boo: SCARME
};
// Ligue com um novo nome de variável
peça(); // "Vaia!"
peça(); // "Vaia!"
console.log (Prank.property); // "apropriadamente"
// Ligue usando o método
Spooky.boo (); // "Vaia!"
Spooky.boo (); // "Vaia!"
console.log (spooky.boo.property); // "apropriadamente"
Através do resultado da execução, pode -se descobrir que atribui a função a uma nova variável (ou método interno), o código não executa o código do SCARME sobrecarregado, e o exemplo a seguir é exatamente o oposto:
A cópia do código é a seguinte:
// Use funções autodeclaradas
scarme (); // boo duplo!
scarme (); // boo duplo!
console.log (scareme.property); // indefinido
Ao usar esse modelo, você deve ter muito cuidado, caso contrário, o resultado real pode ser diferente do resultado que você espera. Obviamente, você também pode usar este especial para fazer algumas operações especiais.
Otimização da memória
Esse padrão usa principalmente as características do atributo da função para evitar um grande número de cálculos repetidos. O formulário de código usual é o seguinte:
A cópia do código é a seguinte:
var myfunc = function (param) {
if (! myfunc.cache [param]) {
var resultado = {};
// ... operação complexa ...
myfunc.cache [param] = resultado;
}
retornar myfunc.cache [param];
};
// armazenamento de cache
myfunc.cache = {};
No entanto, há um problema com o código acima. Se o parâmetro passado for totring ou alguns métodos comuns semelhantes ao objeto, o problema ocorrerá. Neste momento, você precisa usar o lendário método HistownProperty, o código é o seguinte:
A cópia do código é a seguinte:
var myfunc = function (param) {
if (! myfunc.cache.hasownproperty (param)) {
var resultado = {};
// ... operação complexa ...
myfunc.cache [param] = resultado;
}
retornar myfunc.cache [param];
};
// armazenamento de cache
myfunc.cache = {};
Ou se você passar em vários parâmetros, poderá usar o método Stringify da JSON para produzir um valor de cachekey para armazenamento. O código é o seguinte:
A cópia do código é a seguinte:
var myfunc = function () {
var cachekey = json.stringify (array.prototype.slice.call (argumentos)),
resultado;
if (! myfunc.cache [cachekey]) {
resultado = {};
// ... operação complexa ...
myfunc.cache [cachekey] = resultado;
}
retornar myfunc.cache [cachekey];
};
// armazenamento de cache
myfunc.cache = {};
Ou vários parâmetros, você também pode usar o recurso Argumentos.Callee:
A cópia do código é a seguinte:
var myfunc = function (param) {
var f = argumentos.callee,
resultado;
if (! f.cache [param]) {
resultado = {};
// ... operação complexa ...
f.cache [param] = resultado;
}
retornar f.cache [param];
};
// armazenamento de cache
myfunc.cache = {};
Resumir
Não há necessidade de resumir, basta olhar para o código cuidadosamente