javascript - JavaScript/HTML 解耦有什么值(value)吗？如果是这样怎么办？

Question

最近我一直在为我创建的网站编写越来越多的 JavaScript。我忍不住认为我做错了什么，或者必须有更好的方法。

我在服务器端完全分离了关注点，但在客户端，我发现自己拥有依赖于特定元素 ID 和类名称等的整个 JavaScript 部分。例如，在一个页面上，有很多表单字段，我可能有一段代码看起来像:

$(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 分开是否有任何值(value)。如果是这样，您使用了哪些模式和/或方法来实现这一目标？

(注意，我在上面使用的是 jQuery 语法，但我认为这个问题与框架无关，所以对答案来说无关紧要)

Answer 1

在我看来您已经有了正确的想法(使用类将 JavaScript 增强应用到特定元素)。使用自定义属性，如 data-make 或 data-init 只是做同样事情的另一种(更繁琐)方式。按照已有的方式，可以使用特定的类作为获取特定功能的请求。

我建议的方法是在 HTML 和 JavaScript 之间保持清晰的分离。 JavaScript 应始终位于外部文件中，并写入 $(document).ready 上的目标页面元素以提供请求的功能。