使用函数简化我的 javascript答案

【问题标题】：Streamlining my javascript with a function使用函数简化我的 javascript
【发布时间】：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），这样您就不会使用全局并污染全局命名空间。

标签： javascript mootools

【解决方案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');

【讨论】：