Skip to content

Commit

Permalink
melhoras na tradução do capítulo JavaScript
Browse files Browse the repository at this point in the history
  • Loading branch information
@andrewsfg
andrewsfg committed Feb 10, 2012
1 parent 4c7e5b2 commit a9509bd
Showing 1 changed file with 21 additions and 27 deletions.
48 changes: 21 additions & 27 deletions sections/javascript.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,39 +7,37 @@

<h1>JavaScript</h1>

<p>JavaScript é o terceiro componente principal de uma página web. Código JavaScript quando devidamente aplicado a uma página, melhora consideravelmente a experiência do usuário, através do controle de eventos...</p>

<!--<p>JavaScript is the third major component of a web page. JavaScript code, when properly applied to a web page, enhances the overall user and browser-based experience through attaching to events and controlling the overall behavior layer.</p>-->
<p>JavaScript é o terceiro componente principal de uma página web. Código JavaScript quando devidamente aplicado a uma página, melhora consideravelmente a experiência do usuário, através do controle de eventos e da camada de comportamento geral.</p>

<p>JavaScript tem visto uma explosão em sua popularidade nos últimos anos com poderosas implementações no navegador que finalmente habilitadas, isso possibilitou a criação de aplicações web completas. Adicionalmente, o uso cuidadoso de JavaScript permite a manipulação de controle total sobre outros dois componentes de criação de páginas web, o <a href="#markup">HTML</a> e <a href="#css">CSS</a>. Hoje, a estrutura das páginas e o visual podem ser manipulados em tempo real, sem que seja necessário atualizar a página completamente.</p>
<p>JavaScript tem visto uma explosão em sua popularidade nos últimos anos com poderosas implementações no navegador que finalmente habilitadas possibilitam a criação de aplicações web completas. O uso cuidadoso de JavaScript permite a manipulação e controle total sobre outros dois componentes de criação de páginas web, o <a href="#markup">HTML</a> e <a href="#css">CSS</a>. Hoje, a estrutura das páginas e o visual podem ser manipulados em tempo real, sem que seja necessário atualizar a página completamente.</p>

</div>

<h2>Bibliotecas JavaScript</h2>

<p class="normalize">Nós essencialmente desenvolvemos as novas aplicações usando <a href="http://api.jquery.com/">jQuery</a>, embora tenhamos conhecimento em puro JavaScript, assim como todas as grandes bibliotecas modernas JavaScript.</p>
<p class="normalize">Nós essencialmente desenvolvemos as novas aplicações usando <a href="http://api.jquery.com/">jQuery</a>, embora tenhamos conhecimento em puro JavaScript, assim como todas as grandes bibliotecas modernas em JavaScript.</p>

<h2>Princípios Gerais de Código</h2>

<ul>
<li>99% do código deve ficar em arquivos externos. Eles devem ser incluídos no FIM da tag <code>body</code> para melhor performance.</li>
<li>Não confie na string user-agent. Faça a detecção usando o recurso adequado. (Mais em <a href="http://diveintohtml5.info/detect.html">Dive Into HTML5: Detection</a> &amp; <a href="http://api.jquery.com/jQuery.support/">jQuery.support docs</a>)</li>
<li>Não utilize document.write().</li>
<li>Não confie na string <code>user-agent</code>. Faça a detecção usando o recurso adequado. (Mais em <a href="http://diveintohtml5.info/detect.html">Dive Into HTML5: Detecção</a> &amp; <a href="http://api.jquery.com/jQuery.support/">jQuery.support docs</a>)</li>
<li>Não utilize <code>document.write()</code>.</li>
<li>Todas as variáveis boleanas devem começar com "is".
<figure class="preCode">Teste para condições positivas</figure>
<textarea class="brush:js">
isValid = (test.value >= 4 && test.success);
</textarea>
</li>
<li>Nomeie variáveis e funções de forma lógica. Por exemplo: <code>popUpWindowForAd</code> em vez de <code>myWindow</code>.</li>
<li>Não faça compressões manualmente. Com exceção dos tradicionais <code>i</code>, etc. Para loops <code>for</code>, variáveis devem ser longas o suficiente para ter significado. </li>
<li>Nomeie variáveis e funções de forma lógica. Por exemplo: <code>popUpWindowForAd</code>, ao invés <code>myWindow</code>.</li>
<li>Não faça reduções ao nomear variáveis. Com exceção dos tradicionais <code>i</code> etc. Para loops <code>for</code>, variáveis devem ter nomes longos o suficiente para ter significado. </li>
<li>Documentação deve seguir a estrutura do <a href="http://www.naturaldocs.org/documenting.html">NaturalDocs</a>.</li>
<li>Constantes ou variáveis de configuração (como duração de animações, etc.) devem ficam no começo do arquivo.</li>

<li>Esforce-se para criar funções que possam ser generalizadas, ter parâmetros e valores de retorno. Isto permite a reutilização substancial de código e, quando combinada com includes ou scripts externos, podem reduzir a sobrecarga quando os scripts tem necessidade de mudar. Por exemplo, em vez da difícil codificação de uma janela pop-up com tamanho da janela, opções, urls, considere criar uma função que tenha tamanho, url e opções como variáveis.</li>
<li>Esforce-se para criar funções que possam ser generalizadas, ter parâmetros e valores de retorno. Isto permite a reutilização substancial do código e, quando combinada com includes ou scripts externos, podem reduzir a sobrecarga quando os scripts tem necessidade de mudar. Por exemplo, em vez da difícil codificação de uma janela pop-up com tamanho de janela, opções, urls, considere apenas criar uma função que tenha tamanho, url e opções como variáveis.</li>

<li>Comente o seu código! Isso ajuda a reduzir o tempo gasto com soluções de problemas em funções JavaScript.</li>
<li>Não perca seu tempo com <code>&lt;!-- --&gt;</code> comentários que cercam sua linha javascript, a menos que você se preocupe com o Netscape 4.&nbsp;:)</li>
<li>Não perca seu tempo com <code>&lt;!-- --&gt;</code>, comentários que cercam sua linha javascript, a menos que você se preocupe com o Netscape 4.&nbsp;:)</li>
<li>Organize seu código com o <a href="http://kaijaeger.com/articles/the-singleton-design-pattern-in-javascript.html">Object Literal/Singleton</a>, como <a href="http://www.yuiblog.com/blog/2007/06/12/module-pattern/">Module Pattern</a>, ou com o <a href="http://mckoss.com/jscript/object.htm">Object with constructors</a>.</li>

<li>Reduza variáveis globais - quanto menos você as criar, melhor. Geralmente uma para o espaço de sua aplicação é um bom número.
Expand All @@ -52,9 +50,7 @@ <h2>Princípios Gerais de Código</h2>

<h3>Espaços em branco</h3>

<p>Em geral, o uso de espaços em branco deve seguir convenções de leitura inglesa de longa data. Tal que, haverá um espaço após cada vírgula e depois dois-pontos (e ponto e vírgula, se for o caso), mas sem espaços dentre os lados direito e o esquerdo do parênteses. Resumindo, nós defendemos a leitura dentro da razão. Adicionalmente, braces devem sempre aparecer na mesma linha como seu argumento precedente.</p>

<!--<p>In general, the use of whitespace should follow longstanding English reading conventions. Such that, there will be one space after each comma and colon (and semi-colon where applicable), but no spaces immediately inside the right and left sides of parenthesis. In short, we advocate readability within reason. Additionally, braces should always appear on the same line as their preceding argument.</p>-->
<p>Em geral, o uso de espaços em branco devem seguir convenções de leitura inglesa de longa data. Tal que, haverá um espaço após cada vírgula e depois dois-pontos (e ponto e vírgula, se for o caso), mas sem espaços dentre os lados direito e o esquerdo do parênteses. Resumindo, nós defendemos a leitura dentro da razão. Adicionalmente, chaves devem sempre aparecer na mesma linha como seu argumento precedente.</p>

<p>Considere os seguintes exemplos for-loop de JavaScript...</p>

Expand All @@ -80,16 +76,15 @@ <h3>Espaços em branco</h3>
}
</textarea>


<h3>plugins.js e script.js</h3>

<p>Começando com o <abbr title="HTML5 Boilerplate">H5BP</abbr> que é nos apresentado com dois arquivos, plugins.js e script.js. Essa seção descreve o uso básico destes dois arquivos.</p>
<p>Começando com o H5BP que é nos apresentado com dois arquivos, plugins.js e script.js. Essa seção descreve o uso básico destes dois arquivos:</p>

<h4>plugins.js</h4>

<p>O Plugin.js serve para conter todos os códigos de plugins utilizados no seu site. Em vez de linkar para diferentes arquivos, nós podemos melhorar o desempenho incluindo todo o código em apenas um arquivo. Embora exista exceções para este uso, um plugin extremamente grande somente usado em uma única página raramente visitada, pode ser melhor ficar em um arquivo separado, só linkado na página que é usado. Embora, na maioria das vezes é seguro colocar versões minified de todos os seus plugins num arquivo só para fácil acesso.</p>
<p>O plugin.js serve para conter todos os códigos de plugins utilizados no seu site. Em vez de linkar para diferentes arquivos, nós podemos melhorar o desempenho incluindo todo o código em apenas um arquivo. Embora exista exceções para este uso, um plugin extremamente grande, que é somente usado em uma única página raramente visitada, deve ficar em um arquivo separado e só linkado na página que é usado. Embora, na maioria das vezes é seguro colocar versões comprimidas de todos os seus plugins num arquivo só para fácil acesso.</p>

<p>Aqui um exemplo de como um arquivo deve se parecer, incluindo uma pequena tabela de conteúdo. Isso pode servir como um guia prático para os plugins que estão em uso, incluindo URLs para documentação, razão para o uso e assim por diante.</p>
<p>Aqui um exemplo de como um arquivo deve se parecer, incluindo uma pequena tabela de conteúdo. Isso pode servir como um guia prático para os plugins que estão em uso, incluindo URLs para documentação, razão para o uso e assim por diante:</p>

<textarea class="brush:js">
/* PLUGIN DIRECTORY
Expand Down Expand Up @@ -170,9 +165,9 @@ <h4>plugins.js</h4>

<h4>Script.js</h4>

<p>Script.js serve para conter o código da sua aplicação ou site. Novamente, esta não é sempre a melhor solução no caso de equipes maiores. Projetos grandes e ricos em recursos podem acabar dividindo o código do aplicativo em módulos ou recursos em arquivos específicos. Para sites pequenos, aplicações simples ou protótipo inicial, deixe seu trabalho em scripts.js para fazer mais sentido.</p>
<p>Script.js serve para conter o código da sua aplicação ou site. Novamente, esta não é sempre a melhor solução em uma grande equipe. Projetos grandes e ricos em recursos podem acabar dividindo o código do aplicativo em módulos ou recursos em arquivos específicos. Para sites pequenos, aplicações simples ou protótipo inicial, deixe seu trabalho no scripts.js para fazer mais sentido.</p>

<p>Um exemplo simplificado, usando o padrão da <a href='http://paulirish.com/2009/markup-based-unobtrusive-comprehensive-dom-ready-execution/'>marcação discreta abrangente baseada em DOM pronta pra execução</a>, poderia ser algo como segue abaixo:</p>
<p>Um exemplo simplificado, usando o padrão da <a href='http://paulirish.com/2009/markup-based-unobtrusive-comprehensive-dom-ready-execution/'>marcação discreta abrangente baseada em DOM, pronta pra execução</a>, poderia ser algo como segue abaixo:</p>

<textarea class="brush:js">
/* Name: Demo
Expand Down Expand Up @@ -210,21 +205,20 @@ <h4>Script.js</h4>
}
}
</textarea>


<h2>Variáveis. ID &amp; Classes</h2>
<h2>Variáveis, ID &amp; Classes</h2>

<p>Todas as variáveis JavaScript devem ser escritas apenas com minúsculas ou camelCase. A única exceção para este caso é se estiver criando Constructor Functions, quais são capitalizados por tradição. Todo <code>id</code> e declarações <code>class</code> em CSS devem ser escritas usando apenas minúsculas. Não use traços, nem sublinhados.</p>

<h3>Delegação de Eventos</h3>

<p>Ao atribuir ouvintes de eventos discretos, normalmente é aceitável atribuir diretamente para os elementos que irão disparar alguma ação resultante. Embora, ocasionalmente pode haver vários elementos que correspondam aos critérios para o qual você está verificando, e anexando ouvintes de eventos para cada um deles, isso pode afetar negativamente o desempenho. Nesses casos, você deve usar a delegação de evento ao invés disso.</p>
<p>Ao atribuir ouvintes de eventos discretos, normalmente é aceitável atribuir diretamente para os elementos que irão disparar alguma ação resultante. Embora, ocasionalmente pode haver vários elementos que correspondam aos critérios para o qual você está verificando, e anexando ouvintes de eventos para cada um deles, isso pode afetar negativamente o desempenho. Nesses casos, ao invés disso, você deve usar a delegação de evento:</p>

<p>jQuery's <a href="http://api.jquery.com/delegate">delegate()</a> é preferível ao <a href="http://api.jquery.com/live">live()</a>, por questões de performance.</p>

<h3>Debugando</h3>

<p>Mesmo com os melhores validadores, inevitavelmente certas peculiaridades do navegador irão lhe causar problemas. Aqui algumas boas ferramentas que irão te auxiliar a refinar a integridade do seu código ou ajudar na velocidade de carregamento. É importante que você tenha todas essas ferramentas disponíveis com você, apesar do navegador primário que você usa para desenvolvimento. Nós recomendamos primeiramente codificar para o Firefox e Safari, então Google Chrome e Opera e adicionando tweaks com comentários condicionais apenas para o Internet Explorer. A lista a seguir possuí vários depuradores úteis e analisadores de velocidade... </p>
<p>Mesmo com os melhores validadores, inevitavelmente certas peculiaridades do navegador irão lhe causar problemas. Aqui algumas boas ferramentas que irão te auxiliar a refinar a integridade do seu código ou ajudar na velocidade de carregamento. É importante que você tenha todas essas ferramentas disponíveis com você, apesar do navegador primário que você usa para desenvolvimento. Nós recomendamos primeiramente codificar para o Firefox e Safari, então Google Chrome e Opera, e adicionando tweaks com comentários condicionais apenas para o Internet Explorer. A lista a seguir possuí vários depuradores úteis e analisadores de velocidade: </p>

<ul>
<li><strong>Firefox</strong>: <a href="http://getfirebug.com/">Firebug</a>, <a href="http://code.google.com/speed/page-speed/">Page Speed</a>, <a href="http://developer.yahoo.com/yslow/">YSlow</a></li>
Expand All @@ -240,12 +234,12 @@ <h3>Padrões para um melhor JavaScript</h3>
<ul>
<li>Escreva um código de fácil manutenção</li>
<li>Padrão único para var</li>
<li>Hoisting: A Problem with Scattered vars</li>
<li>Elevação: Um problema com vars dispersas</li>
<li>(Not) Augmenting Built-in Prototypes</li>
<li>Avoiding Implied Typecasting</li>
<li>Evite Conversão de Tipo Implícita</li>
<li>Evite eval()</li>
<li>Converta número com parseInt()</li>
<li>Opening Brace Location</li>
<li>Localização de chave de abertura</li>
<li>Capitalize Constructors</li>
<li>Escreva Comentários</li>
<li>Evite void</li>
Expand Down

0 comments on commit a9509bd

Please sign in to comment.