jsdom有什么用例

Question

看完这篇文章后Micro templates are dead。我已经变得好奇了：

1. 是否在服务器上使用DOM会导致更清洁，更易维护的代码，然后模板化。
2. 使用jsdom而不是模板引擎更高效。
3. 如何将jsdom分解为标准MVC设置的视图。

而且一般在什么情况下会是最好使用一个服务器端的DOM抽象，像jsdom而不是一个模板引擎，像EJS或jade。

的问题是具体到node.js和其他SSJS

Answer 1

1. 它是一种很好的抽象，一个客户端的工程师们对DOM是如何建立和修改匹配。在这方面，它是“更清洁”的，因为有一种心智模式。它也很好，因为我们不需要在模板语言之外混合一大堆不同语法的语句，就像在“愚蠢的”模板系统（如胡须）中一样。

2. 我不会说它更有效地使用jsdom模板。举个例子，比如说，在谷歌上用“jsdom”来泄漏内存。 jsdom是rad，对于周末爬行站点项目，执行非服务器相关任务等任务来说非常有用，但我认为从高性能Web服务器角度来看它很慢。

3. 有十亿种方法来分析这一点。没有任何方法成为“标准”方式。我见过的一种方法是发送一个空白的“模板”，即以某种方式表示模型的html块，然后使用它来引导从模型构建最终视图。从这篇文章中，例如：

---

<li class="contact" id="contact-template"> 
    <span class="name"></span> 
    <p class="title"></p> 
</li> 

这是在相对于经典的 '视图'。在典型的Web应用程序，它可能看起来更像：

<li class="contact"> 
    <span class="name"><?= $name ?></span> 
    <p class="title"><?= $title ?></p> 
</li> 

要使用MVC，一个建立了一个控制器，模模糊糊地知道上述观点，并表示模型的语义。这个视图被解析到/ DOM中并通过您最喜欢的选择器引擎进行访问。每次模型表示变化时，您都可以使用更改事件或回调来更新视图。例如：

让我们想象一下，每当属性发生变化时，“模型”会触发“更改”事件。

controller = new Controller({ 
    view: $('#contact-template').clone(), // Assume jquery or whatever 
    model: aContact 
}); 

// Assume some initialization that sets the view up for the first time 
// and appends it to the appropriate place. A la: 
// this.view.find('.name').text(model.name); 
// this.view.find('.title').text(model.title); 
// this.view.appendTo('#contacts') 

controller.on('model.name.change', function(name){ 
    this.view.find('.name').text(name); 
}); 

这些是像Weld和Backbone.js这样的系统为你做的。他们都对这项工作发生的地方（服务器端，客户端）以及您使用的框架（jQuery，mootools等）以及您的更改如何分布（REST，套接字）有不同程度的假设。 io等）。

编辑

一些真正有用的东西，你可以用jsdom做到围绕集成测试和蜘蛛：

• https://github.com/mikeal/spider - 通用网络蜘蛛，它利用节点的基于事件的处理，让您jsdom/jquery帮助您以编程方式轻松访问DOM
• https://github.com/assaf/zombie - 使用jsdom/jquery进行集成测试的无头浏览器测试
• https://github.com/LearnBoost/tobi - 类似的无头的浏览器测试

就个人而言，我希望看到的是花了TOBI的做法的一个项目，但它映射上的东西顶部像https://github.com/LearnBoost/soda这样，我们可以做的基于云的硒测试，而不Selenese的（自从imo，它很糟糕）。

Answer 2

嗯，我确实需要JSDom一个小项目，我建在周末node.js中因此，在我的服务器上，我必须接受要抓取的URL，抓取给定URL中的所有HTML，解析它，并将图像显示给用户，以便用户可以从该URL选择缩略图。 （有点像将链接放入Facebook输入框时）所以，我使用了一个名为Request的模块，它允许我在服务器端获取HTML。但是，当HTML到达我的程序时，我无法像使用客户端JavaScript那样遍历它。由于没有实际的DOM，我不能说document.getElementById('someId')。因此，JSDom通过给我一个“临时”的DOM让我遍历返回的HTML而派上用场。现在，即使我仍在服务器端，JSDOM创建了一个与浏览器中的窗口对象非常相似的window对象，并使用返回的HTML创建了一个DOM。现在，即使在服务器上，我也可以通过调用window.$('img')来获取所有图像。我可以像正常一样定位和分析元素。所以，这只是JSDom成为解决方案的一个问题，但它工作得非常好。希望这有助于一些！

Answer 3

一些浮现在脑海中：

1. 交流意见/服务器和浏览器
2. 数据挖掘/爬行/处理
3. 转变的控制器在AJAX /实时玩艺HTML片段
4. 通过避免模板标签实现逻辑和内容的绝对分离

并回答您的问题tions：

1. 也许。很多东西会影响代码质量，但这是朝着正确方向迈出的一步，模板引擎总是会更快，因为它们可以预编译模板
2. 这可能需要一个新问题吗？你的问题

Answer 4

2点可以通过这个模板测试用例来回答：

去http://jsperf.com/dom-vs-innerhtml-based-templating/300

• 点击按钮 “运行测试”。

• 要有耐心，它比较焊接与其他模板引擎的很多，让您当前的基准...