Texto original em inglês: As sete regras do JavaScript discreto
Endereço original: http://icant.co.uk/articles/seven-rules-of-unobtrusive-javascript/
Autor original: Chris Heilmann
Endereço de tradução: http://www.zhuoqun.net/html/y2008/1103.html
Escrito na frente: Quando Kejun estava nos treinando JavaScript há algum tempo, ele recomendou muitos artigos clássicos nos slides, incluindo este Um artigo. Sinto-me muito bem depois de lê-lo, mas muitas vezes não entendo profundamente os artigos. Acontece que não encontrei uma versão chinesa deste artigo, então tive a ideia de traduzi-lo. que eu possa compartilhá-lo e aprofundar minha compreensão. O autor deste artigo, Chris Heilmann, é um engenheiro britânico do Yahoo! (uma figura de "padrinho" segundo Kejun), e a tradução deste artigo também foi aprovada por ele.
Mais uma coisa aqui, eu já traduzi muita coisa antes, mas naquela época eu estava traduzindo mais por tradução, e não entendia muitos artigos técnicos, então ainda sou tradutor até agora. Continuarei traduzindo alguns artigos no futuro, mas só devo traduzir artigos clássicos que precisam ser entendidos com atenção. Se você tiver tempo, ainda deverá escrever mais código. A prática é o caminho a seguir.
Tradução da terminologia: Em relação ao termo "JavaScript discreto", não consigo pensar em uma tradução particularmente apropriada. Depois de pesquisar na Internet, descobri que alguns foram traduzidos como "JavaScript discreto", alguns foram traduzidos como "JavaScript não intrusivo" e alguns em Taiwan foram traduzidos como "JavaScript não intrusivo"... Depois de muitas pesquisas, Decidi usar "sem JavaScript intrusivo". Esta tradução é "JavaScript intrusivo" (embora isso ainda não me agrade), consulte este artigo para obter detalhes. Na verdade, "JavaScript discreto" contém muitos significados e é difícil resumi-lo em uma palavra. Se estiver interessado, você pode dar uma olhada na explicação de "JavaScript discreto" na Wikipedia. Além disso, acho que a tradução é para expressar o que o autor quis dizer e não precisa necessariamente ser traduzida palavra por palavra. Portanto, para facilitar a compreensão do leitor, excluí alguns e adicionei alguns no artigo, mas estes são. sem danificar o significado do texto original realizado em uma base.
Há outro ponto a ser observado, ou seja, minhas habilidades de tradução são muito amadoras, então é provável que haja erros na tradução, então, por favor, corrija-me.
Depois de anos desenvolvendo, ensinando e escrevendo JavaScript discreto, descobri as seguintes diretrizes. Espero que eles ajudem você a entender um pouco por que é melhor projetar e executar JavaScript dessa maneira. Essas regras me ajudaram a entregar produtos com mais rapidez, qualidade e manutenção mais fáceis.
1. Não faça suposições (JavaScript não é um assistente confiável)
Talvez a característica mais importante do JavaScript discreto seja que você precisa parar de fazer suposições:
não presuma que o JavaScript está disponível, é melhor pensar que é possível. indisponível em vez de depender diretamente dele.
Não presuma que o navegador oferece suporte a métodos e propriedades até que você os teste e confirme que funcionam.
Não presuma que o código HTML está tão correto quanto você pensa, verifique-o sempre e não faça nada se não estiver disponível.
Torne a função do JavaScript independente dos dispositivos de entrada Lembre-se de que outros scripts podem afetar a funcionalidade do seu JavaScript, portanto, certifique-se de que o escopo dos seus scripts seja o mais seguro possível.
Antes de começar a projetar seu script, a primeira coisa a considerar é verificar o código HTML para o qual você irá criar o script e ver se há algo que possa ajudá-lo a atingir seu objetivo.
2. Encontre ganchos e relacionamentos de nós (HTML é a base do script)
Antes de começar a escrever scripts, dê uma olhada no HTML para o qual deseja escrever JavaScript. Se o HTML for desorganizado ou desconhecido, é quase impossível ter uma boa solução de script - é provável que você crie muita marcação em JavaScript ou o aplicativo fique muito dependente de JavaScript.
Há algumas coisas a serem consideradas em HTML: ganchos e relacionamentos de nós.
<1>.HTML hook
O gancho original e mais importante do HTML é o ID, e o ID pode ser acessado através do método DOM mais rápido - getElementById. Se todos os IDs em um documento HTML válido forem únicos (há um bug no IE em relação ao nome e ao ID, mas algumas boas bibliotecas resolvem esse problema), o uso de IDs é seguro, confiável e fácil de testar.
Alguns outros ganchos são elementos HTML e classes CSS podem ser acessados através do método getElementsByTagName, mas classes CSS não podem ser acessadas através de métodos DOM nativos na maioria dos navegadores. No entanto, existem muitas bibliotecas de classes externas que fornecem métodos que podem acessar nomes de classes CSS (semelhantes a getElementsByClassName).
<2>Relacionamento de nós HTML
Outro ponto interessante sobre HTML é o relacionamento entre tags Pense na seguinte questão:
Como podemos alcançar o nó alvo mais facilmente e com o mínimo de travessia do DOM?
Ao modificar qual marca, podemos acessar tantos nós filhos quanto possível que precisam ser modificados?
Quais atributos ou informações um determinado elemento possui que podem ser usados para alcançar outro elemento?
Atravessar o DOM consome muitos recursos e é lento, por isso você deve tentar usar técnicas já utilizadas em navegadores para fazer isso.
3. Deixe a travessia para os especialistas (CSS, atravesse o DOM mais rapidamente).
Criar scripts no DOM e usar métodos ou propriedades (getElementsByTagName, nextSibling, previousSibling, parentNode e outros) para percorrer o DOM parece confundir muitas pessoas. . interessante. O interessante é que já fizemos essas coisas através de outra tecnologia – CSS.
CSS é uma técnica que usa seletores CSS para acessar elementos alvo e alterar suas propriedades visuais atravessando o DOM. Uma parte complexa de JavaScript usando o DOM pode ser substituída por um seletor CSS:
var n = document.getElementById('nav');
se(n){
var as = n.getElementsByTagName('a');
if(as.comprimento > 0){
for(var i=0;as[i];i++){
como[i].style.color = '#369′;
as[i].style.textDecoration = 'none';
}
}
}
/* O código a seguir tem a mesma função que o acima*/
#nav a{
cor:#369;
decoração de texto: nenhum;
}
Esta é uma técnica muito poderosa que pode ser bem utilizada. Você pode conseguir isso adicionando classes dinamicamente a elementos de alto nível no DOM ou alterando o ID do elemento. Se você usar o DOM para adicionar uma classe CSS ao corpo do documento, os designers poderão definir facilmente versões estáticas e dinâmicas do documento.
JavaScript:
var dynamicClass = 'js';
var b = documento.corpo;
b.className = b.className ? b.className + 'js' : 'js';
CSS:
/* Versão estática*/
#nav {
....
}
/* Versão dinâmica*/
body.js #nav {
....
}
4. Compreender navegadores e usuários (e construir o que você precisa com base nos padrões de uso existentes)
Uma grande parte do JavaScript discreto é entender como os navegadores funcionam (especialmente como os navegadores travam) e o que os usuários esperam. Independentemente do navegador, você pode criar facilmente uma interface completamente diferente usando JavaScript. Interfaces de arrastar e soltar, áreas dobráveis, barras de rolagem e controles deslizantes podem ser criados usando JavaScript, mas esse problema não é uma questão técnica simples. Você precisa pensar nas seguintes questões:
Essa nova interface pode ser independente de dispositivos de entrada? Se não, em que você pode confiar?
A nova interface que criei segue as diretrizes de um navegador ou outra interface rica (você pode alternar entre menus de vários níveis diretamente com o mouse? Ou precisa usar a tecla Tab?)
Que funcionalidade preciso fornecer que depende de JavaScript?
A última pergunta não é realmente um problema porque você pode usar o DOM para criar HTML do nada, se necessário. Um exemplo disso é um link "imprimir". Como os navegadores não fornecem uma funcionalidade não-JavaScript para imprimir um documento, você precisa usar o DOM para criar esses links. O mesmo se aplica a uma barra de título clicável que implementa módulos de expansão e recolhimento de conteúdo. A barra de título não pode ser ativada pelo teclado, mas os links podem. Portanto, para criar uma barra de título clicável, você precisa adicionar o link usando JavaScript e, então, todos os usuários com teclado poderão recolher e expandir o módulo de conteúdo.
Um excelente recurso para resolver esse tipo de problema é a Design Pattern Library. Quanto a saber quais coisas no navegador independem dos dispositivos de entrada, depende do acúmulo de experiência. A primeira coisa que você precisa entender é o mecanismo de manipulação de eventos.
5. Compreenda os eventos (o tratamento de eventos causa mudanças)
O tratamento de eventos é o segundo passo para um JavaScript discreto. O objetivo não é tornar tudo arrastável, clicável ou adicionar manipulação inline a eles, mas entender que a manipulação de eventos é algo que pode ser completamente separado. Separamos HTML, CSS e JavaScript, mas não fomos muito longe na separação do tratamento de eventos.
O manipulador de eventos monitorará as alterações que ocorrem nos elementos do documento. Se ocorrer um evento, o manipulador encontrará um objeto maravilhoso (geralmente um parâmetro chamado e). .
O que é realmente interessante sobre a maior parte do tratamento de eventos é que isso não acontece apenas no elemento que você deseja acessar, mas em todos os elementos superiores no DOM (mas nem todos os eventos são assim, foco e A exceção é o evento blur) . Por exemplo, você pode usar esse recurso para adicionar apenas um manipulador de eventos a uma lista de navegação e usar o método manipulador de eventos para obter o elemento que realmente acionou o evento. Essa técnica é chamada de delegação de eventos e tem várias vantagens:
você só precisa verificar se um elemento existe, em vez de verificar cada elemento. Você pode adicionar ou remover nós filhos dinamicamente sem remover o manipulador de eventos correspondente. ao responder ao mesmo evento em elementos diferentes é que você pode impedir a propagação do evento para o elemento pai e pode substituir o comportamento padrão dos elementos HTML (como links). No entanto, às vezes isso não é uma boa ideia porque os navegadores dão aos elementos HTML os comportamentos que eles fazem por um motivo. Por exemplo, os links podem apontar para um alvo dentro da página, e deixá-los inalterados garante que o usuário também possa marcar o estado atual do script da página.
6. Pense em outros (namespaces, escopos e esquemas).
Seu código quase nunca será o único código de script em um documento. Portanto, é particularmente importante garantir que não existam funções globais ou variáveis globais em seu código que outros scripts possam substituir. Existem vários padrões disponíveis para evitar esse problema, o mais básico deles é usar a palavra-chave var para inicializar todas as variáveis. Suponha que escrevemos o seguinte script:
var nav = document.getElementById('nav');
função inicialização(){
//fazer coisas
}
função mostrar(){
//fazer coisas
}
função redefinir(){
//fazer coisas
}
O código acima contém uma variável global chamada nav e três funções chamadas init, show e reset. Essas funções podem acessar a variável nav e podem acessar umas às outras através do nome da função:
var nav = document.getElementById('nav');
função inicialização(){
mostrar();
if(nav.className === 'mostrar'){
reiniciar();
}
//fazer coisas
}
função mostrar(){
var c = nav.className;
//fazer coisas
}
função redefinir(){
//fazer coisas
}
Você pode evitar a codificação global acima encapsulando o código em um objeto, de modo que as funções possam ser transformadas em métodos no objeto e as variáveis globais possam ser transformadas em propriedades no objeto. Você precisa usar o método "nome + dois pontos" para definir métodos e propriedades e adicionar uma vírgula como separador após cada propriedade ou método.
var meuScript = {
nav:document.getElementById('nav'),
inicialização:função(){
//fazer coisas
},
mostrar:função(){
//fazer coisas
},
redefinir:função(){
//fazer coisas
}
}
Todos os métodos e propriedades podem ser acessados externa e internamente usando o "nome da classe + operador ponto".
var meuScript = {
nav:document.getElementById('nav'),
inicialização:função(){
meuScript.show();
if(myScript.nav.className === 'mostrar'){
meuScript.reset();
}
//fazer coisas
},
mostrar:função(){
var c = meuScript.nav.className;
//fazer coisas
},
redefinir:função(){
//fazer coisas
}
}
A desvantagem deste modelo é que toda vez que você acessa outros métodos ou propriedades de um método, você deve adicionar o nome do objeto na frente, e tudo no objeto pode ser acessado de fora. Se você deseja apenas que algum código seja acessível a outros scripts no documento, considere o seguinte padrão de módulo:
var meuScript = function(){
//Estes são métodos e propriedades privadas
var nav = document.getElementById('nav');
função inicialização(){
//fazer coisas
}
função mostrar(){
//fazer coisas
}
função redefinir(){
//fazer coisas
}
//Os métodos e propriedades públicas são agrupados na instrução return usando a sintaxe do objeto
retornar {
público:função(){
},
foo:'barra'
}
}();
Você pode acessar as propriedades e métodos públicos retornados da mesma forma que o código anterior, neste caso: myScript.public() e myScript.foo. Mas há outro ponto desconfortável aqui: quando você quiser acessar um método público de fora ou de um método privado de dentro, você ainda terá que escrever um nome longo (o nome do objeto pode ser muito longo). Para evitar isso, você precisa defini-los como privados e retornar apenas um alias na instrução return:
var meuScript = function(){
// Estes são métodos e propriedades privadas
var nav = document.getElementById('nav');
função inicialização(){
//fazer coisas
}
função mostrar(){
//fazer coisas
//fazer coisas
}
função redefinir(){
//fazer coisas
}
var foo = 'barra';
function public(){
}
//Retorna apenas ponteiros para os métodos e propriedades privadas que você deseja acessar
retornar {
público: público,
foo:foo
}
}();
Isso garante um estilo de código consistente e permite usar aliases mais curtos para acessar métodos ou propriedades.
Se você não quiser expor nenhum método ou propriedade ao mundo exterior, você pode encapsular todo o código em um método anônimo e executá-lo imediatamente após sua definição:
(function(){
// estes são todos métodos e propriedades privadas
var nav = document.getElementById('nav');
função inicialização(){
//fazer coisas
show(); // Nenhum prefixo do nome da classe é necessário aqui
}
função mostrar(){
//fazer coisas
}
função redefinir(){
//fazer coisas
}
})();
Esse padrão é ótimo para módulos de código que são executados apenas uma vez e não dependem de outras funções.
Seguindo as regras acima, seu código funcionará melhor para os usuários e funcionará melhor em máquinas e se dará melhor com o código de outros desenvolvedores. No entanto, há um grupo que precisa ser levado em consideração.
7. Considere os desenvolvedores que assumirão o controle do seu código (facilita a manutenção).
A etapa final para tornar o seu script realmente discreto é verificá-lo novamente depois de escrevê-lo e cuidar dos desenvolvedores que assumirão o controle do seu código assim que o o roteiro vai ao ar. Considere as seguintes questões:
Todos os nomes de variáveis e funções são sensatos e fáceis de entender?
O código está devidamente organizado? Flui suavemente do início ao fim?
Todas as dependências são óbvias?
Foram adicionados comentários sempre que possível que possam causar confusão?
O mais importante a se observar é: perceba que o código HTML e CSS do documento tem maior probabilidade de ser alterado do que o JavaScript (porque são responsáveis pelo efeito visual). Portanto, não inclua nenhuma classe e ID que possa ser visto pelos usuários finais no código do script, mas separe-os em um objeto que contenha informações de configuração.
meuscript = function(){
var configuração = {
ID de navegação:'nav',
visívelClass:'show'
};
var nav = document.getElementById(config.navigationID);
função inicialização(){
mostrar();
if(nav.className === config.visibleClass){
reiniciar();
};
//fazer coisas
};
função mostrar(){
var c = nav.className;
//fazer coisas
};
função redefinir(){
//fazer coisas
};
}();
Dessa forma o mantenedor sabe onde modificar essas propriedades sem precisar alterar outro código.
Mais informações
Essas são as sete diretrizes que descobri. Se você quiser saber mais sobre os tópicos discutidos acima, verifique os seguintes links: