什么是jsdom的用例
看完这个微模板是死的文章。 我很好奇:
- 无论是在服务器上使用DOM,都会产生更清洁,更可维护的代码,然后模板化。
- 使用jsdom而不是模板引擎更高效。
- 如何将jsdom分解为标准MVC设置的视图。
通常在什么情况下最好使用服务器端的DOM抽象,比如jsdom,而不是像EJS或者jade这样的模板引擎。
这个问题是特定于node.js和其他SSJS
-
它是一个很好的抽象,匹配客户端工程师承担如何build立和修改的DOM。 在这方面,因为有一个心智模式,所以它更“干净”。 它也很好,因为我们不需要在模板语言之外混合一些不同的语法,就像在“愚蠢的”模板系统(如小胡子)中一样。
-
我不会说它更有效地使用jsdom模板。 比如说,在谷歌上用“jsdom”来泄漏内存。 jsdom是rad,对于周末爬行站点项目,执行非服务器相关任务等任务是非常有用的,但是我认为从高性能Web服务器的angular度来看,它的速度慢。
-
有十亿种方法来考虑这一点。 没有任何方法成为“标准”方式。 我所看到的一种方法是发送一个空的“模板”,即以某种方式表示模型的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和蜘蛛:
- https://github.com/mikeal/spider – 通用目的的networking蜘蛛,利用节点的基于事件的处理,并为您提供jsdom / jquery帮助您以一种编程方式轻松访问DOM
- https://github.com/assaf/zombie – 使用jsdom / jquery进行集成testing的无头浏览器testing
- https://github.com/LearnBoost/tobi – 类似的无头浏览器testing
就个人而言,我希望看到一个采用tobi的方法,但将其映射到https://github.com/LearnBoost/soda之类的东西上,这样我们就可以在没有selenese的情况下进行基于云的seleniumtesting(因为imo,它很烂)。
那么我真的需要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的一个问题,但它工作得非常好。 希望这有助于一些!
有几个想到:
- 在服务器和浏览器之间共享视图/控制器
- 数据挖掘/爬行/处理
- AJAX /实时东西中使用的HTML片段的转换
- 通过避免模板标签来绝对分离逻辑和内容
并回答你的问题:
- 也许。 很多东西影响代码质量,但这是朝正确方向迈出的一步
- 不,模板引擎总是会更快,因为它们可以预编译模板
- 这可能需要一个新的问题?
您的问题的第2点可以通过这个模板化testing用例来回答:
去http://jsperf.com/dom-vs-innerhtml-based-templating/300
-
点击“运行testing”button。
-
要有耐心,它比较焊接与其他许多模板引擎,并给你当前的基准…