javascript代码更改函数名称答案

【问题标题】：javascript code to change name of functionjavascript代码更改函数名称
【发布时间】：2011-06-04 08:03:02
【问题描述】：

我有 300 个名为 cloud1=cloud300 的函数，它们在 300 个按钮（按钮名称 - button1-button300）上调用，以更改名为 tree1-tree300 的 300 个文本框的类。我如何使用 for 循环来做到这一点。

function cloud1(){document.formname.tree1.className="css"}
function cloud2(){document.formname.tree2.className="css"}
function cloud3(){document.formname.tree3.className="css"}

【问题讨论】：

假设代码在所有函数中基本相同，您是否考虑过使用参数来解决它？可以发一下代码吗？
could1 to cloud3 现在就足够了 :)
您的用户界面有 300 个按钮？我什至不知道有什么理由证明这一点......
我正在链接他的另一个问题stackoverflow.com/questions/6235213/…，因为它可能与这个问题有关......
考虑只使用一个函数作为按钮容器的监听器，这样它就可以拦截冒泡事件。

标签： javascript function for-loop

【解决方案1】：

首先 - 创建一个无论单击哪个按钮都可以工作的点击处理程序 - 这个处理程序计算出所提供元素的名称，并将 button 替换为 tree：

function clicker(ev) {
    ev = ev || window.event;
    var el = ev.target || ev.srcElement;
    var name = el.getAttribute('name');
    var tree = name.replace('button', 'tree');
    document.formname[tree].className = 'css';
}

然后，在每个按钮上注册相同的处理程序

for (var i = 1; i <= 300; ++i) {
    document.formname['button' + i].onclick = clicker;
}

请参阅http://jsfiddle.net/alnitak/YHv52/ 进行工作演示。

当然，使用 jQuery 会更容易，特别是如果你做了正确的事情并使用 id 属性而不是 name 属性：

$('form[name="formname"] :button').live(function() {
    var button = this.id;
    var tree = button.replace('button', 'tree');
    $('#' + tree).addClass('css');
});

【讨论】：

您确定 jquery 代码正常运行吗？你似乎有一个不应该出现的报价？ $('#' + tree') 应该是 $('#' + tree)，对吧？还有，name.replace('button', 'tree') 中的名字是从哪里来的？
修复了这些感谢 - 是一个快速（并且公认仍然未经测试）的示例，说明 jQuery 可以使这种事情变得多短。

【解决方案2】：

假设所有函数都是全局的，这应该可以工作：

for (var i=1; i <= 300; i++) {
  this['cloud'+i].call();
}

但正如上面所说，请考虑使用一个函数并将参数传递给它。 300 个类似的函数是一个重构机会。

【讨论】：

你们都沉迷于堆栈溢出或工作吗？
cloud1(){document.formname.testbox1.className="css"}cloud2(){document.formname.testbox2.className="css"} 等等

【解决方案3】：

您可以只编写一个事件处理程序，它将按钮的 id（设置为处理程序名称，以实现可扩展性）作为参数：

<input type="button" id="cloud1" name="test_1" value="Click me"  onclick="handler(this.id)">

<script>

function handler(handler_id)
{
   this[handler_id].call();
}

【讨论】：

【解决方案4】：

幸运的是，您不需要为 300 个元素添加 300 个事件处理程序。您可以使用event delegation 并将仅一个事件处理程序附加到处理所有点击事件并决定做什么的祖先元素（例如<form>）。这应该是300x faster。 :)

这是一个 demo 向您展示它是如何工作的。

// add one event handler to the <form>
document.formname.onclick = function(e) {
    // normalize event for IE
    e = e || window.event;
    var target = e.target || e.srcElement;
    // if a button was clicked
    if (target.nodeName.toLowerCase() == 'button') {
        // generate tree name
        var name = target.name.replace('button', 'tree');
        // apply css class for this element
        document.formname[name].className = 'css';
    }
};

注意：假设document.formname 在所有按钮的父链中
（可以简单的document）。

【讨论】：

不，它不会快 300 倍。当然，它避免了注册事件 300 次的需要，但与单个处理程序 300 次注册方法相比，这几乎不是一个显着的开销。在操作中，它的速度是一样的。
如果你做的事情是 1x vs 300x，无论你怎么看它都会快 300x，而且只有一个事件处理程序会在内存中。所以1.) 更快2.) 使用更少的内存3.) 易于扩展：表单可以有任意数量的按钮树对。
300x 几乎没有仍然几乎没有。我不否认委托模型比我的答案更干净，但与让每个元素的 onclick 指向同一个处理程序相比，只有第三点实际上是正确的。
在您的计算机上几乎没有，但在速度较慢的机器、上网本、手机、旧浏览器上可能很重要。我很抱歉地说，但你是无知和漫不经心的。 jsperf.com/event-delegation-300
无需私人化。您的测试表明，使用“慢”方法需要（在最坏的情况下）几毫秒，是的，使用委托方法要快一些。我的论点是，如果它只有几毫秒，那并不重要——2ms、6us——它们仍然几乎没有。 FWIW，我不认为性能对 OP 来说真的是一个问题......

【解决方案5】：

只需将输入名称作为参数传递给

function button(inputname){
document.formname.inputname.className='css';
}

【讨论】：