生成的函数

Question

我不确定这是最佳实践还是完全错误的方法来做到这一点，但我试图动态生成一些函数并在按钮单击时使用它们。这些按钮也是动态生成的。

我正在为我的公会网站制作一个twitch流切换器，而不是为每个注册的流器手动添加越来越多的代码，我只想添加一个函数调用。现在我有这个：

<script id="buttonScripts"> 
twitchStatus('player1'); 
twitchStatus('player2'); 
twitchStatus('player3'); 

function twitchStatus(twitchName){ 
$.getJSON('https://api.twitch.tv/kraken/streams/' + twitchName, function(streamData){ 
    if (streamData.stream == null){ 
     $(twitchButtons).append('<button type="button" class="btn btn-fill btn-round" onclick="' + twitchName + 'Function();">' + twitchName + '\'s Stream<img src="images/toffline.png"></button>'); 
     $(buttonScripts).append('function ' + twitchName + 'Function() {var StreamObject = document.getElementById("live_embed_player_flash");if (StreamObject != null) {StreamObject.setAttribute(\'data\', \'http://www.twitch.tv/widgets/live_embed_player.swf?channel=' + twitchName + ');}}'); 
    } else { 
     $(twitchButtons).append('<button type="button" class="btn btn-fill btn-round" onclick="' + twitchName + 'Function();">' + twitchName + '\'s Stream<img src="images/tonline.png"></button>'); 
     $(buttonScripts).append('function ' + twitchName + 'Function() {var StreamObject = document.getElementById("live_embed_player_flash");if (StreamObject != null) {StreamObject.setAttribute(\'data\', \'http://www.twitch.tv/widgets/live_embed_player.swf?channel=' + twitchName + ');}}'); 
     } 
    }) 
}; 
</script> 

脚本生成的按钮和函数，如果它检测到他们打开或关闭，但使用不同的PNG来显示状态。该函数本身修改嵌入对象以用所选流拖网URL替换流的URL，并且当它不是通过该函数生成时，它完美地工作。

生成的函数会附加到脚本的底部，以便它们位于同一组脚本标记中。有什么我失踪，会阻止他们从按钮onclick调用访问？

Answer 1

默认情况下，在页面中包含该函数会更好，然后将该名称作为参数传递。有这样做的方法很多，但是这是我采取的办法......

function twitchStatus(twitchName) { 
    $.getJSON('https://api.twitch.tv/kraken/streams/' + twitchName, function(streamData) { 

     var $button = $("<button/>", { 
      "class": "btn btn-fill btn-round", 
      "data-twitchname": twitchName, 
      "text": twitchName + "'s Stream", 
      "type": "button" 
     }); 

     if (streamData.stream == null) { 
      var $img = $("<img/>", { "src": "images/toffline.png" }); 
      $button.append($img); 
     } 
     else { 
      var $img = $("<img/>", { "src": "images/tonline.png" }); 
      $button.append($img); 
     } 

     $button.on("click", function() { 
      onButtonClick($(this).data("twitchname")); 
     }); 

     $(twitchButtons).append($button); 
    }) 
}; 

function onButtonClick(twitchName) { 
    var StreamObject = document.getElementById("live_embed_player_flash"); 
    if (StreamObject != null) { 
     StreamObject.setAttribute("data", "http://www.twitch.tv/widgets/live_embed_player.swf?channel=" + twitchName + ");}}"); 
    } 
} 

Answer 2

动态追加内容的脚本标记是不是一个伟大的模式可供遵循 - 并可能不会在所有的浏览器。

更好的解决方案是在button元素上使用单个委托事件处理程序，该元素使用data属性更改其每个按钮的行为。例如：

function twitchStatus(twitchName) { 
    $.getJSON('https://api.twitch.tv/kraken/streams/' + twitchName, function(streamData) { 
     var image = streamData.stream == null ? 'toffline' ? 'tonline'; 
     $(twitchButtons).append('<button type="button" class="btn btn-fill btn-round" data-name="' + twitchName + '">' + twitchName + '\'s Stream<img src="images/' + image + '.png"></button>'); 
    }) 
}; 

$(twitchButtons).on('click', '.btn', function(e) { 
    e.preventDefault(); 
    $("#live_embed_player_flash").attr('data', 'http://www.twitch.tv/widgets/live_embed_player.swf?channel=' + $(this).data('name')); 
})