JavaScript/HTML解耦有什么价值吗？如果是，怎么做？

最近，我为自己创建的网站编写了越来越多的JavaScript。我忍不住认为我做错了什么，或者应该有更好的办法

在服务器端，我有一个清晰的关注点分离，但在客户端，我发现自己拥有整个JavaScript部分，这些部分依赖于特定的元素id和类名等。例如，在一个有很多表单字段的页面上，我可能有一部分代码如下所示：

$(document).ready(function() {
     $("#ButtonID1").button();
     $("#Grid").someGridFunction();
     $(".data-fields").datepicker();
     $(".submit-links").click(function() { this.closest("form").submit(); });
});

我更喜欢的是HTML元素通过某种方式请求获得某些功能。比如：

<input type="text" data-make="datepicker" />

但即使这样也有缺陷，因为定制它需要HTML元素上越来越多的属性来详细说明细节。我对KnockoutJS做了类似的设置，我真的对所需的HTML不满意

也许是这样的：

<input type="text" data-init="buildDefaultDatePicker" />

其中“buildDefaultDatePicker”是一个JavaScript函数，用于处理必要的工作

最后，我的问题有两个。就特定元素ID和类名而言，将JavaScript与UI分离是否有任何价值。如果是这样，您使用了哪些模式或方法来实现这一点

---

（注意，我在上面使用jQuery语法，但我认为这个问题与框架无关，所以答案应该无关紧要）

在我看来，您已经有了正确的想法（使用类将JavaScript增强应用于特定元素）。使用自定义属性，例如

datamake

或

datainit

，将是做同样事情的另一种（更为精细的）方法。按照已有的方式，可以使用特定的类作为请求来获得某些功能

---

我建议的方法是在HTML和JavaScript之间保持干净的分离。JavaScript应该始终位于外部文件中，并写入

$（document）上的目标页面元素。准备好提供请求的功能。
我只需要使用一个类来表示要附加到的元素。它具有语义含义，并且您没有将html ID或它们的位置耦合到javascript中

在可能的情况下，您需要一些细节，例如日期选择器上的最小或最大日期，我认为少量的数据属性是一种优雅的方式来提供它。但是，实际上，任何需要更多数据属性的东西都可能是一种全新的东西，值得拥有自己的类别，从而消除了对数据属性的需求。例如，您可能有一个datepicker类，并且发现自己不断地提供一个今天的最小日期来强制选择未来的日期。好吧，只需创建一个“futuredatepicker”类即可。
这是一个脚本。但是如果你能突出你的故事情节，人们可以回答！！！嗯?？不知道你在说什么。我给出了背景，我的想法，并正确地提出了问题。我的脚本在不同的文件中。我还清楚地说明了我是如何避免$（document）.ready调用的，以及我已经在使用的调用主体中引用的所有ID。好的，太好了。我想说的是，你已经用正确的方式做了，没有更好的方式将JavaScript附加到HTML元素。通过在外部保存脚本，您可以保持良好的分离度，JavaScript增强了基本的HTML UI（即，您仍然可以在没有日期选择器的情况下键入日期）。基本上，新功能的推出必须来自JavaScript。HTML不可能提取JavaScript，但它可以附加类/ID来获取所需的功能。我们可能还不知道它是什么。这是我一直在玩弄的一把小提琴：我没有跟着你。所以我有一个类来完成这项工作，我知道，如何让它连接到HTML元素，而不将脚本绑定到元素上？我所说的类是指css类。例如然后执行$（“.datepicker”）.datepicker（）。这里html和js之间没有真正的耦合，因为js代码不知道任何ID或html结构。它也比使用“数据字段”类更有意义。我在过去做过很多，只是不喜欢偶尔将css类添加到属性中，而这些属性仅用于JavaScript选择。更不用说它根本不可重复使用。我想，选择你的毒药吧。就我个人而言，我觉得css类的方法很优雅，而且它完全没有超出class属性的作用范围。将css样式视为属性的一个使用者。关于可重用性，我不明白为什么不能。您可以有特定于站点的插件或引导脚本，它们只对所有可能的类应用适当的插件。使用构建步骤，你甚至可以将它们组织成单独的脚本，在构建时组合在一起。我同意，它简单、优雅，而且取决于类名，完成的工作非常清楚。