Bootstrap、Angular.js和Ember.js中使用的数据属性选项是否与不影响JavaScript原则相冲突？

Question

我一直听说（比如“不侵入式JavaScript”）将JavaScript与HTML标记分开是一个好的实践。然而，我发现许多新兴和流行的框架，如Bootstrap、Angular.js和Ember.js，都采用了相反的趋势。请问有人能告诉我为什么这不被认为是不好的实践吗？

- sdellis

---

我同意你的观点，认为这确实是不好的做法。对于大多数CSS“框架”，它们建议使用类名诸如“left-col”、“span-3”等，这些类名直接与设计相关。在这方面，jQuery Mobile也有类似的问题，需要使用多个数据属性来样式化按钮（例如）。 - powerbuoy

我倾向于同意，但是网格系统可以很有用，而且在使用网格时，我看不到任何避免使用这些类型的类名的方法。 - sdellis

Bootstrap 可以被用作 LESS，而使用 LESS 时，可以在不触碰标记的情况下使用 Bootstrap 的完整网格系统（以及更多功能）。 - Piedone

Answer 1

不显眼的JavaScript是Web上许多地方的良好实践。您提到的框架通常用于创建完整的JavaScript应用程序。在这些应用程序中，没有JavaScript的情况下体验通常是一个空白页面。在这种环境下，将标记与JavaScript分离的价值相对较低。

- Luke Melia

---

我认为你基本上已经回答了这个问题。当然，我想要构建的某些功能是没有JavaScript就无法实现的，但这并不意味着网站在禁用JavaScript时就不能正常运行。另一方面，我还需要确定有多少潜在用户禁用了JavaScript，以确定是否应该关注这个问题--屏幕阅读器现在通常可以很好地处理JavaScript，所以这不是一个可访问性问题，而是一个偏好问题。 - sdellis

更普遍地说，我认为这个想法是，与视图有关的基本代码可以/应该逻辑上包含在标记中。因此，虽然您希望将复杂的业务逻辑保留在html之外，但包括声明界面本身如何运作的javascript是有意义的。 - Nathan Stretch

Answer 2

我也在思考同样的问题，得出以下结论：

HTML是一种用于呈现文档的标记语言。每个人都在谈论的语义实际上与表示丰富文档有关。这包括图像和链接，允许更丰富的体验。 相同的原则可以应用于Word文档，其中您可以将特定文本标记为强调，然后将强调样式设置为红色，这将是表达意图的语义正确方式。

问题出现是因为HTML实际上包括允许用户交互的元素-表单。最初的设计是允许非专业人士创建简单的交互式UI。当我检查不同的桌面GUI框架时，实际上没有区分实际视图和视图逻辑，因为构建GUI时您不需要该分离。

对我而言，重要性在于您编写的内容基于多少内容或GUI。因为HTML具有两个用途，所以很难知道从服务器提供什么内容。 基本上，像维基百科甚至Stackoverflow等网站都是以内容为导向的。这意味着如果它们想要面向更广泛的客户端，例如机器人和旧浏览器，它们应该能够流式传输纯html。 我考虑的是提供内容和一些更丰富的UI体验（例如我正在编写此评论的文本区域）时可能采用两种可能的策略。其中一种是提供HTML，然后初始化GUI。这也被称为非侵入式JavaScript和语义HTML。大多数以内容为导向的网站都这样做。这主要是为了能够从允许其内容更易于访问的浏览器和机器人中受益。 另一种策略将是识别客户端类型并提供不同的内容，这只能在客户端上可靠地实现，因为在两种情况下都会提供HTML。由于HTML作为内容和GUI表示的使用/滥用方式，这仍然接近第一种策略。

如果您正在编写不提供内容而提供实际服务/进程的应用程序，则类似AngularJS等的架构更适合。

根据我的经验，大多数企业都需要提供两者。比如说您有一个应用程序，使用HTML/Javascript让用户创建绘画。这个应用程序不需要遵循任何不显眼的指南，但是它也无法在旧的浏览器上运行。但是，如果您提供了绘画之间的社交分享功能，允许评论和其他内容，那么最好以一种使机器人和其他客户端可以轻松访问内容的方式编写该网站的此部分。

- edzhelyov

---

同意！这是关于内容页面与交互应用的问题。内容页面应该不显眼，以便内容能够立即访问（然后通过JS进行增强）。交互应用可以更紧密地耦合，因为“应用程序”必须在完全加载和交互之前才有用（因此，分离并不是必要的）。 - Jess Telford

实际上，表单也具有语义意义。它们代表了HTTP服务器将在特定资源上接受的操作或查询。表单的显示是表示形式，但标记是内容。例如，可以指示应用程序读取表单并提交它，而不必理解浏览器如何以图形方式显示它。这是通过HTTP指定API的一种方式，属于超媒体API的范畴。 - Peeja