在使用JavaScript构建HTML时,保持关注点分离的最佳做法是什么?

ret*_*one 7 javascript jquery client-side

我目前正在通过阅读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');
Run Code Online (Sandbox Code Playgroud)
  • 来自jQuery in Action,第2版

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

我的理解是否正确?减轻这种情况的最佳做法是什么?在实践中进行这种类型的HTML生成时,引用外部.css和.js资源是否常见?

nee*_*ebz 2

你在这里错过了重点。

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

您无法真正将视图与控制器分开,但不显眼的 Javascript 在这方面有所帮助。但真正的好处是韧性。

另外,如果您想要良好的抽象,请使用KnockoutJS。我真的不能再强调了,我无法想象在没有类似库的情况下使用出色的客户端代码创建大型网站。