Question

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

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

我想知道将此作为设计模式的最佳做法。我正在考虑几种选择：

使用onclick HTML属性为AJAX链接调用从服务器
使用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>

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

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

2 个答案: