38

看完这篇微模板是死文章。我开始好奇：

  1. 在服务器上使用 DOM 是否会产生比模板更清晰、更易于维护的代码。
  2. 使用 jsdom 代替模板引擎是否更有效。
  3. 如何将 jsdom 纳入标准 MVC 设置的视图中。

通常在什么情况下最好使用服务器端 DOM 抽象，比如jsdom而不是模板引擎，比如EJS或jam。

该问题特定于node.js和其他 SSJS

4

4 回答 4

14

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

于 2011-05-23T20:03:54.723 回答
13

  1. 它是一个很好的抽象，与客户端工程师对如何构建和修改 dom 相匹配。在这方面它更“干净”，因为有一个心智模型。它也很好，因为我们不必在其他干净的声明性标记之上混合来自模板语言的大量不同语法，即使是“最愚蠢”的模板系统（例如 mustache）也是如此。

  2. 我不会说使用 jsdom 进行模板更有效。例如，去 google wrt 看一下“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，需要设置一个控制器，该控制器隐约知道上述视图的语义和它所代表的模型。这个视图被解析成 /a 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、socket.js）有不同程度的假设。 io 等）。

编辑

你可以用 jsdom 做的一些非常有用的事情围绕着集成测试和爬虫：

就个人而言，我希望看到一个采用 tobi 方法的项目，但将其映射到https://github.com/LearnBoost/soda之类的东西之上，这样我们就可以在没有 selenese 的情况下进行基于云的硒测试（因为 imo，它糟透了）。

于 2011-05-23T22:12:34.580 回答
1

想到几个：

  1. 在服务器和浏览器之间共享视图/控制器
  2. 数据挖掘/爬取/处理
  3. 用于 AJAX/实时内容的 HTML 片段的转换
  4. 通过避免模板标签实现逻辑和内容的绝对分离

并回答您的问题：

  1. 也许。很多事情都会影响代码质量，但这是朝着正确方向迈出的一步
  2. 不，模板引擎总是更快，因为它们可以预编译模板
  3. 这可能需要一个新问题？
于 2011-05-28T04:05:16.380 回答
1

这个模板测试用例可以回答您问题的第 2 点：

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

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

  • 请耐心等待，它将焊接与许多其他模板引擎进行比较，并为您提供当前的基准......

于 2014-04-01T20:02:19.910 回答