Javascript、视图和事件最佳实践

Posted 2023-02-26

【中文标题】Javascript、视图和事件最佳实践

【英文标题】：Javascript, views and events best practice

【发布时间】：2011-07-26 12:19:42

【问题描述】：

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

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

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

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

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

<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 变量。

那么，在本示例和其他示例中，组织视图和事件的最佳做法是什么？我正在等待您的建议。

【参考方案1】：

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

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

【讨论】：

将其存储在其他地方。不在名义上。也许data-XPLugin

@Raynos 你能进一步解释一下吗？据我所知，data-XPLugin 不是有效的 html 属性。

it's valid HTML5。 name 属性用于服务器端回发和标识元素。我相信把这些数据放在那里是不好的标记。

我不认为他可以使用.data ('xplugin') 来设置数据，因为需要回显值。也许.data ('xplugin') 可以从data-xplugin 属性中检索信息？ ...如果你想贡献，你不应该发布单词 cmets ...

.data(x) 是.attr('data-'+x) 的缩写，我只是建议您使用.data 来检索数据属性，而不是.attr

【参考方案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>

这会将锚绑定到您的播放器。