Cinco ou menos dicas para escrever um bom JavaScript? [fechadas]

JavaScript tornou-se obviamente indispensável; no entanto, ainda sou novo e achei difícil combater a sensação de que parece uma bagunça e não quero lidar com isso agora. Aprendi muito mais outras línguas além do JavaScript, porque não consigo entender esse medo. Tenho a sensação de que, quando estou escrevendo JavaScript, estou tentando pintar um retrato de filhotes de Weimaraner.

Geralmente, me ajuda a ter em mente algumas das diretrizes mais importantes que posso me perguntar a cada movimento que faço. (Na minha opinião, um punhado tem cinco ou menos.)

Você pode listar cinco (ou menos) perguntas específicas ao JavaScript que devo fazer a cada movimento que faço quando codifico o JavaScript? O que eles seriam?

Atualização: para esclarecer, não estou pedindo cinco coisas para ter em mente ao aprender JavaScript; Estou pedindo cinco perguntas para sempre me perguntar a seguir em frente, que todos deveriam sempre perguntar. Perguntas de alto nível, como: "É provável que eu repita isso em outro lugar?" ou "esse nome de variável / função é específico o suficiente (ou muito específico)" <== exceto que estas questões de exemplo não são peculiares ao JavaScript. Estou procurando diretivas peculiares ao JavaScript.

Vou responder isso em duas partes. Uma é "Cinco ou menos dicas para aprender a escrever um bom JavaScript". A outra é "Cinco ou menos dicas para escrever um bom JavaScript".

Aprendendo:

1. Pergunte
2. Ouço
3. Ler
4. Make Stuff

Fazendo:

1. Evitar globais (modularizar)
2. Faça coisas difíceis fora dos loops (seleção DOM, declarações de função, etc.)
3. Saiba como o escopo funciona
4. Saiba quando e como usar os fechamentos
5. Saiba como funciona o JS orientado a objetos

EDIT (adicionando perguntas para estar em conformidade com o PO):

Que escopo estou referenciando?

Isso deve ajudar com globais vazados, manipuladores de eventos e quando usar fechamentos.

Estou me repetindo?

A abstração e o uso adequados das técnicas OO são importantes. Use-os com sabedoria.

Meu código está se repetindo?

É extremamente fácil encontrar-se colocando o acesso DOM em um loop ou criando funções (anônimas ou não) em um loop. Observe que isso pode ser verdade no código que usa setTimeoutou setIntervalnos loops tradicionais.

Isso significa o que eu acho que significa?

Valores verdadeiros e falsos em JS podem ser um pouco complicados, especialmente quando se usa comparações não estritas ( ==em oposição a ===). Digitação dinâmica, coerção de tipo e se você está fazendo referência a objetos ou literais também podem ser relevantes.

Primeiro, saiba como a tecnologia por trás disso funciona.

Você precisa saber disso porque o conhecimento por trás de como isso funciona, porque você vai se deparar com problemas de rede ou, como já vi inúmeras vezes, pessoas totalmente fracassadas em entender o que é realmente o lado do servidor e o cliente. Uma das perguntas newb mais comuns que vejo é "Como posso fazer o JS alterar uma variável no meu código ASP ?!"

• Você entende ethernet / wifi e TCP / IP para ter uma idéia geral do que está acontecendo?
• Quanto HTTP você realmente sabe?
• Você realmente recebe HTML? Claro, você pode saber como as tags funcionam e aninham coisas, mas você realmente entende o modo doctype e peculiaridades? Você entende que não deve colocar tags de parágrafo em torno de um elemento da lista?
• Invente o JavaScript (e explique que pode ser executado no lado do servidor). ecmascript, livescript, mocascript, jsscript, nó ...
• Aprenda a API do Windows, a API do DOM e a API XHR. Se você não conhece essas três coisas, não tem como escrever código comercial para o navegador.

Entenda que seu código é maior que você ou sua situação específica

• Claro, você escreveu algo, mas todos podem ver. É tudo fonte "aberta". Claro, você pode ofuscar, minifiá-lo, o que for ... no final do dia, se eu quiser ver seu código, é trivial para mim derrotar quaisquer métodos que você colocar em prática.
• Você precisa entender as diferenças de vários navegadores. Segmente os mais populares ou os que o seu mercado demográfico possui. Por exemplo, ie6 não renderiza elementos da célula da tabela DOM se você anexarChild em vez dos métodos da API do DOM especificamente para tabelas. Existem mais exemplos, você precisa aprendê-los.
• Você precisa entender como escrever código em torno de todos esses problemas nos navegadores, não no navegador específico. Você aprenderá rapidamente que coisas que funcionam bem em um navegador são lentas em outro. Você terá que descobrir como os navegadores funcionam e por que são diferentes.
• Pelo amor à barba de Odin, não escreva códigos que me permitam fazer ataques de script entre sites ao seu código. Se você fizer uma chamada ajax para uma célula e fizer algo como cell.innerHTML = "<script>alert("xss")</script>", e uma caixa de alerta aparecer, você fez errado.
• Fique longe do DynamicDrive, w3Schools e sites que dão maus conselhos. Você precisa encontrar comunidades que dão bons conselhos. Aqui no Stack Overflow, temos as salas de bate-papo JavaScript e Node.JS, e fazemos o possível para continuar aumentando os limites do que é "melhor", onde sites como o w3s mantêm dados desatualizados e nunca se preocupam com isso. Você deve seguir os sites oficiais de especificações, como o W3C , o Mozilla Developer Network (MDN). Peça uma revisão por pares do seu código. Quando você sentir que está fazendo algo doloroso com o seu código, quando estiver fazendo um monte de recortar, colar + ajustar com o seu código, você deve imediatamente entrar em uma sala de bate-papo e pedir orientação sobre como escrever um código melhor.
• Quando você procura orientação, ou deseja compartilhar a coisa realmente legal que você fez ... por favor, por favor. Por favor, certifique-se de documentá-lo, certifique-se de que os nomes das variáveis ​​façam sentido, verifique se não são todos de uma só linha. Você precisa escrever um código limpo. Se você tem uma pilha de lixo, você não apenas falhou, mas quem sabe como ajudá-lo vai querer . Ajude-nos a ajudá-lo.
• Você quer escrever JavaScript - isso é legal, respeite que nem todos suportam JavaScript. Duas razões para isso: 1) Internet mais rápida para todos (em vez de "ajax todas as coisas", o que leva a uma experiência mais lenta). 2) A Web é mais acessível para pessoas em navegadores baseados em console, pessoas que usam celulares sem script. O que estou tentando dizer é que seu site deve ser degradado normalmente se alguém não tiver JavaScript e, no mínimo, usar <noscript>tags para alertá-lo sobre isso.
• Devido à natureza protótipo do JavaScript, você pode fazer alterações na forma como a linguagem realmente funciona - o que é realmente interessante. Veja bem, o JavaScript está evoluindo, estamos saindo do "ECMA Script 3", que é a versão mais antiga do JS, e para o "ECMA Script 5" (também conhecido como es5). Por causa do protótipo, podemos corrigir a linguagem es3 no campo para funcionar como es5. Isso significa, ou seja, 6, um navegador de 10 anos obtém o recurso de idioma lançado no ano passado. Use es5-shims sempre que puder, eles são muito legais e você precisa investigar.
• O mundo ocidental das crianças brancas que falam inglês não é quem usa a internet. Código em conformidade. Isso significa que você precisa entender a internacionalização e escrever um código que lide com uma demanda maior. 10 anos atrás, havia menos de 500 milhões de pessoas on-line, hoje são cerca de 2 bilhões e em mais 10 anos? Provavelmente, quase todas as pessoas no planeta terão acesso à Internet, o que significa que você precisa dar suporte a nomes que não se enquadram no regex /[a-z ']/i, mas incluem sotaques hindi, árabe, (este é um problema existente de desenvolvedores míopes), chinês , e outros. Entenda os conjuntos de caracteres Unicode e UTF-8.

Você é um programador, não uma fábrica de massas. Pare de escrever espaguete.

• Nomeie suas variáveis ​​depois de coisas que façam sentido.
• Documente seu código. Não me importo se você estiver usando o JSDoc desenvolvido pelo rhino ou se tiver vários rabiscos. Escreva uma documentação que ajude a pessoa que vai usar seu código. Escreva a documentação para alguém que deseja melhorar ou manter seu código. Inclua comentários úteis. Comentários como o "This fizzes the bizz"meio-inglês e meio-francês não são úteis. Descreva o que uma função faz. Descreva seções complexas do código.
• Descubra como limitar a repetição de código. Procure por design modular ou padrões funcionais. Veja o que você pode abstrair. Você nunca deve cortar + colar + ajustar grandes segmentos de código para fazer a mesma coisa.
• Você precisa entender a API do DOM. O DOM e os objetos de janela fornecem muitas coisas excelentes. Parece muito trabalho, mas é porque é um acrônimo assustador. Muitos de vocês, ninjas do JavaScript, gostam de escrever códigos como <a href="javascript:alert("foo")">. FFS NÃO FAZ ISSO. Aguarde o carregamento do documento completo, separe seu código JavaScript do documento html. Essas são as práticas básicas de OOP 101, apenas não inclua seu JS ou CSS em seu documento html. Descubra como fazê-lo corretamente ou encontre alguém que saiba como lhe mostrar como fazê-lo. Mais uma vez, faça perguntas.
• o Javascript:foo("buz")é um protocolo psude, não é totalmente suportado e, se você não usar o javascript em linha, não o usaria em primeiro lugar. Eu prometo a você, do fundo do meu coração, que não há nenhuma razão no mundo que você precise colocar seu javascript dentro de um elemento HTML. Sempre. Então não faça isso. Eu nem vou ajudar as pessoas que fazem isso mais, é tão ruim assim.

Descubra como escrever código de maneira que ele não quebre o tempo todo.

• Variáveis ​​globais são um dos maiores problemas. Descubra como funciona a programação funcional em JavaScript. Descobrir o que é içar. Descubra como evitar variáveis ​​globais.
• Use ferramentas de análise de código estático. Isso alertará você imediatamente sobre todos os pequenos "ops" que você fez ao escrever seu código. Esqueceu um ponto e vírgula em algum lugar? Ah, aí está. Tem um global em algum lugar? Ah, aí está. Código que pode gerar um monte de erros misteriosos quando você tenta executá-lo? OH! Ali estão eles! Chega de brincar e encarar uma pilha de códigos por horas tentando descobrir algo que é apenas um erro de sintaxe. (Bem, quase nenhum, você pode ter feito algo que não consegue captar, mas geralmente é incrível).
• Teste de unidade. Não há razão para não ser. Existem toneladas de ferramentas de teste de unidade por aí. Basicamente, o teste de unidade é "Aqui está minha função" e "Eu quero que ele produza Y" "Aqui estão algumas entradas de teste" E o teste é "Eles todos funcionaram?" Existem muitas estruturas de teste de JS, como o popular QUnit. Faça um tour pelo seu mecanismo de pesquisa favorito e veja o que lhe agrada. Mas use-os.
• Gerenciamento de controle de origem, também conhecido como controle de versão. O Git é popular e por boas razões. O mesmo acontece com o SVN e alguns outros. O que você precisa para parar de fazer isso neste instante é editar o código de produção. Você precisa parar de renomear arquivos. main_backup_20110911.js.bak.1Você perde coisas, seu diretório fica confuso, não é possível "retroceder" facilmente para um momento anterior. Você não pode ver o que está acontecendo, não pode fazer patches de código. Portanto, comece a aprender GIT, você deve levar uma hora e nunca mais voltará.
• Revisão por pares. Você não é que bom, nem eu fico melhor, pedir feedback, tanto quanto eu posso. É assim que você deve fazê-lo também.

Escreva JavaScript que as pessoas adoram

• Descubra por que seu código está lento. Use jspref e crie testes.
• Pare de vincular eventos a um elemento DOM, é lento e cria problemas graves de bolhas de eventos que desperdiçarão muito do seu tempo. Pesquise "delegação de eventos" em JavaScript.
• PARE de usar o innerHTML para editar o DOM. Isso remonta a aprender o que é HTML e aprender o que é o DOM. HTML são dados enviados do servidor que o mecanismo de renderização do navegador usa para criar vários objetos de programação que acabam sendo um Objeto de Documento. Ao usar o innerHTML, você está pedindo ao seu navegador para renderizar novamente tudo. Felizmente, há mais de 10 anos, criamos a API DOM e ela permite "acrescentar filho" ou "criar nó de texto" sem precisar atualizar a coisa toda. O innHTML é uma desgraça inventada pela Microsoft - se você usá-lo, também perde todos os privilégios ao reclamar que o IE6 é péssimo porque está ajudando o lixo a ficar para sempre. Aprenda o DOM.
• Ele precisa trabalhar em qualquer lugar que puder. Se algo não é suportado, ele precisa se degradar normalmente para que a experiência não seja ruim - você não pode simplesmente dar um tapa na cara dos usuários e travar.
• Direitos autorais e licença são importantes. Não roube o trabalho duro de outras pessoas. Se alguém disser "não para revenda", você não poderá vendê-lo. Não seja um idiota, ou odiaremos seu código por roubar pessoas que trabalham duro.
• JS é protótipos, não classes. Pare de fazer isso. Se você não entende como o protótipo funciona, é necessário. Google it. O JavaScript não é baseado em classes, pare de tentar fazer aulas, muito raramente funciona bem. As pessoas tentam escrever código clássico em uma linguagem de protótipo e usam isso como um exemplo de "por que a linguagem é péssima"; eu poderia argumentar que Ruby não é capaz de suportar o protótipo. Aprenda algo novo e pare de fazer errado.

Concentre-se no básico, sempre.

• Você está errado, e isso é incrível, porque você sabe alguma coisa agora. Nada é pior do que alguém que não admite estar errado e continua batendo código ruim pela porta como se fosse um ninja renegado de super-herói de rock star. Eles são apenas tolos. Admita que pode estar errado, admita que pode estar errado, peça ajuda.
• Você nem sempre precisa do jQuery. O jQuery cria muito código lento e ajuda pessoas que não conhecem JS a escrever JS. Isso ainda é um problema, pois o JS não exige que você saiba que o JS deve escrever o JS. Vai saber. Depois de entender algumas das coisas que mencionei acima, como aprender eventos, aprender o DOM, aprender sobre o innerHTML, você verá por que o jQuery pode ser prejudicial ao seu código. Ele pode ser usado corretamente em muitos lugares, mas muitas vezes você pode usar uma biblioteca menor ou até ofegar o JavaScript padrão que acompanha o seu navegador para realizar alguma coisa. Você não precisa que o jQuery faça nada, isso facilita escrever um código interessante se você estiver aprendendo, mas precisa começar a melhorar e aprender mais - quando souber mais, descobrirá como escreva um código melhor no jQuery de qualquer maneira.Confira algumas outras bibliotecas JavaScript e deixe de ser tão tímido.
• Você não precisa cortar + colar + ajustar, criar código DRY. Já mencionei isso antes, mas também é importante aqui. Você não pode escrever um código de qualidade se sua base de código for uma vergonha.
• Não abuse de matrizes / diferenças de objetos, aprenda a fazer loop. Saiba por que você usa um for (;;)e por que você usa um for( in )loop. Quando usar um loop while. Pare de aninhar IFs quando você puder apenas usar um caso de opção. Os objetos não preservam a ordem; portanto, não os use como uma matriz; velho Opera / FF, velho MISE, às vezes o Flash não respeita a ordem dos seus objetos. Use uma matriz se desejar manter uma ordem das coisas, use um objeto se desejar um objeto (algo que não tem ordem de elementos).
• Como as estruturas de decisão podem ser usadas para sua vantagem, não adicionam complexidade ao seu código. Pare de aninhar IFs, descubra como os operadores lógicos booleanos funcionam. Descubra como funciona a caixa de comutação.
• RTFM. O melhor lugar para aprender sobre um código melhor é lendo as especificações reais. Leia as especificações da RFC na parte do código que você está tentando usar. Leia o documento ECMAScript. Leia a especificação DOM do W3C. Leia a especificação W3C XHTML / HTML / HTML5. Leia as especificações, elas são boas.

Concentre-se no jogo longo, não em um flash rápido e morra.

• Você deve ajudar a comunidade, escrever um código que esteja disponível por um longo tempo. Tenha alguma paixão pelo seu código e comunidade. Se você deixou um conhecimento ruim em algum lugar, volte e conserte. Informações ruins são realmente difíceis de limpar e ficam para sempre. Faça sua parte. Não ajude a w3schools a piorar a web.
• Não pule do nada e diga "Ei, eu tenho uma ótima idéia de como usar which", solte um monte de código que ninguém pode usar e desaparecer. Você não contribuiu com nada. Não use variáveis ​​como ae chezburger.
• Aprenda a identificar o código incorreto e o código válido, encontre-o em seu próprio código, transforme seu código incorreto em código válido.
• Crie algo, aprenda algo, ensine algo.
• Amplie seus horizontes. Você não pode simplesmente escrever JavaScript para sempre - leve um sabático para outra coisa que lhe interesse, volte, compartilhe o que aprendeu e veja se consegue encontrar um lugar para ele na comunidade. Tente mostrar ao outro mundo qual o valor do JavaScript também enquanto você estiver lá fora.
• Você ainda está errado, mesmo quando você sabe tudo. Use uma prova para estar correta, não seu status / autoridade. Você nunca pode estar certo, mas sua prova está sempre correta. Não brinque com mijões, por mais difícil que seja evitar algumas vezes. Ou há prova ou não. Chamas não ajudam ninguém.

Para qualquer pessoa interessada, tirei a maior parte disso de anotações pessoais em um tutorial que não escrevi em nenhum lugar .

1. Leia o Javascript de Douglas Crockford : The Good Parts . Essa é uma dica, mas honestamente, é o melhor conselho que já ouvi sobre como escrever um bom javascript.

2. Leia também os artigos de Douglas Crockford sobre Javascript .

alert('This illustrates how JavaScript has first-class functions');
alert('It also illustrates how to use closures.  Try running this code in your browser.');

var funky = function(s) {
    alert("We're getting funky with " + s);
};

var makeFunkyObject = function(funkyFunction) {
    var numberOfTimesAlerted = 0;
    var fn = { };
    fn.alertFunky = function(s) {
        funkyFunction(s);
        numberOfTimesAlerted++;
    }
    fn.getNumberOfTimesAlerted = function() {
        return numberOfTimesAlerted;
    }
    return fn;
}

var funkyObject = makeFunkyObject(funky);

funkyObject.alertFunky('Alice'); // alerts We're getting funky with Alice
funkyObject.alertFunky('Bob'); // alerts We're getting funky with Bob
alert(funkyObject.getNumberOfTimesAlerted()); // alerts 2

alert('Also, be sure to distinguish between learning about JavaScript and learning about the DOM');
alert('The former is awesome; the latter, not so awesome.');

Aqui estão algumas perguntas que você deve usar no JavaScript.

1. Como o JSON funciona e para que serve?

2. Por que as funções são objetos em Javascript?

3. Por que não devo usar eval?

4. Como crio eventos em javascript?

5. Como faço para detectar recurso em javascript?

Abrange praticamente a maioria das coisas que você precisa fazer em Javascript.

1. Sempre use ponto e vírgula. Ponto e vírgula implícito (em JS) é uma ideia horrível, especialmente com algumas das sintaxes interessantes flutuando em uso comum. Eles também são geralmente exigidos por qualquer minificador JS.
2. Evite eval () . Isso causa todos os tipos de problemas e é uma maneira muito rápida de retardar seu aplicativo. A maioria dos usos são na verdade abusos. Sempre que achar que precisa usar eval(), verifique duas vezes e triplamente por outra maneira; quase sempre existe uma maneira mais limpa e fácil, a menos que você esteja realmente tentando executar uma cadeia inteira de JavaScript.
3. (function() {/* stuff */})()é uma boa maneira de incluir um conjunto de códigos e criar um escopo local para ele. Usar objetos é outra maneira, muitas vezes melhor; Os objetos são mais análogos aos namespaces em outros idiomas quando usados ​​dessa maneira. Apenas atente para this. Diferentemente da maioria dos outros idiomas, thisnem sempre faz referência ao que você pensa intuitivamente. Lembre-se também de que, a menos que especificado de outra forma, todas as variáveis ​​JS, funções e outros objetos são todos globais, mesmo em vários .jsarquivos.
4. Encontre e aprenda / use uma boa biblioteca JS. O jQuery é um dos mais populares. Isso fará muito trabalho pesado para você, incluindo coisas como detecção de recursos e abstração da manipulação do DOM e as várias maneiras pelas quais coisas diferentes foram implementadas em diferentes navegadores.
5. Sempre use ponto e vírgula. Seriamente. Obtenha um IDE que avise quando você os esquecer. Eu não quero parecer seguro, mas houve algumas vezes em que erros foram introduzidos apenas pela falta de ponto e vírgula e o navegador não avisa sobre isso.

Acredito que as classes sejam uma ferramenta bastante poderosa para estruturar o código. Existem muitas regras independentes de linguagem sobre como projetar sistemas baseados em classes e alguns princípios de OO são realmente mais obviamente implementados ao usar classes.
Portanto, sugiro que você dê uma olhada no CoffeeScript .

A partir daí, sugiro que você tente coletar informações sobre como implementar SOLID , DRY , GRASP , KISS e YAGNI e, mais importante, sobre como lidar com situações em que elas parecem conflitar (elas nunca o fazem, apenas sua compreensão delas ou o problema em questão faz). É muito fácil de encontrar, mesmo na stackexchange.

Observe que esses princípios se aplicam ao desenvolvimento JavaScript "bruto" da mesma forma. No entanto, muito conteúdo que você encontrará neles os ilustrará usando linguagens baseadas em classes e, portanto, pode ser útil programar em um idioma em que não haja muita sobrecarga envolvida na compreensão deles.
Pessoalmente, acho que o JavaScript é uma linguagem extremamente poderosa, mas na verdade você precisará primeiro entender profundamente outras linguagens para realmente apreciar esse fato.

Estou assumindo que você está usando JavaScript para o desenvolvimento de UI do lado do cliente em um aplicativo da Web.

1) Deve ser do lado do cliente ou do servidor? Sei que escrevi trechos sérios de código que realmente mereciam estar no servidor e vice-versa. Muitas vezes, vou fazer uma chamada AJAX para algo que acaba apenas melhor colocado no código do servidor para ser incluído no caminho. Especialmente coisas de natureza estática, mas que mudam bastante regularmente (lista de categorias, por exemplo).

2) Existe um plugin que já faz isso? Eu uso muito o JQuery e a resposta é quase sempre SIM! Costumo pegar o código de plug-in que alguém escreveu e adaptá-lo às minhas necessidades (geralmente adicionando classes extras às coisas etc.), mas raramente é necessário começar do zero.

3) Javascript é o lugar certo para isso? Ocasionalmente, me pego adicionando um monte de estilo dinâmico a algo via Javascript quando faz muito mais sentido usar CSS inteligente.

4) Devo estar usando uma ferramenta diferente? Isso é algo com o qual tenho lidado ultimamente. Existem algumas alternativas de javascript, como o script de café, que são bem tratadas na minha pilha (Rails 3.1) e eu estive pensando em mover ou não muito do meu código para lá.

5) Esse código Javascript é bom? Javascript é um código como qualquer outro código. Esse código é tão bom quanto o resto do meu código? Se não, por que não? É descartável? Eu sou preguiçoso?