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

I recently wrote some javascript code that filled a drop down list based on some XML, pretty simple stuff. The problem was I had to write similar code to do almost the same thing on a different page.

我最近写了一些javascript代码,它基于一些XML,非常简单的东西填充了一个下拉列表。问题是我必须编写类似的代码才能在不同的页面上执行几乎相同的操作。

Because the code was almost identical I named most of the functions the same, thinking that they would never be included in the same page. However, naming conflicts arose because both javascript files were eventually included in the same HTML page.

因为代码几乎相同,所以我将大多数函数命名为相同,认为它们永远不会包含在同一页面中。但是,由于两个javascript文件最终都包含在同一个HTML页面中,因此出现了命名冲突。

When I had to go back and change the names I simply added first_ or second_ to the method's names. This was a pain and it doesn't seem very elegant to me. I was wondering if there is a better way to resolve name conflicts in javascript?

当我不得不返回并更改名称时,我只需将first_或second_添加到方法的名称中。这是一种痛苦,对我来说似乎并不优雅。我想知道是否有更好的方法来解决javascript中的名称冲突?

3 个解决方案

#1

Try the JavaScript module pattern (or namespaces) used in various libraries.

尝试各种库中使用的JavaScript模块模式(或名称空间)。

Try to be DRY (don't repeat yourself) so you can avoid name collisions. If the code is almost the same you better avoid code duplication by creating a function which can handle both cases. The function can take two parameters: which dropdown to populate and with what data. This helps maintainability as well.

尝试干(不要重复自己),这样你就可以避免名字冲突。如果代码几乎相同,则最好通过创建可以处理这两种情况的函数来避免代码重复。该函数可以采用两个参数:填充下拉列表和使用哪些数据。这也有助于维护。

update: I assume that you take the XML from an AJAX request. In this case you can create on-the-fly anonymous functions with the appropriate parameters for callback inside a loop.

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

#2

I would look at how I could merge the two pieces of code (functions?) into a single function. If you need to populate a list box, then pass the list box id into the function, so you are not hard-coded to operate on one single control only...

我会看看如何将两段代码(函数?)合并为一个函数。如果你需要填充一个列表框,然后将列表框id传递给函数,那么你就不会硬编码只在一个控件上运行...

I did this on my rocket business's web site where I sold rocket motors with different delay values, but in essence, they were the same product, just a different delay value.

我在我的火箭业务的网站上做了这个,我在那里出售了具有不同延迟值的火箭发动机,但实际上,它们是相同的产品,只是一个不同的延迟值。

Perhaps this might try and explain what I'm trying to say... I use this if an image file happens to be missing, it will display a "no image" image in place of the real image.

也许这可能会尝试解释我想说的内容......如果图像文件碰巧丢失,我会使用它,它会显示“无图像”图像来代替真实图像。

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

In this case, you call it with:

在这种情况下,您可以使用以下命令调用

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

If you need more example with things like list boxes used, let me know. Perhaps even post some sample code of yours.

如果您需要更多使用列表框之类的示例,请告诉我。也许甚至发布你的一些示例代码。

#3

Another option (if possible) is to carefully tie the code to the element itself.

另一个选择(如果可能)是将代码小心地绑定到元素本身。

e.g.

<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>

#1