javascript - 生成的函数

Question

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

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

<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

将内容动态附加到脚本标记并不是一个很好的模式 - 并且可能不适用于所有浏览器。

更好的解决方案是在 button 元素上使用单个委托(delegate)事件处理程序，该事件处理程序使用 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'));
})