JavaScript、ビュー、イベントのベストプラクティス

Question

私は、ユーザーの選択に基づいて別のプラグインでビデオファイルを再生できるページを作成しています。 URLはどのビデオを再生すべきかをエンコードします。

ページはPHPサーバスクリプトから取得されます。ユーザは、AJAXリンクをいくつかクリックしてプラグインを選択します。各リンクは、Javascript関数を使用してAJAXリクエストを実行することによって、必要なプラグインをサーバーから取得します。この関数は、パラメータとしてビデオIDを取る必要があります。クライアント側では、jQuery Javascriptフレームワークを使用しています。

私はこのことをデザインパターンとして実行するのがベストプラクティスであることを知りたいと思います。コンテンツを取得するJavaScript関数をマップするためのjQuery $(#element).click()を使用して、サーバー

からコンテンツを取得する関数を呼び出すAJAXリンク用

1. 使用onclick HTML属性：私はいくつかの選択肢で考えています。

私は最初の選択肢を使用している場合は簡単にJavaScript関数に動画IDを渡すことができます。

<a id="X" href="#" onclick="retrieveXPlugin('<?php echo $id ?>')">X Plugin</a> 

が、ビューのコードは良い習慣ではありませんイベントコードとマッシュれます。

第二の代替は良く見えるが、私はこのように同じPHPファイルにクリックイベントをバインドする必要があります：私は把握したよう

<script type="text/javascript"> 
$(document).ready(function() { 
    $('#X').click(function() { 
     retrieveXPlugin('<?php echo $id ?>'); 
    }); 
} 
</script> 

私は別の.jsファイルに上記のコードを含めることはできませんので、私はサーバー側のPHP変数$idが必要です。これを行う唯一の方法は、あまりうまく見えないグローバルなJavaScript変数を使うことです。

これは、この例やその他のビューやイベントを整理するためのベストプラクティスですか？私はあなたの提案を待っています。

Answer 1

：以下のコメントで言ったように、

$(document).ready(function() { 
    $('#X').click(function() { 
     retrieveXPlugin($(this).attr ('name')); 
    }); 
} 

またはイベントよりよい：

<a id="X" href="#" name="<?php echo $id ?>">X Plugin</a> 

、別の.jsファイル内の

<a id="X" href="#" data-xplugin="<?php echo $id ?>">X Plugin</a> 

そして、9月中：あなたは、この方法を行うことができますので、data-*属性（感謝レイノス）でありますars .jsファイル：

$(document).ready(function() { 
    $('#X').click(function() { 
     retrieveXPlugin($(this).attr ('data-xplugin')); 
    }); 
} 

Answer 2

あなたは、単にそのようにアンカー+スクリプトタグを返すことができます：

<a id="X" href="#" onclick="retrieveXPlugin('<?php echo $id ?>')">X Plugin</a> 
<script type="text/javascript"> 
$(document).ready(function() { 
    $('#X').click(function() { 
     retrieveXPlugin('<?php echo $id ?>'); 
    }); 
} 
</script> 

そして、これはあなたのプレイヤーにアンカーを結合するであろう。

あなたは、exempleのために、あなたのリンクのname属性を使用でき