使用函数简化我的 javascript

Posted 2023-02-22

【中文标题】使用函数简化我的 javascript

【英文标题】：Streamlining my javascript with a function

【发布时间】：2011-02-16 01:35:21

【问题描述】：

我有一系列选择列表，用于填充带有 ID 的文本框。 因此，您单击一个选择选项，另一个文本框将填充其 id。

只有一个 select/id 对，这很好用，但我有多个，唯一改变的是 select 和 input 的 id .. 实际上只是结尾发生了变化，输入都以 featredproductid 和select ids 都以 recipesproduct 开头，然后都以 category 结尾。

我知道为每个类别一遍又一遍地列出这一点并不是这样做的方法。我想我需要制作一个类别数组 var cat = ['橄榄油'，“谷物”，“意大利面”] 然后使用 forEach 函数？也许吧？

这是笨拙的代码

window.addEvent('domready', function() 
    $('recipesproductoliveoil').addEvent('change', function(e)
       pidselected = this.options[this.selectedIndex].getProperty('value') ;
   $("featuredproductidoliveoil").setProperties(
       value: pidselected); ;
    );
       $('recipesproductgrains').addEvent('change', function(e)
           pidselected = this.options[this.selectedIndex].getProperty('value') ;
       $("featuredproductidgrains").setProperties(
           value: pidselected); ;
        );
      $('recipesproductpasta').addEvent('change', function(e)
          pidselected = this.options[this.selectedIndex].getProperty('value') ;
      $("featuredproductidpasta").setProperties(
          value: pidselected); ;
       );
    $('recipesproductpantry').addEvent('change', function(e)
        pidselected = this.options[this.selectedIndex].getProperty('value') ;
    $("featuredproductidpantry").setProperties(
        value: pidselected); ;
     );

);

请记住，这是 mootools 1.1（不，抱歉，我无法更新）。 我确信这是一种基本的东西，我似乎已经把我的大脑包围了。但我很确定按照上面的方式这样做并不是很好......

【问题讨论】：

JS 支持高阶函数（接受和返回函数的函数）。请注意，答案都遵循一个共同的模式：将函数的一部分分解出来，将其转化为高阶函数的参数。

您应该将pidselected 声明为本地（在侦听器中为var pidselected），这样您就不会使用全局并污染全局命名空间。

【参考方案1】：

你已经接近了。你可以这样做：

var cats = ['oliveoil', 'grains', 'pasta'];
for (i in cats) 
    addChangeFunction(cats[i]);


function addChangeFunction(name) 
    $('recipesproduct' + name).addEvent('change', function(e) 
        pidselected = this.options[this.selectedIndex].getProperty('value');
        $('featuredproductid' + name).setProperties(
            value: pidselected
        );
    );

【讨论】：

为什么要根据id来限制？更语义化的方法是通过选择器来处理它并使用数组，比如var addChangeEvent(elements) elements.each(function(el) el.addEvent(...)，要么添加 class="food" 到它们，要么转到addChangeEvent($("formid").getElements("select"));。在 1.2 中，您可以将事件直接应用于选择器 a'la $("formid").getElements("select").addEvent()'

@Dimitar：确实有更多通往罗马的路。这只是最短的。随意发布您自己的方式作为答案。

谢谢，这正是我的意思。所以在这个cats[i] 中作为名称传递给函数。对吗？

@dimitar 是的，如果我可以控制初始输出或 mootools 版本，您是对的，但我没有——代码中没有钩子，我无法添加任何钩子。在这种情况下，这似乎是最好的课程。

那么肯定不要使用for i in cats。这是mootools。在mootools中，数组是原型化的，使用这种循环也会尝试使用所有原型化的数组方法！简单地使用['oliveoil', 'grains', 'pasta'].each(function(el) something(el); ) - 这里是流血原型：jsfiddle.net/BxhAK

【参考方案2】：

这样的事情可能会有所帮助：

 function bindSelectFeature(select, featured) 
    $(select).addEvent('change', function(e)
        pidselected = this.options[this.selectedIndex].getProperty('value') ;
        $(featured).setProperties(
          value: pidselected
        );
     );
  );
  bindSelectFeature('recipesproductpasta','featuredproductidpasta');