生成された関数

Question

これはベストプラクティスか完全な間違った方法であるかわかりませんが、いくつかの関数を動的に生成してボタンのクリックに使用しようとしています。ボタンも動的に生成されます。

私は、ギルドのウェブサイトのためのツイッチストリームスイッチャーを作成しています。サインアップするストリーマーごとに手動でコードを追加するのではなく、ただ一つの関数呼び出しを追加します。それがまたはオフラインでそれらを検出したが、ステータスを表示するために別のPNGを使用している場合

<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> 

スクリプトはボタンや機能を生成します。今、私はこれを持っています。この関数自体は埋め込みオブジェクトを変更してストリームの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

が続くのに最適なパターンではありません - そして、おそらくすべてのブラウザでは動作しません。

より良い解決策は、ボタンdataの属性を使用して各ボタンの動作を変更する要素buttonで1つの委任イベントハンドラを使用することです。このようなもの：

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')); 
})