Javascript web应用程序是否可能存在松耦合？

我理解，内容、表示和行为应该通过使用HTML、CSS和JS来独立实现它们来分离。在动态web应用程序中，在保持松散耦合的同时具体绑定这些元素是否有最佳实践？有可能吗？在不依赖jQuery的情况下优化

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

在有人调用OOP之前，我想将标记和CSS类保留在JS之外的原因是我甚至不想将HTML作为前端。我最终想要的底层模型至少有五种不同的表示形式，将模型与HTML紧密耦合至少可以排除其中两种

是否有某种方法可以在不牺牲动力学或松耦合的情况下将模型后期绑定到目标表示？像XML文档一样，将模型元素对应到模板HTML片段

更新

虽然提供关于因子分解和OO最佳实践的具体细节似乎有些落后，但我想提供一个更新鲜的例子，说明HTML固有的形式和功能的纠缠。HTML和JS之间内容和行为的纠缠是问题所在，但不是示例，我想要一个在更改细节时不会中断的答案。它来自一个与我第一次问这个问题时工作的项目非常不同的项目，但要点是一样的：

• 我有一些用于UI小部件的HTML。它是向用户表示模型对象（选项板的选择）的视图。调色板本身是应用程序任务的一部分，因此它们不是视图，而是模型

• 我想在至少2个不同的对话框（以及将来可能需要的任何对话框）中使用此小部件。在其中一个例子中，我需要一个更改的选择来立即执行操作，即在画布元素中重新存储一组图像，这些元素是同一对话框的一部分。在另一个例子中，我只需要从两个不同的集合中进行选择——每个集合中有一个选择

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

• 我不想让JS直接呈现HTML标记，因为这样做将失去IDE对HTML的错误检查和内容帮助。此外，如果HTML输出有问题，MyJS中的源代码将不那么清晰，因为生成HTML的过程看起来不像HTML，也不一定反映其结构。最后，我想独立于我的JS测试小部件的CSS和HTML更改的效果

• 我不想在我的源代码中包含其他依赖项，例如单独的模板和参数化语言，因为对各种标准的更改或不断发展的需求可能会破坏它们的兼容性，或者它们本身可能在将来变得无法维护，给我留下大量无用的源代码。依赖jQuery是可以的，因为它在浏览器之间进行规范化（更不用说为方便起见）的作用比它在无处不在的情况下可能打破的作用更大，但其他库将受到极大的怀疑

• 我想在JS中指定更改和检索小部件状态的详细信息（调色板由什么颜色组成，用户如何在其中选择），该JS只引用小部件及其组件，因为它将是以不同方式使用其信息的多个对话框的一部分

• 同时，其他JS代码（对话框的行为）需要能够观察和初始化小部件的状态，但不包括对小部件内部结构的任何特定引用，这可能会在某一天发生变化，以适应新功能、修复bug等

为了简单地制作小部件HTML的多个副本，我可以在HTML文件中存在的模板节点上调用

jquery.clone

，并从设置对话框的函数中插入我需要的内容。当任何克隆的元素都具有

id

或

name

属性时，HTML会使事情变得困难，但克隆过程中的小心处理会产生唯一标识符，将其对应的

标签

元素和

href

属性指向新标识符，并在数据属性中保持旧标识符的可访问性。因此，对于结构和内容来说，一切都很好，很明显，CSS表示可以很好地传播到克隆

当我试图用对话框的控制器实现小部件的接口时，麻烦就来了。什么是最适合未来的方式来公开小部件的状态抽象？也就是说，我不想使用

widgetJquery.find（'input:checked'）.val（）

从代码中获取所选颜色，该代码不一定要提交到基于选中输入元素的选择，该元素的value属性是一组序列化颜色

---

我希望这能让我更清楚地了解我要找的是什么，而不必把问题的细节搞得一团糟。

您总是可以使用不同的XSLT来解析XML。
但是，你似乎试图抽象太多。
使用MVC，使用不同的视图进行解析

---

您所写的方法在旧系统中很常见，我在10多年前使用过，这可能是进化扼杀它的一个很好的原因。

松耦合最好是在架构上使用设计模式实现的。如何实现松耦合的一个很好的例子可以在中找到。但是，有几种模式可供使用

我建议阅读