blocks|key|354169|text|有几件事就在我头上。当我想到更多的时候，我会编辑这个列表。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|354170|354171|不污染全局命名空间。相反，在对象中组织事物；|unordered-list-item|354172|不要省略变量的'var‘。这会污染全局命名空间，并且可能会让您在使用其他此类脚本时遇到麻烦。|354173|354174|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|L|8|@]|9|@]|A|$]]|$1|C|3|D|5|E|7|M|8|@]|9|@]|A|$]]|$1|F|3|G|5|E|7|N|8|@]|9|@]|A|$]]|$1|H|3|-4|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|P|8|@]|9|@]|A|$]]]|J|$]]

A few things right on top of my head. I'll edit this list when I think of more.

<ul>
<li>Don't pollute global namespace. Organize things in objects instead;</li>
<li>Don't omit 'var' for variables. That pollutes global namespace and might get you in trouble with other such scripts.</li>
</ul>

blocks|key|354198|text|语言：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|354199|通过在全局context.|354200|Binding事件处理程序中以‘JSON=|unordered-list-item|354201|
|354202|’的形式创建大量变量来污染foo.onclick命名空间(不可扩展，应该在几乎任何非myFunc上下文中使用attachEvent/addEventListener).|354203|354204|Using+eval，并且几乎每次使用document.write+(使用像document.createElement)|354205|354206|Prototyping这样的DOM方法来处理对象对象(foo.onclick！)|354207|354208|这是一个小问题，但是使用'%2B‘进行大量的字符串连接(创建一个数组并连接它对于不存在的undefined常量|offset|length|style|CODE|354209|
来说要复杂得多|354210|设计/部署：|354211|354212|(通常)不提供无脚本支持。|354213|不会将代码打包到靠近正文顶部(它们是块加载)的单个|354214|内联(即正文)脚本|354215|354216|特定于Ajax的：|354217|不指示对user|354218|polling|354219|354220|passing的请求的开始、结束或错误的XML，并且解析而不是JSON或|354221|(其中appropriate)|354222|354223|354224|其中许多都来自Addy+Osmati的《学习JavaScript设计》一书：https://www.oreilly.com/library/view/learning-javascript-design/9781449334840/ch06.html|354225|编辑:我一直在想更多！|354226|entityMap|0|LINK|mutability|MUTABLE|url|https://www.oreilly.com/library/view/learning-javascript-design/9781449334840/ch06.html^0|0|0|0|0|0|0|0|0|0|0|16|9|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|12|2F|0|0|0^^$0|@$1|2|3|4|5|6|7|1Y|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|1Z|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|20|8|@]|9|@]|A|$]]|$1|G|3|H|5|6|7|21|8|@]|9|@]|A|$]]|$1|I|3|J|5|F|7|22|8|@]|9|@]|A|$]]|$1|K|3|H|5|6|7|23|8|@]|9|@]|A|$]]|$1|L|3|M|5|F|7|24|8|@]|9|@]|A|$]]|$1|N|3|H|5|6|7|25|8|@]|9|@]|A|$]]|$1|O|3|P|5|F|7|26|8|@]|9|@]|A|$]]|$1|Q|3|H|5|6|7|27|8|@]|9|@]|A|$]]|$1|R|3|S|5|F|7|28|8|@$T|29|U|2A|V|W]]|9|@]|A|$]]|$1|X|3|Y|5|6|7|2B|8|@]|9|@]|A|$]]|$1|Z|3|10|5|6|7|2C|8|@]|9|@]|A|$]]|$1|11|3|-4|5|6|7|2D|8|@]|9|@]|A|$]]|$1|12|3|13|5|F|7|2E|8|@]|9|@]|A|$]]|$1|14|3|15|5|F|7|2F|8|@]|9|@]|A|$]]|$1|16|3|17|5|F|7|2G|8|@]|9|@]|A|$]]|$1|18|3|-4|5|6|7|2H|8|@]|9|@]|A|$]]|$1|19|3|1A|5|6|7|2I|8|@]|9|@]|A|$]]|$1|1B|3|1C|5|6|7|2J|8|@]|9|@]|A|$]]|$1|1D|3|1E|5|F|7|2K|8|@]|9|@]|A|$]]|$1|1F|3|H|5|6|7|2L|8|@]|9|@]|A|$]]|$1|1G|3|1H|5|F|7|2M|8|@]|9|@]|A|$]]|$1|1I|3|1J|5|F|7|2N|8|@]|9|@]|A|$]]|$1|1K|3|-4|5|6|7|2O|8|@]|9|@]|A|$]]|$1|1L|3|-4|5|6|7|2P|8|@]|9|@]|A|$]]|$1|1M|3|1N|5|6|7|2Q|8|@]|9|@$T|2R|U|2S|1|2T]]|A|$]]|$1|1O|3|1P|5|6|7|2U|8|@]|9|@]|A|$]]|$1|1Q|3|-4|5|6|7|2V|8|@]|9|@]|A|$]]]|1R|$1S|$5|1T|1U|1V|A|$1W|1X]]]]

Language:

<ul>
<li>Namespace polluting by creating a large footprint of variables in the global context.</li>
<li>Binding event handlers in the form 'foo.onclick = myFunc' (inextensible, should be using attachEvent/addEventListener).</li>
<li>Using eval in almost any non-JSON context</li>
<li>Almost every use of document.write (use the DOM methods like document.createElement)</li>
<li>Prototyping against the Object object (BOOM!)</li>
<li>A small one this, but doing large numbers of string concats with '+' (creating an array and joining it is much more efficient)</li>
<li>Referring to the non-existent <code>undefined</code> constant</li>
</ul>

Design/Deployment:

<ul>
<li>(Generally) not providing noscript support.</li>
<li>Not packaging your code into a single resource</li>
<li>Putting inline (i.e. body) scripts near the top of the body (they block loading)</li>
</ul>

Ajax specific:

<ul>
<li>not indicating the start, end, or error of a request to the user</li>
<li>polling</li>
<li>passing and parsing XML instead of JSON or HTML (where appropriate)</li>
</ul>

Many of these were sourced from the book Learning JavaScript Design by Addy Osmati: <a href="https://www.oreilly.com/library/view/learning-javascript-design/9781449334840/ch06.html" rel="nofollow noreferrer">https://www.oreilly.com/library/view/learning-javascript-design/9781449334840/ch06.html</a>

edit: I keep thinking of more!

blocks|key|357650|text|任何引用|type|unstyled|depth|inlineStyleRanges|entityRanges|data|357651|document.all|code-block|syntax|javascript|357652|在你的代码中，除非它是在特殊的代码中，只是为了IE克服IE的bug。(cough+document.getElementById()+cough)|357653|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

any reference to

<pre><code>document.all
</code></pre>

in your code, unless it is within special code, just for IE to overcome an IE bug. (cough document.getElementById() cough)

blocks|key|3350776|text|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3350777|浏览器检测(而不是测试要使用的特定方法/字段是否存在)使用|unordered-list-item|3350778|()在大多数情况下是|3350779|3350780|有关要避免的其他各种情况，请参阅Crockford's+"Javascript:+The+Good+Parts"。(编辑：警告，他的一些建议有点严格，比如使用"===“而不是"==”，所以请对它们持保留态度)|offset|length|style|BOLD|3350781|entityMap|0|LINK|mutability|MUTABLE|url|http://oreilly.com/catalog/9780596517748/^0|0|0|0|0|1M|3|S|S|0|0^^$0|@$1|2|3|-4|4|5|6|U|7|@]|8|@]|9|$]]|$1|A|3|B|4|C|6|V|7|@]|8|@]|9|$]]|$1|D|3|E|4|C|6|W|7|@]|8|@]|9|$]]|$1|F|3|-4|4|5|6|X|7|@]|8|@]|9|$]]|$1|G|3|H|4|5|6|Y|7|@$I|Z|J|10|K|L]]|8|@$I|11|J|12|1|13]]|9|$]]|$1|M|3|-4|4|5|6|14|7|@]|8|@]|9|$]]]|N|$O|$4|P|Q|R|9|$S|T]]]]

<ul>
<li>browser detection (instead of testing whether the specific methods/fields you want to use exist)</li>
<li>using alert() in most cases</li>
</ul>

see also Crockford's <a href="http://oreilly.com/catalog/9780596517748/" rel="noreferrer">"Javascript: The Good Parts"</a> for various other things to avoid. (edit: warning, he's a bit strict in some of his suggestions like the use of "===" over "==" so take them with whatever grain of salt works for you)

blocks|key|3138063|text|不使用基于社区的框架来执行重复的任务，如DOM操作、事件处理等。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3138064|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

Not using a community based framework to do repetitive tasks like DOM manipulation, event handling, etc.

blocks|key|354298|text|“with”的任何用法|type|unstyled|depth|inlineStyleRanges|entityRanges|data|354299|带有(document.forms"mainForm".elements)的|354300|+{|blockquote|354301|354302|input1.value+=“垃圾”；|354303|input2.value+=“垃圾”；}|354304|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|P|8|@]|9|@]|A|$]]|$1|G|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|H|3|I|5|6|7|R|8|@]|9|@]|A|$]]|$1|J|3|K|5|6|7|S|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|M|$]]

any use of 'with'

<blockquote>
 <blockquote>
 with (document.forms["mainForm"].elements) { 
 input1.value = "junk"; 
 input2.value = "junk"; 
 }
 </blockquote>
</blockquote>

blocks|key|3350918|text|除了那些已经提到的..。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3350919|使用for..in构造迭代数组的|offset|length|style|CODE|3350920|unordered-list-item|3350921|3350922|(迭代数组方法和索引)像<body+onload="doThis();">一样使用Javascript内联的|3350923|3350924|3350925|(不灵活，并防止多个事件函数的‘listeners)|3350926|Using+()’构造函数|3350927|3350928|(坏的原因与eval()坏的原因相同)|3350929|将字符串而不是函数传递给setTimeout或setInterval|3350930|3350931|(也通过不使用分号对隐式语句使用eval()+internally)|3350932|Relying|3350933|3350934|(养成坏习惯，可能会导致意外的behavior)|3350935|Using+/*。)*/阻止代码行|3350936|3350937|(可能会干扰正则表达式文字，例如：/*+/.*/+*/__)|3350938|当然，不要使用Prototype+;)+|3350939|entityMap^0|0|2|7|0|0|0|C|P|0|0|0|0|0|0|6|6|0|C|A|N|B|0|0|G|6|0|0|0|0|0|0|H|A|0|0^^$0|@$1|2|3|4|5|6|7|1E|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|1F|8|@$D|1G|E|1H|F|G]]|9|@]|A|$]]|$1|H|3|-4|5|I|7|1I|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|1J|8|@]|9|@]|A|$]]|$1|K|3|L|5|6|7|1K|8|@$D|1L|E|1M|F|G]]|9|@]|A|$]]|$1|M|3|-4|5|I|7|1N|8|@]|9|@]|A|$]]|$1|N|3|-4|5|6|7|1O|8|@]|9|@]|A|$]]|$1|O|3|P|5|6|7|1P|8|@]|9|@]|A|$]]|$1|Q|3|R|5|I|7|1Q|8|@]|9|@]|A|$]]|$1|S|3|-4|5|6|7|1R|8|@]|9|@]|A|$]]|$1|T|3|U|5|6|7|1S|8|@$D|1T|E|1U|F|G]]|9|@]|A|$]]|$1|V|3|W|5|I|7|1V|8|@$D|1W|E|1X|F|G]|$D|1Y|E|1Z|F|G]]|9|@]|A|$]]|$1|X|3|-4|5|6|7|20|8|@]|9|@]|A|$]]|$1|Y|3|Z|5|6|7|21|8|@$D|22|E|23|F|G]]|9|@]|A|$]]|$1|10|3|11|5|I|7|24|8|@]|9|@]|A|$]]|$1|12|3|-4|5|6|7|25|8|@]|9|@]|A|$]]|$1|13|3|14|5|6|7|26|8|@]|9|@]|A|$]]|$1|15|3|16|5|I|7|27|8|@]|9|@]|A|$]]|$1|17|3|-4|5|6|7|28|8|@]|9|@]|A|$]]|$1|18|3|19|5|6|7|29|8|@$D|2A|E|2B|F|G]]|9|@]|A|$]]|$1|1A|3|1B|5|6|7|2C|8|@]|9|@]|A|$]]|$1|1C|3|-4|5|6|7|2D|8|@]|9|@]|A|$]]]|1D|$]]

Besides those already mentioned...

<ul>
<li>Using the <code>for..in</code> construct to iterate over arrays 
(iterates over array methods AND indices)</li>
<li>Using Javascript inline like <code>&lt;body onload="doThis();"&gt;</code> 
(inflexible and prevents multiple event listeners)</li>
<li>Using the 'Function()' constructor 
(bad for the same reasons <code>eval()</code> is bad)</li>
<li>Passing strings instead of functions to <code>setTimeout</code> or <code>setInterval</code> 
(also uses <code>eval()</code> internally)</li>
<li>Relying on implicit statements by not using semicolons 
(bad habit to pick up, and can lead to unexpected behavior)</li>
<li>Using /* .. */ to block out lines of code 
(can interfere with regex literals, e.g.: <code>/* /.*/ */</code>)

&lt;evangelism&gt;
And of course, not using Prototype ;)
&lt;/evangelism&gt;</li>
</ul>

blocks|key|3350975|text|对我来说，最大的问题是不理解JavaScript编程语言本身。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3350976|3350977|过度使用对象层次结构并构建非常深的继承链。在大多数情况下，浅层次结构在JS中工作得很好。|unordered-list-item|3350978|不理解基于原型的面向对象，而是构建大量的脚手架，使JS的行为像传统的OO+languages.|3350979|Unnecessarily一样，使用OO范例，而过程/函数编程可以更简洁、更有效。|3350980|3350981|然后是针对浏览器运行时的：|3350982|当DOM节点可以在内存中一次性附加时，|3350983|没有使用良好的已建立的事件模式(如事件委托或观察者模式(发布/订阅))来优化事件handling.|3350984|Making频繁的DOM更新(如循环中的.appendChild+)。(当可以使用本机方法(getElementById、getElementByTagName等)时，用于选择具有复杂选择器的节点的高性能benefit).|3350985|Overusing库)。如今，这已经不是什么大问题了，但是当您希望第三方脚本与您的脚本在同一个页面上时(最终会破坏彼此的代码)，使用mentioning.|3350986|Extending+DOM对象是值得的。|3350987|3350988|最后是部署问题。|3350989|不会压缩files.|3350990|Web-server配置的|3350991|-不会压缩文件，也不会合理地缓存文件。|3350992|3350993|3350994|我在我的博客上有一些client-side+optimization+tips，它涵盖了我上面提到的一些事情，甚至更多。|offset|length|3350995|entityMap|0|LINK|mutability|MUTABLE|url|http://piecesofrakesh.blogspot.com/2007/10/client-side-performance-optimization-of.html^0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|A|T|0|0^^$0|@$1|2|3|4|5|6|7|1J|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|1K|8|@]|9|@]|A|$]]|$1|C|3|D|5|E|7|1L|8|@]|9|@]|A|$]]|$1|F|3|G|5|E|7|1M|8|@]|9|@]|A|$]]|$1|H|3|I|5|E|7|1N|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|1O|8|@]|9|@]|A|$]]|$1|K|3|L|5|6|7|1P|8|@]|9|@]|A|$]]|$1|M|3|N|5|6|7|1Q|8|@]|9|@]|A|$]]|$1|O|3|P|5|E|7|1R|8|@]|9|@]|A|$]]|$1|Q|3|R|5|E|7|1S|8|@]|9|@]|A|$]]|$1|S|3|T|5|E|7|1T|8|@]|9|@]|A|$]]|$1|U|3|V|5|E|7|1U|8|@]|9|@]|A|$]]|$1|W|3|-4|5|6|7|1V|8|@]|9|@]|A|$]]|$1|X|3|Y|5|6|7|1W|8|@]|9|@]|A|$]]|$1|Z|3|10|5|6|7|1X|8|@]|9|@]|A|$]]|$1|11|3|12|5|E|7|1Y|8|@]|9|@]|A|$]]|$1|13|3|14|5|E|7|1Z|8|@]|9|@]|A|$]]|$1|15|3|-4|5|6|7|20|8|@]|9|@]|A|$]]|$1|16|3|-4|5|6|7|21|8|@]|9|@]|A|$]]|$1|17|3|18|5|6|7|22|8|@]|9|@$19|23|1A|24|1|25]]|A|$]]|$1|1B|3|-4|5|6|7|26|8|@]|9|@]|A|$]]]|1C|$1D|$5|1E|1F|1G|A|$1H|1I]]]]

The biggest for me is not understanding the JavaScript programming language itself.

<ul>
<li>Overusing object hierarchies and building very deep inheritance chains. Shallow hierarchies work fine in most cases in JS.</li>
<li>Not understanding prototype based object orientation, and instead building huge amounts of scaffolding to make JS behave like traditional OO languages.</li>
<li>Unnecessarily using OO paradigms when procedural / functional programming could be more concise and efficient.</li>
</ul>

Then there are those for the browser runtime:

<ul>
<li>Not using good established event patterns like event delegation or the observer pattern (pub/sub) to optimize event handling.</li>
<li>Making frequent DOM updates (like .appendChild in a loop), when the DOM nodes can be in memory and appended in one go. (HUGE performance benefit).</li>
<li>Overusing libraries for selecting nodes with complex selectors when native methods can be used (getElementById, getElementByTagName, etc.). This is becoming lesser of an issue these days, but it's worth mentioning.</li>
<li>Extending DOM objects when you expect third-party scripts to be on the same page as yours (you will end up clobbering each other's code).</li>
</ul>

And finally the deployment issues.

<ul>
<li>Not minifying your files.</li>
<li>Web-server configs - not gzipping your files, not caching them sensibly.</li>
</ul>

&lt;plug> I've got some <a href="http://piecesofrakesh.blogspot.com/2007/10/client-side-performance-optimization-of.html" rel="noreferrer">client-side optimization tips</a> which cover some of the things I've mentioned above, and more, on my blog.&lt;/plug>

blocks|key|3138275|text|有效的缓存很少做：|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|3138276|3138277|当您可以使用诸如Google's+Libraries+API之类的共享API来加速将所有脚本分页到一个|unordered-list-item|3138278|中时，请不要在服务器上存储库(jQuery、Prototype、Dojo)的副本。请使用redownload)|3138279|Version为所有脚本提供无限的缓存生存期(永远不要使用myFile.js?r=231)|3138280|文件名，这样客户端无需重新加载/重新启动(即myFile_r231.js或javascript+)就可以进行新的更新|3138281|entityMap|0|LINK|mutability|MUTABLE|url|http://code.google.com/apis/libraries/devguide.html^0|0|9|0|0|8|M|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|X|8|@$9|Y|A|Z|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|10|8|@]|D|@]|E|$]]|$1|G|3|H|5|I|7|11|8|@]|D|@$9|12|A|13|1|14]]|E|$]]|$1|J|3|K|5|6|7|15|8|@]|D|@]|E|$]]|$1|L|3|M|5|I|7|16|8|@]|D|@]|E|$]]|$1|N|3|O|5|6|7|17|8|@]|D|@]|E|$]]|$1|P|3|-4|5|6|7|18|8|@]|D|@]|E|$]]]|Q|$R|$5|S|T|U|E|$V|W]]]]

Effective caching is seldomly done:

<ul>
<li>Don't store a copy of the library (jQuery, Prototype, Dojo) on your server when you can use a shared API like <a href="http://code.google.com/apis/libraries/devguide.html" rel="nofollow">Google's Libraries API</a> to speed up page loads</li>
<li><a href="http://www.webappers.com/2009/01/22/minify-combine-compress-css-or-javascript-files/" rel="nofollow">Combine and minify</a> all your script that you can into one</li>
<li>Use <a href="http://www.webproworld.com/webmaster-forum/threads/100407-How-To-Set-Up-The-Mod_Expires-On-An-Apache-Server" rel="nofollow">mod_expires</a> to give all your scripts infinite cache lifetime (never redownload)</li>
<li>Version your javascript filenames so that a new update will be taken by clients without need to reload/restart
(i.e. myFile_r231.js, or myFile.js?r=231)</li>
</ul>

blocks|key|3351096|text|在创建语句时错误地使用大括号定位|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3351097|由于会自动插入分号，因此应始终在语句后面加上大括号。|3351098|例如：|3351099|function()
{
++++return
++++{
++++++++price:+10
++++}
}|code-block|syntax|javascript|3351100|与此有很大的不同：|3351101|function(){
++++return{
++++++++price:+10
++++}
}|3351102|因为在第一个示例中，javascript将为您插入一个分号，实际上会留下以下内容：|3351103|function()
{
++++return;++++//+oh+dear!
++++{
++++++++price:+10
++++}
}|3351104|3351105|对可能长时间运行的任务使用setInterval。|3351106|当你需要重复做一些事情时，你应该使用setTimeout而不是setInterval。|3351107|如果您使用setInterval，但是在计时器中执行的函数在计时器下一次滴答时还没有完成，这是不好的。取而代之的是使用以下使用setTimeout的模式|3351108|function+doThisManyTimes(){
++++alert("It's+happening+again!");
}

(function+repeat(){
++++doThisManyTimes();
++++setTimeout(repeat,+500);
})();|3351109|Paul+Irish在他的10+things+I+learned+from+the+jQuery+source视频中很好地解释了这一点|offset|length|3351110|entityMap|0|LINK|mutability|MUTABLE|url|http://paulirish.com/|1|http://paulirish.com/2010/10-things-i-learned-from-the-jquery-source/^0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|A|0|D|16|1|0^^$0|@$1|2|3|4|5|6|7|1F|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|1G|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|1H|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|1I|8|@]|9|@]|A|$I|J]]|$1|K|3|L|5|6|7|1J|8|@]|9|@]|A|$]]|$1|M|3|N|5|H|7|1K|8|@]|9|@]|A|$I|J]]|$1|O|3|P|5|6|7|1L|8|@]|9|@]|A|$]]|$1|Q|3|R|5|H|7|1M|8|@]|9|@]|A|$I|J]]|$1|S|3|-4|5|6|7|1N|8|@]|9|@]|A|$]]|$1|T|3|U|5|6|7|1O|8|@]|9|@]|A|$]]|$1|V|3|W|5|6|7|1P|8|@]|9|@]|A|$]]|$1|X|3|Y|5|6|7|1Q|8|@]|9|@]|A|$]]|$1|Z|3|10|5|H|7|1R|8|@]|9|@]|A|$I|J]]|$1|11|3|12|5|6|7|1S|8|@]|9|@$13|1T|14|1U|1|1V]|$13|1W|14|1X|1|1Y]]|A|$]]|$1|15|3|-4|5|6|7|1Z|8|@]|9|@]|A|$]]]|16|$17|$5|18|19|1A|A|$1B|1C]]|1D|$5|18|19|1A|A|$1B|1E]]]]

<h2>Bad use of brace positioning when creating statements</h2>

You should always put a brace after the statement due to automatic semicolon insertion.

For example this:

<pre><code>function()
{
 return
 {
 price: 10
 }
}
</code></pre>

differs greatly from this:

<pre><code>function(){
 return{
 price: 10
 }
}
</code></pre>

Becuase in the first example, javascript will insert a semicolon for you actually leaving you with this:

<pre><code>function()
{
 return; // oh dear!
 {
 price: 10
 }
}
</code></pre>

<hr>

<h2>Using setInterval for potentially long running tasks.</h2>

You should use setTimeout rather than setInterval for occasions where you need to do something repeatedly.

If you use setInterval, but the function that is executed in the timer is not finished by the time the timer next ticks, this is bad. Instead use the following pattern using setTimeout

<pre><code>function doThisManyTimes(){
 alert("It's happening again!");
}

(function repeat(){
 doThisManyTimes();
 setTimeout(repeat, 500);
})();
</code></pre>

This is explained very well by <a href="http://paulirish.com/" rel="nofollow">Paul Irish</a> on his <a href="http://paulirish.com/2010/10-things-i-learned-from-the-jquery-source/" rel="nofollow">10 things I learned from the jQuery source</a> video

I find that what not to do is a harder lesson to learn than what should be done. 

From my experience, what separates an expert from an intermediate is the ability to select from among various seemingly equivalent ways of doing the same thing.

So, when it comes to JavaScript what kinds of things should you not do and why?

I'm able to find lots of these for Java, but since JavaScript's typical context (in a browser) is very different from Java's I'm curious to see what comes out.

What anti-patterns exist for JavaScript?

服务器

jQuery

JSON

Java

我发现不做的事比应该做的事更难学。根据我的经验，区分专家和中级的是从做同样事情的各种看似相同的方法中进行选择的能力。那么，当涉及到JavaScript 时，你不应该做什么事情，为什么是？我能够找到很多针对Java的脚本，但是由于JavaScript的典型上下文(在浏览器中)与Java的上下文非常不同，所以我很好奇会有什...

问JavaScript有哪些反模式？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问JavaScript有哪些反模式？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问JavaScript有哪些反模式？
EN