javascript - 使用数据还是放入 Javascript？

Question

我正在寻找 x-editable，你有 2 个选择

选项1

<a href="#" id="username" data-type="text" data-pk="1" data-url="/post" data-title="Enter username">superuser</a>

选项2

<a href="#" id="username">superuser</a>
    $('#username').editable({
    type: 'text',
    pk: 1,
    url: '/post',
    title: 'Enter username'
    });

我想这会导致一个普遍的问题，而不仅仅是针对 x-editable，在哪里设置更好？是在 html 中更好还是在 javascript 中更好。

我在想，如果你在javascript中这样做，你可能会有某种像变量这样的常量(即如果你使用模块模式)，所以从理论上讲，你可以在任何需要该链接的地方使用它如果你需要碰碰运气，你只能在一个地方碰碰运气，如果你采用“数据”方式，你可能必须开始查找和替换。

对于 Id 来说，也许它作为“数据”更好，因为这样你可以通过服务器端变量在页面加载时填写它(在我的例子中是 Asp.net MVC)

我不确定在这种情况下，x-editable 是否可以混合搭配。

Answer 1

data-* 方法更好，尤其是当您有来自服务器的数据时。您不想弄乱您的 JS，因为一些服务器端语言是与它一起编写的。

<a href="#" id="username" data-type="text" data-pk="1" data-url="/post" data-title="Enter username">superuser</a>

对于脚本，您可以使用 .data() 获取所有 data-*:

var username = $('#username');
var data = username.data();  // {type: 'text',pk: 1,url: '/post',title: 'Enter username'}
var username.editable(data);