WTF Javascript - FrontInRio 2011

Padrões

•Patterns

•Standards

•Default

Patterns são modelos funcionais, mas não precisamos
adota-los sempre!

Anti Padrões
fórmulas perfeitas para seu projeto dar errado!

(1 < 2 < 3); // false!

O Javascript já foi assustador no ano passado!

function()
{
return
{
trololo: “document.all”
}
}

function()
{
return;
{
}
}

function() {
return {
}
}

var nome = [ “Leo”, “Balter” ];
for (i in nome) {
console.log(nome[i]);
}

var nome = [ “Leo”, “Balter” ];
for (i in nome) {
if (nome.hasOwnProperty(i)) {
console.log(nome[i]); // wtf
}
}

imGlobal = 10;

function changeGlobal() {
console.log(imGlobal); // 10 (*)
imGlobal = 20;
}

changeGlobal();

console.log(imGlobal); // 20

imGlobal = 10;

console.log(imGlobal); // undefined

var imGlobal = "What am I?";
}

changeGlobal();

imGlobal = 10;

var imGlobal;

console.log(imGlobal); // undefined

imGlobal = "What am I?";
}

changeGlobal();

Sempre declare suas variáveis no início da função!

imGlobal = 10;

console.log(window.imGlobal); // 10!

var imGlobal = "What am I?";
}

changeGlobal();

Conheça seu escopo!
Variáveis dentro de blocos de loop, ifs ou switches não criam um escopo
interno!

function foo() {
var bar = [ 123, 234, 345 ],
x = 5;
  for (var i = 0; i < bar.length; i++) {
var x = i;
  }

console.log(i);
}
foo();

function foo() {
var bar = [ 123, 234, 345 ],
x = 5;
  for (var i = 0; i < bar.length; i++) {
var x = i;
  }

console.log(i, x); // 3, 3
}
foo();

Valores verdadeiros podem ser falsos!

console.log(!!0); // false
console.log(!!10); // true
console.log(!!"0"); // true

console.log(0 == ""); // true
console.log(!!0 == !!""); // true

console.log(!!0); // false
console.log(!!10); // true
console.log(!!"0"); // true

console.log(0 == "0"); // true
console.log(!!0 == !!"0"); // false

Pare de utilizar == e comece a utilizar === agora!

console.log(90 === "90"); // false
console.log(0 !== false); // true

parseInt(“042”); // 34

parseInt(“042”, 10); // 42

120 + “7”; // “1207”

1 < 2 < 3; // false

1 < 2 < 3;

(1 < 2) < 3;

true < 3;

eval(‘/* js dentro de uma string! */’);

setTimeout(‘rotina(x);’, 500);

setTimeout(function () {
rotina(x);
}, 500);

Convenções de código

• JSLint se você for o Douglas Crockford

• JSHint se você não for o Douglas Crockford

• e agora também o CSSLint!

JSLint

• Douglas Crockford

• “JSLint will hurt your feelings”

• Escreva JS como ele escreve ou não use a ferramenta

• for (var x in y) ...

• http://www.jslint.com

JSHint

• Comunidade - fork do JSLint iniciado por Anton Kovalyov

• “does not tyrannize your code”

• Estabeleça as suas convenções!

• Douglas Crockford diz que JSHint é para babacas

• http://jshint.com

function(foo) {
var i = -1
var str

for (var i = 0; i < 4; i++) {
debugger;
str += i;
}
}()

The code check failed.

Errors:
• Line 1 function(foo) {
Missing name in function declaration.

• Line 2 var i = -1
Missing semicolon.

• Line 3 var str
Missing semicolon.

• Line 5 for (var i = 0; i < 4; i++) {
'i' is already defined.

• Line 9 }()
Function declarations are not invocable. Wrap the
whole function invocation in parens.

• Line 9
Stopping, unable to continue. (100% scanned).

Outras dicas para melhorar seu JS

Entenda Javascript

• jQuery

• Mootools

• CoffeScript

• Dojo

• Prototype

Use o console!

• Opera Dragonﬂy

• Chrome Developer Tools

• Firefox’s Firebug (extensão)

• Safari’s Developer Tools

• Internet Explorer Developer Tools

Largue o alert! Use o console.log e debugger!

Não se preocupe com a tecnologia server-side

• Ruby • C / C++

• Python • Perl

• PHP • Erlang

• .NET • Lisp

• ColdFusion • Cobol

• ASP • Pseudo-código

Mas se puder escolher preﬁra node.js

• Javascript em server side

• é fácil

• é grátis

• é tendência

• se integra facilmente com ferramentas como CSSLint e JSHint

• http://nodejs.org

Estude muito!

• Mozilla Developer Network - MDN - https://developer.mozilla.org/

• Google Code University - http://code.google.com/intl/pt-BR/edu/
submissions/html-css-javascript/

• Livros! Ex.: “Padrões Javascript”

Compartilhe seu código e troque experiências!

• Google Code

• Github

• Bitbucket

• jsﬁddle.net

• jsbin.com

Não leia o W3Schools!

• Leia o http://w3fools.com

• Pior forma de aprender é a errada!

Não detecte o browser, mas a funcionalidade

você já pode transformar o seu maior vilão no seu
melhor amigo!

@leobalter // leo@balter.com.br

WTF Javascript - FrontInRio 2011

Mais conteúdo relacionado

Mais procurados

Destaque

Semelhante a WTF Javascript - FrontInRio 2011

Mais de Leonardo Balter

Último

WTF Javascript - FrontInRio 2011