Question

让我们假设您想要预定义由按钮生成器创建的许多按钮。

function createButton(name, func){
  var btn = '<div class = "button" name = '+name+'/>';
  $('.btn[name = "'+name+'"]').on('click', function(func){});
}

var butn1 = {
  name : "exit",
  func : func1
}

createButton(btn1);

现在如果你有100个按钮，这意味着很多变量。那不好吗？如果是，那会更好吗？

function chooseButton(name){
 var btn;
 switch(name){
   case "exit":
      btn = {
         name : "exit",
         func : func1
      }
    break;
    case......
  }
 return btn;
}

   var myBtn = chooseButton('exit');
  createButton(myBtn);

Answer 1

如果觉得使用更通用的构造函数来做这类事情会更好，假设我已经理解了你的问题。

<强> HTML

<div id="buttonContainer">
    <button class="btn btn-type-a">Type A Button</button>
    <button class="btn btn-type-b">Type B Button</button>
    <!-- add further types -->
</div>

<强> JS

var _functs = {
    typeA: function () { alert('type A funct'); },
    typeB: function () { alert('type B funct'); }
};

var _buttons = document.getElementById('buttonContainer')[0].childNodes;

for (var _i = 0; _i < _buttons.length; _i++) {
    if (_buttons[_i].classList.contains('btn-type-a')) {
        /* 
         node.classList.contains (not supported by IE < 10)
         $(_buttons[_i]).hasClass('btn-type-a') if you're using jQuery
        */
        _buttons[_i].addEventListener('click', _functs.typeA, false);
    }
    // other logic for other button assignment
};

在函数中存储变量

1 个答案: