What anti-patterns exist for JavaScript? [closed]

前端未结

关注

 10  1662

孤独总比滥情好

相关标签:

10条回答

遥遥无期

2020-12-22 17:48
Effective caching is seldomly done:
- Don't store a copy of the library (jQuery, Prototype, Dojo) on your server when you can use a shared API like Google's Libraries API to speed up page loads
- Combine and minify all your script that you can into one
- Use mod_expires to give all your scripts infinite cache lifetime (never redownload)
- 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)
0 讨论(0)
发布评论:

提交评论
- 加载中...
梦如初夏

2020-12-22 17:50
- browser detection (instead of testing whether the specific methods/fields you want to use exist)
- using alert() in most cases
see also Crockford's "Javascript: The Good Parts" 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)
0 讨论(0)
发布评论:

提交评论
- 加载中...
遇见更好的自我

2020-12-22 17:52
Besides those already mentioned...
- Using the for..in construct 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 reasons eval() is bad)
- Passing strings instead of functions to setTimeout or setInterval
  (also uses eval() 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>
0 讨论(0)
发布评论:

提交评论
- 加载中...
-上瘾入骨i

2020-12-22 17:58
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>
0 讨论(0)
发布评论:

提交评论
- 加载中...
情歌与酒

2020-12-22 17:59
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 undefined constant
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!
0 讨论(0)
发布评论:

提交评论
- 加载中...
你的背包

2020-12-22 18:00

any use of 'with'

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

0 讨论(0)
发布评论:

提交评论
- 加载中...

1 2 下一页

热议问题