jsdom的用例是什么?

Ray*_*nos 36 javascript templates node.js jsdom

看完这篇微模板后就死了.我变得很好奇:

  1. 是否在服务器上使用DOM会产生更清晰,更易于维护的代码,然后进行模板化.
  2. 使用jsdom而不是模板引擎是否更有效率.
  3. 如何将jsdom纳入标准MVC设置的视图中.

通常在什么情况下使用服务器端DOM抽象更好,比如jsdom而不是模板引擎,比如EJSjade.

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

Hac*_*tly 13

好吧,我实际上需要JSDom用于我在node.js上周末建立的一个小项目.所以,我的服务器上,我不得不接受一个URL抓取,抓取所有从给定的URL的HTML,解析并显示图像给用户,使用户可以选择从URL的缩略图.(当你把链接放到Facebook输入框时有点像)所以,我使用了一个名为Request的模块,它允许我在服务器端获取HTML.但是,当HTML到达我的程序时,我无法像使用客户端javascript那样遍历它.因为没有实际的DOM,我不能说document.getElementById('someId').因此,通过给我一个"临时"DOM允许我遍历返回的HTML,JSDom派上了用场.现在,即使我还在服务器端,JSDOM创建了一个window与浏览器中的窗口对象非常相似的对象,并从返回的HTML中创建了一个DOM.现在,即使在服务器上,我也可以通过调用获取所有图像window.$('img').我可以像平常那样定位和解析元素.所以,这只是JSDom成为解决方案的一个问题,但它的效果非常好.希望这有助于一些!

  • 这是一个不同的背景.如果你想操纵从外部源加载的HTML,那么jsDOM非常有用.但我想使用jsDOM来操纵我控制的HTML源代码.是的,jsDOM对于以熟悉的方式操纵外部不受控制的HTML非常有用. (2认同)

Jos*_*osh 12

  1. 它是一个很好的抽象,与客户端工程师相匹配,可以了解如何构建和修改dom.在这方面它是"更清洁",因为有一个心理模型.它也是不错的,因为我们没有从其它干净的声明标记之上的模板语言混合不同语法的克鲁格如与连"愚蠢"的模板系统,如胡须的情况.

  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>
Run Code Online (Sandbox Code Playgroud)

这是经典方面的"观点".在典型的Web应用程序中,它可能看起来更像:

<li class="contact">
    <span class="name"><?= $name ?></span>
    <p class="title"><?= $title ?></p>
</li>
Run Code Online (Sandbox Code Playgroud)

要使用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);
});
Run Code Online (Sandbox Code Playgroud)

这些是像Weld和Backbone.js这样的系统为您做的.他们对这项工作的发生位置(服务器端,客户端),您正在使用的框架(jquery,mootools等),以及如何分配您的更改(REST,套接字等)都有不同程度的假设. io等).

编辑

使用jsdom可以做的一些非常有用的事情围绕集成测试和抓取:

就个人而言,我希望看到一个采用tobi方法的项目,但是将其映射到像https://github.com/LearnBoost/soda之类的东西,以便我们可以在没有selenese的情况下进行基于云的硒测试(因为imo,它很烂).