What anti-patterns exist for JavaScript? [closed]
Language:
Namespace polluting by creating a large footprint of variables in the global context.
Binding event handlers in the form 'foo.onclick = myFunc' (inextensible, should be using attachEvent/addEventListener).
Using eval in almost any non-JSON context
Almost every use of document.write (use the DOM methods like document.createElement)
Prototyping against the Object object (BOOM!)
A small one this, but doing large numbers of string concats with '+' (creating an array and joining it is much more efficient)
Referring to the non-existent
undefinedconstant
Design/Deployment:
(Generally) not providing noscript support.
Not packaging your code into a single resource
Putting inline (i.e. body) scripts near the top of the body (they block loading)
Ajax specific:
not indicating the start, end, or error of a request to the user
polling
passing and parsing XML instead of JSON or HTML (where appropriate)
Many of these were sourced from the book Learning JavaScript Design by Addy Osmati: https://www.oreilly.com/library/view/learning-javascript-design/9781449334840/ch06.html
edit: I keep thinking of more!
Besides those already mentioned...
Using the
for..inconstruct to iterate over arrays
(iterates over array methods AND indices)Using Javascript inline like
<body onload="doThis();">
(inflexible and prevents multiple event listeners)Using the 'Function()' constructor
(bad for the same reasonseval()is bad)Passing strings instead of functions to
setTimeoutorsetInterval
(also useseval()internally)Relying on implicit statements by not using semicolons
(bad habit to pick up, and can lead to unexpected behavior)-
Using /* .. */ to block out lines of code
(can interfere with regex literals, e.g.:/* /.*/ */)<evangelism> And of course, not using Prototype ;) </evangelism>
The biggest for me is not understanding the JavaScript programming language itself.
- Overusing object hierarchies and building very deep inheritance chains. Shallow hierarchies work fine in most cases in JS.
- Not understanding prototype based object orientation, and instead building huge amounts of scaffolding to make JS behave like traditional OO languages.
- Unnecessarily using OO paradigms when procedural / functional programming could be more concise and efficient.
Then there are those for the browser runtime:
- Not using good established event patterns like event delegation or the observer pattern (pub/sub) to optimize event handling.
- 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).
- 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.
- 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).
And finally the deployment issues.
- Not minifying your files.
- Web-server configs - not gzipping your files, not caching them sensibly.
<plug> I've got some client-side optimization tips which cover some of the things I've mentioned above, and more, on my blog.</plug>