在用JavaScript构建HTML时，保持关注点分离的最佳实践是什么?

What are best practices to maintain separation of concerns when building HTML with JavaScript?

本文关键字：最佳 分离 是什么 关注点 构建 JavaScript HTML 在用      更新时间：2023-09-26

我目前正在通过阅读jQuery in Action学习jQuery。

这本书通过使用"不引人注目的JavaScript"讨论了关注点的分离。我认为将JavaScript指定的行为保留在<body>树之外是一种良好的形式，并且对可维护性大有帮助。

然而，当使用jQuery动态生成HTML时，使用这种方法的好处似乎被否定了，比如这个例子:

$('<img>',
{
  src: 'images/little.bear.png',
  alt: 'Little Bear',
  title:'I woof in your general direction',
  click: function(){
    alert($(this).attr('title'));
  }
})
.css({
  cursor: 'pointer',
  border: '1px solid black',
  padding: '12px 12px 20px 12px',
  backgroundColor: 'white'
})
.appendTo('body');
  • from jQuery in Action, 2nd Edition

在这里，我们混合了结构(新的<img>元素)、样式(通过调用css())和行为(通过设置click属性值)。因此，我们不再有关注点分离，即使这个块被放置在文档的<head>中。

我的理解正确吗?缓解这种情况的最佳实践是什么?在实践中做这种类型的HTML生成时，是否经常引用外部。css和。js资源?

最佳实践是使用模板引擎(如Mustache.js或jQuery的内置模板引擎)和类，通过. addclass。

但是最后，你不能完全将V和C(视图从控制器- MVC)分开，特别是在html中。

我认为最好的做法是在jQuery中使用类，并将css放在单独的样式表中。

编辑:

我还要补充一点，直接从马嘴里学习对我来说很有效。我使用http://api.jquery.com/来完成几乎所有我真正需要了解的jQuery相关内容

你没抓住重点。

使用不引人注目的Javascript的主要目的是，如果Javascript加载或执行失败，应用程序将如何响应?这是关键，因为人们在许多页面中禁用了Javascript，所以您的应用程序是否会以正常的方式显示任何内容并响应，还是会死机?

你不能真正地将视图从控制器中分离出来，但是不引人注目的Javascript在这个方向上有所帮助。但真正的好处是弹性。

如果你想要好的抽象，使用KnockoutJS。我真的不能少强调一点，我无法想象在没有类似库的情况下创建具有出色客户端代码的大型网站。

分离HTML, CSS和JS的总体情况是，如果CSS和JS不可用，您希望您的站点可用(和可导航)。

例如，如果你的站点依赖JS来加载内容——没有任何类型的"回退"——那么对于没有启用JS的任何人来说，它都是坏的。

拥有一个使用CSS和JS所有优点的全功能网站是完全可能的，但是让它们一起工作，这样如果你的CSS或JS没有加载，网站就会优雅地失败，这是一个值得实现的目标。

从我使用jQuery的经验来看，分离是保持代码可维护，同时保持设计、内容和功能分离的最佳方法。

标记

参考您的示例-在大多数情况下，标记与html文件一起出现或由ajax调用请求。

CSS

jQuery的css功能主要用于页面操作，原始的css属性仍然来自css文件。

通常你在脚本中维护一个'bind-section'，在那里你定义所有的bind/live事件:

$( '.clickable' ).live('click', function(){
   // do something if clicked ...
});
相关文章：