在使用JavaScript构建HTML时，保持关注点分离的最佳做法是什么？
[英]What are best practices to maintain separation of concerns when building HTML with JavaScript?
问题描述
I'm currently learning jQuery by reading jQuery in Action. 
我目前正在通过阅读jQuery in Action来学习jQuery。
The book discusses separation of concerns by using 'Unobtrusive JavaScript.' 该书通过使用“不引人注目的JavaScript”讨论了关注点的分离。 I grok that keeping behavior specified by JavaScript out of the <body > tree is good form and goes a long way toward maintainability. 我认为保持JavaScript从<body >树中指定的行为是良好的形式，并且在可维护性方面有很长的路要走。
However, the benefits of using that approach seems to be negated when looking at dynamic HTML generation with jQuery, such as this example: 但是，在使用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 来自jQuery in Action，第2版
Here, we're mixing structure (the new <img> element), style (with the call to css()), and behavior (by setting the click attribute value.) So, we no longer have separation of concerns, even though this block is placed in the <head> of the document. 在这里，我们混合结构（新的<img>元素），样式（调用css（））和行为（通过设置click属性值。）因此，我们不再分离关注点，即使此块放在文档的<head>中。
Is my understanding correct? 我的理解是否正确？ What are best practices to mitigate this? 减轻这种情况的最佳做法是什么？ Is it common to refer to external .css and .js resources when doing this type of HTML generation in practice? 在实践中进行这种类型的HTML生成时，引用外部.css和.js资源是否常见？
5 个解决方案
解决方案1
4 2011-04-21 19:16:47
Best practice is to use a templating engine (like Mustache.js or jQuery's built in templating engine ) and classes, via .addClass . 最佳实践是通过.addClass使用模板引擎（如Mustache.js或jQuery内置的模板引擎 ）和类。
But at the end, you just can't completely separate the V from the C (View from Controller - MVC ), especially in html. 但最后，你不能完全将V与C（View from Controller - MVC ）分开，特别是在html中。
解决方案2
3 2011-04-21 19:17:32
I think the best practice would be to use classes in jQuery and keep your css in a separate style sheet. 我认为最好的做法是在jQuery中使用类，并将css保存在单独的样式表中。
EDIT: 编辑：
I would also add that learning straight from the horse's mouth works for me. 我还要补充说，直接从马的嘴里学习对我有用。 I use http://api.jquery.com/ for almost everything I really need to understand jQuery related. 我使用http://api.jquery.com/几乎所有我真正需要理解jQuery的东西。
解决方案3
2 已采纳 2011-04-21 19:21:16
Your missing the point here. 你错过了这里的观点。
With unobstrusive Javascript the main aim is that in case if Javascript fails to load or execute, how will your application respond? 使用不引人注目的Javascript主要目的是，如果Javascript无法加载或执行，您的应用程序将如何响应？ That's the key thing as people have Javascript disabled in many pages, so will your application show any content and respond in a normal fashion or would just go dead? 这是关键，因为人们在许多页面中禁用了Javascript，因此您的应用程序是否会以正常方式显示任何内容并做出响应，或者只会死掉？
You can't really separate the View from the Controller but unobstrusive Javascript helps in that direction. 你不能真正将视图与控制器分开，但不引人注目的Javascript有助于这个方向。 But the real benefit is resilience. 但真正的好处是恢复力。
Also if you want good abstraction, use KnockoutJS . 此外，如果您想要良好的抽象，请使用KnockoutJS 。 I cannot really emphasize any less and I can't imagine creating huge websites with great client-side code without a similar library. 我无法真正强调，我无法想象在没有类似库的情况下使用优秀的客户端代码创建大型网站。
解决方案4
2 2011-04-21 19:23:39
The big picture of separating HTML, CSS and JS is that you want your site to be usable (and navigable) if CSS and JS are not available. 分离HTML，CSS和JS的大局是，如果CSS和JS不可用，您希望您的站点可用（并可导航）。
For example, if your site depends on JS to load content -- without any kind of "fallback" -- it's broken for anyone who doesn't have JS enabled. 例如，如果您的网站依赖于JS来加载内容 - 没有任何“后备” - 那么对于没有启用JS的人来说，它就会被破坏。
It's perfectly possible to have a full-featured site that uses all the benefits of CSS and JS, but getting them to work together so that the site fails gracefully if your CSS or JS isn't loaded, is a goal worth achieving. 完全有可能拥有一个功能齐全的网站，它利用了CSS和JS的所有好处，但让它们一起工作，以便在没有加载CSS或JS的情况下网站优雅地失败，这是一个值得实现的目标。
解决方案5
1 2011-04-21 19:27:45
Speaking from my experience with jQuery separation is the best way to keep maintainable code and also keep design, content and functionality separate. 根据我对jQuery分离的经验，这是保持可维护代码并保持设计，内容和功能分离的最佳方式。
Markup 标记
Refering to your example - in most cases markup comes with your html file or is requested by ajax calls. 请参阅您的示例 - 在大多数情况下，标记附带您的html文件或由ajax调用请求。
CSS CSS
jQuery's css functionalities are mostly used in case of onpage manipulation, the original css properties still come via css files. jQuery的css功能主要用于onpage操作，原始的css属性仍然来自css文件。
Events 活动
Usually you maintain a 'bind-section' within your script, where you define all your bind/live events: 通常，您在脚本中维护一个“绑定部分”，您可以在其中定义所有绑定/实时事件：
$( '.clickable' ).live('click', function(){
// do something if clicked ...
});
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.