我目前正在通过阅读 jQuery in Action 来学习 jQuery。
这本书讨论了通过使用“Unobtrusive 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');
- 来自 jQuery in Action，第 2 版
在这里，我们混合了结构(新的 <img> 元素)、样式(通过调用 css())和行为(通过设置 click 属性值。)因此，我们不再有关注点分离, 即使这个 block 放在 <head> 中文档。
我的理解对吗？缓解这种情况的最佳做法是什么？在实践中进行此类 HTML 生成时，是否经常引用外部 .css 和 .js 资源？
最佳答案
最佳实践是使用模板引擎(如 Mustache.js 或 jQuery 内置的 templating engine )和类，通过 .addClass .
但最后，您无法将 V 与 C 完全分开(从 Controller 查看 - MVC )，尤其是在 html 中。
关于javascript - 在使用 JavaScript 构建 HTML 时保持关注点分离的最佳实践是什么？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/5748638/