gpt4 book ai didi

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

转载 作者:数据小太阳 更新时间:2023-10-29 04:32:54 25 4
gpt4 key购买 nike

我目前正在通过阅读 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/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com