O documento fornece 3 dicas principais para escrever códigos JavaScript melhores:
1) Aprenda bem a linguagem JavaScript e seus conceitos-chave.
2) Aplique padrões como o Module Pattern para organizar e encapsular o código.
3) Use arquiteturas como MVC para separar as preocupações da aplicação.
Além disso, fornece dicas gerais como documentar o código, criar arquivos separados, injetar dependências e realizar testes. O objetivo é ajudar a escrever códigos mais
8. Dos 10 repositórios mais populares do
Github, 7 repositórios* são relacionados a
JavaScript.
*twitter bootstrap, node.js, jquery, html5 boilerplate, impress.js, backbone.js, chosen.
10. Dicas
Você verá algumas dicas que podem ajudar a escrever códigos
melhores, e torná-lo um *rockstar.
*Embora isso seja possível, não é uma garantia. Além disso, é melhor ser um profissional que rockstar.
13. Conheça a linguagem
*Saiba closures, funções, escopo de variáveis, this e como
modificá-lo, pseudo-orientação a objetos, prototype e,
provavelmente, muito mais coisas.
*Ninguém disse que a vida seria fácil. Quando você decidiu se tornar um desenvolvedor web, assumiu o
compromisso de não se tornar um dinossauro.
14. *jQuery não é JavaScript
É apenas um framework que abstrai e facilita a manipulação do
Document Object Model.
*Quero morrer quando pergunto para alguém se ele sabe JavaScript e a resposta é “Eu sei jQuery”. Pretty... jQuery
não é JavaScript!
34. dom.find("p").css({ Não importa qual framework
color: "red" você esteja usando, a API
}); foi abstraída.
35. dom.find("p").css({ A abstração pode ser
color: "red" extremamente complexa e
}); trabalhosa.
36. Mediator pattern
Faz a intermediação entre diferentes componentes, de modo que
eles possam interagir indiretamente.
37.
38. var Chat = {};
Chat.channel = new Channel();
Chat.participants = new Participants(Chat.channel);
Chat.messages = new Messages(Chat.channel);
Chat.inputMessage = new InputMessage(Chat.channel);
Chat.connection = new Connection(Chat.channel);
39. function Participants(channel) {
this.channel = channel;
// Listen to the connected signal and add a new
// user to the participants list.
this.channel.on("connected", this.onConnected);
// Listen to the disconnected signal and remove
// user from the participants list.
this.channel.on("disconnected", this.onDisconnected);
}
40. function Messages(channel) {
this.channel = channel;
// Listen to the new message signal and add message
// to the list.
this.channel.on("new message", this.onNewMessage);
// Listen to the connected signal and tell everybody
// that somebody has joined the room.
this.channel.on("connected", this.onConnected);
}
41. function InputMessage(channel) {
this.channel = channel;
}
InputMessage.prototype.send = function(message, user) {
// Send message through WebSockets maybe
// Then notify that a new message has been sent
this.channel.publish("new message", message, user);
};
45. .toggleClass("active");
$("#automatic")
.toggleClass("hidden");
$("#manual")
.toggleClass("hidden");
}
});
if (location.hash == '#manual_invite') {
$(".tab_title:first")
.toggleClass("active");
$(".tab_title:last")
.toggleClass("active");
$("#automatic")
.toggleClass("hidden");
$("#manual")
.toggleClass("hidden");
}
//mudando a aba do serviço automaticamente
var service_mapping = {0: 'gmail', 1:'yahoo', 2:'live'};
var services_radio_button = "";
for (key in service_mapping) {
if ($("#services")[0].places[key].checked) {
services_radio_button = service_mapping[key];
}
}
$("#service-suffix").html(suffixes[services_radio_button]);
$("#services fieldset").attr("class", services_radio_button);
$("p#service_instructions").addClass("hidden");
$("#service-select").addClass("hidden");
if(services_radio_button == "yahoo") {
$("p#service_instructions").removeClass("hidden");
} else if (services_radio_button == "other") {
$("#service-select").removeClass("hidden");
}
}
}
46.
47. 354 linhas
Redimensionamento de janelas, gerenciamento de abas, AJAX,
validação, autenticação, criação de lista de contatos no DOM, filtros
e, provavelmente, muito mais!
48. Bad jQuery ou Bad developer?
O jQuery é bom porque é simples de usar. Mas ele também é ruim
porque é simples de usar.
65. Crie seu próprio framework
Isso fará com que você entenda o problema a fundo e dará o
conhecimento para resolver o problema. Depois jogue tudo fora.
68. Crie arquivos separados
Crie diversos arquivos, cada um com sua responsabilidade. Você
sempre pode concatenar os arquivos com ferramentas como o
Grunt.
69. Documente o seu código
Sempre que possível, documente o seu código. Você não vai
lembrar porque fez isso na semana que vem.
70. Injete os elementos em cada componente
Em vez de assumir que o elemento está sempre na página, injete-o
através do construtor. Isso permitirá escrever testes mais
desacomplados.