javascript - Web应用程序是否可能存在松耦合？

Question

我知道应该使用HTML，CSS和JS分别实现内容，表示形式和行为的分离，以实现它们。是否有最佳实践来具体绑定(bind)这些元素，同时在动态Web应用程序中保持松散耦合？可能吗最佳选择是不依赖jQuery？

为了澄清我在说什么:HTML没有定义新标签的机制，因此，当您的JavaScript模型需要生成内容时，其表示的标签和结构必须在JS中定义，或者以某种方式使其可访问行为与内容的耦合。

在有人打电话给OOP之前，我想将标记和CSS类保留在JS之外的原因是，我什至不想将HTML作为前端。我最终将要使用的基础模型至少有五种不同的表示形式，并将模型与HTML紧密耦合，至少要排除其中两种。

有什么方法可以将模型后期绑定(bind)到目标表示，而不牺牲动力学或松散耦合吗？像XML文档一样，相应的模型元素可以模板化HTML代码段？

更新

尽管提供有关分解和OO最佳实践的问题的具体细节似乎是落后的，但我想提供一个HTML固有的形式与功能纠缠的新示例。 HTML和JS之间内容和行为的纠缠是问题所在，但不是示例，我希望我的答案在更改细节时不会中断。这是与我最初问这个问题时所从事的项目截然不同的项目，但要旨是相同的:

我为UI小部件提供了一些HTML。这是一个向用户表示模型对象(调色板选择)的 View 。调色板本身是应用程序任务的一部分，因此它们不是 View ，而是模型。

我想在至少2个不同的对话框(以及将来可能需要的任何对话框)中使用此小部件。其中之一是，我需要更改选择以立即采取行动，即对同一对话框的一部分的 Canvas 元素中的一组图像重新着色。在另一种情况下，我只需要从两个不同的集合中进行选择-每个集合中一个选择。

我不想复制并粘贴此小部件的HTML表单或JS行为，因为我希望维护和修订从一个基本事物传播到其所有实例。因此，无论其形式如何，小部件的一个实例都可能存在于我的源代码中。

我不想让我的JS直接呈现HTML标签，因为这样做会放弃我的IDE的错误检查和对HTML的内容帮助。此外，如果HTML输出存在问题，则它们在我的JS中的来源将不太清楚，因为生成HTML的过程看起来不像HTML，或者不一定反射(reflect)其结构。最后，我想独立于我的JS测试更改小部件的CSS和HTML的效果。

我不想涉及其他依赖项，例如我的资料中使用了单独的模板和参数化语言，因为将来对各种标准的更改或不断变化的需求可能会破坏它们的兼容性，或者它们本身可能会变得难以维护，从而给我留下了大量无用的资料。依赖jQuery是可以的，因为它在浏览器之间进行标准化(更不用说为方便起见)所做的工作要比它无处不在的可能性要大得多，但是其他库将被极度怀疑。

我想在仅引用窗口小部件及其组成部分的JS中指定更改和检索窗口小部件状态的详细信息(颜色由调色板组成，用户如何在其中进行选择)，因为它将成为多个对话框的一部分以不同的方式使用其信息。

同时，其他JS代码(对话框的行为)需要能够观察和初始化小部件的状态-但不包括对小部件内部结构的任何特定引用，这有一天可能会更改以适应新功能，修复错误等。

为了简单地制作小部件的HTML的多个副本，我可以选择在存在于HTML文件中的模板节点上调用jquery.clone，然后从设置对话框的函数中在需要的地方插入内容。当任何克隆的元素具有id或name属性时，HTML都会使事情变得困难，但是在克隆过程中进行仔细的处理可以使唯一标识符，将其对应的label元素和href属性指向新标识符，并使旧属性可在数据属性中访问。因此，所有内容和结构都很好，而且CSS表示显然可以很好地传播到克隆。

当我尝试使用其对话框的 Controller 实现小部件的界面时，碰到了麻烦。公开小部件状态抽象的最适合 future 的方法是什么？即我不想使用widgetJquery.find('input:checked').val()从代码中获取选定的颜色，这些代码不一定要基于一个选中的输入元素(其value属性是一组序列化的颜色)来进行选择。

我希望这样可以使我在寻找什么时更加清晰，而又不把问题与细节混为一谈。

Answer 1

您总是可以让不同的XSLT解析XML。
但是，看来您尝试太多了。
使用MVC，使用不同的 View 进行解析。

您所写的方法在旧系统中很常见，我在10年前就曾使用过这种方法，可能有充分的理由说进化会杀死它。