JavaScript存在哪些反模式？


What anti-patterns exist for JavaScript?

我发现不做的事情比学习应该做的更难学习。

根据我的经验，专家和中间人之间的区别在于能够从各种看似相同的方式中做出相同的选择。

那么，谈到JavaScript，你应该做什么样的事情以及为什么？

我能够为Java找到很多这些，但由于JavaScript的典型上下文(在浏览器中)与Java非常不同，我很想知道它会发生什么。

相关讨论

语言：

  • 命名空间通过在全局上下文中创建大量变量来进行污染。

  • 绑定事件处理程序的形式为'foo.onclick = myFunc'(不可扩展，应该使用attachEvent / addEventListener)。

  • 几乎在任何非JSON上下文中使用eval

  • 几乎每次使用document.write(使用像document.createElement这样的DOM方法)

  • 针对Object对象的原型设计(BOOM！)

  • 这是一个小的，但用'+'做大量的字符串连接(创建一个数组并加入它更有效)

  • 参考不存在的undefined常数

设计/部署：

  • (通常)不提供noscript支持。

  • 不将您的代码打包到单个资源中

  • 将内联(即主体)脚本放在主体顶部附近(它们阻止加载)

特定于Ajax：

  • 不指示对用户的请求的开始，结束或错误

  • 轮询

  • 传递和解析XML而不是JSON或HTML(如果适用)

编辑：我一直在想更多！

相关讨论

除了那些已经提到的......

  • 使用for..in构造迭代数组
    (迭代数组方法和索引)

  • 使用Javascript内联，如
    (不灵活并防止多个事件监听器)

  • 使用'Function()'构造函数
    (由于同样的原因eval()很糟糕)

  • 将字符串而不是函数传递给setTimeout或setInterval
    (内部也使用eval())

  • 不使用分号依赖隐式语句
    (养成习惯的坏习惯，可能导致意外行为)

  • 使用/ * .. * /来阻止代码行
    (可以干扰正则表达式文字，例如：/* /.*/ */)

    <传授>
    当然，不使用Prototype;)

相关讨论

对我来说最大的不是理解JavaScript编程语言本身。

  • 过度使用对象层次结构并构建非常深的继承链。在大多数情况下，浅层次结构在JS中工作正常。
  • 不了解基于原型的面向对象，而是构建大量的脚手架，使JS表现得像传统的OO语言。
  • 当程序/函数式编程可以更简洁和有效时，不必要地使用OO范例。

然后是浏览器运行时的那些：

  • 不使用事件委托或观察者模式(pub / sub)等良好建立的事件模式来优化事件处理。
  • 当DOM节点可以在内存中并一次性附加时，进行频繁的DOM更新(如循环中的.appendChild)。 (巨大的性能优势)。
  • 当可以使用本机方法时，过度使用库来选择具有复杂选择器的节点(getElementById，getElementByTagName等)。现在这个问题变得越来越少，但值得一提。
  • 当您希望第三方脚本与您的页面位于同一页面时扩展DOM对象(最终会破坏彼此的代码)。

最后是部署问题。

  • 不缩小文件。
  • Web服务器配置 - 不是压缩文件，不是明智地缓存它们。

我有一些客户端优化技巧，涵盖了我上面提到的一些事情，以及更多，在我的博客上。

  • 浏览器检测(而不是测试您要使用的特定方法/字段是否存在)
  • 在大多数情况下使用alert()

另请参阅Crockford的"Javascript：The Good Parts"，以避免各种其他事情。 (编辑：警告，他对他的一些建议有点严格，比如使用"==="而不是"=="所以带上任何粒子的盐为你工作)

相关讨论

一些事情就在我的头顶。当我想到更多时，我会编辑这个列表。

  • 不要污染全局命名空间。而是组织对象中的东西;
  • 不要省略变量的'var'。这会污染全局命名空间，并可能使您遇到其他此类脚本的麻烦。
相关讨论

任何使用'与'

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

相关讨论

任何提及

1
document.all

在你的代码中，除非它在特殊代码中，只是为了IE来克服IE错误。 (咳嗽document.getElementById()咳嗽)

创建语句时使用大括号定位很糟糕

由于自动分号插入，您应该始终在语句后放置一个大括号。

例如：

1
2
3
4
5
6
7
function()
{
    return
    {
        price: 10
    }
}

与此有很大不同：

1
2
3
4
5
function(){
    return{
        price: 10
    }
}

因为在第一个例子中，javascript会为你实际插入一个分号：

1
2
3
4
5
6
7
function()
{
    return;    // oh dear!
    {
        price: 10
    }
}

将setInterval用于可能长时间运行的任务。

在需要重复执行某些操作的情况下，应该使用setTimeout而不是setInterval。

如果你使用setInterval，但计时器中执行的函数在计时器下一次计时时没有完成，这很糟糕。而是使用setTimeout使用以下模式

1
2
3
4
5
6
7
8
function doThisManyTimes(){
    alert("It's happening again!");
}

(function repeat(){
    doThisManyTimes();
    setTimeout(repeat, 500);
})();

Paul Irish对我从jQuery源视频中学到的10件事情进行了很好的解释

相关讨论

不使用基于社区的框架来执行DOM操作，事件处理等重复性任务。

相关讨论

很少有效的缓存：

  • 当您可以使用Google的Libraries API等共享API加速页面加载时，请不要在您的服务器上存储库的副本(jQuery，Prototype，Dojo)
  • 将您可以合并的所有脚本合并并缩小为一个
  • 使用mod_expires为您的所有脚本提供无限的缓存生命周期(永不重新下载)
  • 版本化您的javascript文件名，以便客户端可以进行新的更新，而无需重新加载/重新启动
    (即myFile_r231.js，或myFile.js？r = 231)