生成的功能

Generated functions

本文关键字：功能      更新时间：2023-09-26

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

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

<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替换为选定的streamers URL，当它不是通过此函数生成时，它可以完美地工作。

生成的函数被附加到脚本的底部，因此它们位于同一组脚本标记中。是否有一些我错过了，会阻止他们从按钮访问onclick调用?

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

更好的解决方案是在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'));
})

最好在默认情况下将函数包含在页面中，然后将名称作为参数传递。有很多方法可以做到这一点，但这是我要采取的方法…

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 + ");}}");
    }
}
相关文章：