什么是jsdom的用例

看完这个微模板是死的文章。 我很好奇:

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

通常在什么情况下最好使用服务器端的DOM抽象,比如jsdom,而不是像EJS或者jade这样的模板引擎。

这个问题是特定于node.js和其他SSJS

  1. 它是一个很好的抽象,匹配客户端工程师承担如何build立和修改的​​DOM。 在这方面,因为有一个心智模式,所以它更“干净”。 它也很好,因为我们不需要在模板语言之外混合一些不同的语法,就像在“愚蠢的”模板系统(如小胡子)中一样。

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

  3. 有十亿种方法来考虑这一点。 没有任何方法成为“标准”方式。 我所看到的一种方法是发送一个空的“模板”,即以某种方式表示模型的html块,然后使用它来引导从模型中构build最终视图。 从这篇文章,例如:


<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,我们build立了一个模糊的控制器,它意识到上面的视图和它所表示的模型的语义。 这个视图被parsing成一个DOM,并通过你喜欢的select器引擎进行访问。 每次模型代表的变化,你可以使用更改事件或callback来更新视图。 例如:

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

 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做的一些非常有用的事情围绕集成testing和蜘蛛:

就个人而言,我希望看到一个采用tobi的方法,但将其映射到https://github.com/LearnBoost/soda之类的东西上,这样我们就可以在没有selenese的情况下进行基于云的seleniumtesting(因为imo,它很烂)&#x3002;

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

有几个想到:

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

并回答你的问题:

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

您的问题的第2点可以通过这个模板化testing用例来回答:

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

  • 点击“运行testing”button。

  • 要有耐心,它比较焊接与其他许多模板引擎,并给你当前的基准…