解决JavaScript中名称冲突的最佳方法是什么？

Question

我最近写了一些JavaScript代码，基于一些XML填充下拉列表，非常简单的东西。问题是我不得不编写类似的代码来在不同的页面上做几乎相同的事情。

由于代码几乎相同，我将大部分函数命名为相同，认为它们永远不会包含在同一页中。但是，命名冲突产生的原因是两个JavaScript文件最终都包含在同一个HTML页面中。

当我不得不返回并更改名称时，我只是将first_或second_添加到方法的名称中。这是一种痛苦，对我来说看起来并不高雅。我想知道是否有更好的方法来解决JavaScript中的名称冲突？

Answer 1

尝试在各种库中使用的JavaScript module pattern（或名称空间）。

试着干掉（不要重复自己），这样可以避免名称冲突。如果代码几乎相同，则最好通过创建可处理这两种情况的函数来避免代码重复。该函数可以采用两个参数：哪个下拉列表填充以及哪些数据。这也有助于可维护性。

更新：我假设你从AJAX请求中获取XML。在这种情况下，您可以使用循环内的适当回调参数创建动态匿名函数。

Answer 2

我想看看如何将两段代码（函数？）合并到一个函数中。如果你需要填充一个列表框，然后将列表框ID传递给函数，所以你不是硬编码，只能在一个单一的控件上操作...

我在我的火箭业务的网站上做过我以不同的延迟值销售火箭发动机，但本质上它们是同一产品，只是不同的延迟值。

也许这可能会试图解释我想说的是什么......如果图像文件碰巧缺失，它会显示一个“无图像”图像来代替真实图像。

function goBlank(image) 
{ 
    if(image) { 
    var imgobj = document[image]; 
    imgobj.src="/images/blank.png"; 
    } 
} 

在这种情况下，你把它叫做：

<img src="/images/aerotech.png" name="header" onError="goBlank('header');"> 

如果您需要的是，象，让我知道列表框更多的例子。也许甚至会发布你的一些示例代码。

Answer 3

另一种选择（如果可能的话）是仔细将代码绑定到元素本身。

例如

<input type="text" name="foo" id="foo" value="World" onchange="this.stuff('Hello ' + this.value);"/> 
<script> 
    document.getElementById('foo').stuff = function(msg){ 
    //do whatever you want here... 
    alert('You passed me: ' + msg); 
    }; 
</script>