Javascript，观点和事件的最佳实践

Question

我正在创建一个页面，可以根据用户选择播放带有备用插件的视频文件。 该URL编码应播放的视频。

该页面是从PHP服务器脚本中检索的。 用户通过单击某些AJAX链接来选择插件。 每个链接通过使用Javascript函数执行AJAX请求从服务器检索所需的插件。 此功能必须将视频ID作为参数。 在客户端，我使用jQuery Javascript框架。

我想知道将这作为设计模式的最佳实践。 我在考虑几种选择：

1. 使用onclick HTML属性为AJAX链接调用从服务器检索内容的函数
2. 使用jQuery $(#element).click()来映射检索内容的Javascript函数。

如果我使用第一个替代方案，则可以轻松地将视频ID传递给Javascript函数：

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

但是视图代码与事件代码混合在一起，这不是一个好习惯。

第二种方法看起来更好，但我必须在同一个PHP文件中绑定click事件，如下所示：

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

正如我所知，我不能将上述代码包含在单独的.js文件中，因为我需要服务器端PHP变量$id 。 执行此操作的唯一方法是使用看起来不太好的全局Javascript变量。

那么，在这个例子和其他任何组织中组织视图和事件的最佳实践是什么？ 我在等你的建议。

Answer 1

例如，您可以使用链接的name属性：

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

并在一个单独的.js文件中：

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

或者事件更好，就像下面的评论中所说，是data- *属性（感谢Raynos），所以你可以这样做：

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

并在一个单独的.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>

这会将锚点绑定到你的玩家身上。