看完這篇文章後Micro templates are dead。我已經變得好奇了:jsdom有什麼用例
- 是否在服務器上使用DOM會導致更清潔,更易維護的代碼,然後模板化。
- 使用jsdom而不是模板引擎更高效。
- 如何將jsdom分解爲標準MVC設置的視圖。
而且一般在什麼情況下會是最好使用一個服務器端的DOM抽象,像jsdom而不是一個模板引擎,像EJS或jade。
的問題是具體到node.js和其他SSJS
看完這篇文章後Micro templates are dead。我已經變得好奇了:jsdom有什麼用例
而且一般在什麼情況下會是最好使用一個服務器端的DOM抽象,像jsdom而不是一個模板引擎,像EJS或jade。
的問題是具體到node.js和其他SSJS
它是一種很好的抽象,一個客戶端的工程師們對DOM是如何建立和修改匹配。在這方面,它是「更清潔」的,因爲有一種心智模式。它也很好,因爲我們不需要在模板語言之外混合一大堆不同語法的語句,就像在「愚蠢的」模板系統(如鬍鬚)中一樣。
我不會說它更有效地使用jsdom模板。舉個例子,比如說,在谷歌上用「jsdom」來泄漏內存。 jsdom是rad,對於週末爬行站點項目,執行非服務器相關任務等任務來說非常有用,但我認爲從高性能Web服務器角度來看它很慢。
有十億種方法來分析這一點。沒有任何方法成爲「標準」方式。我見過的一種方法是發送一個空白的「模板」,即以某種方式表示模型的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做到圍繞集成測試和蜘蛛:
就個人而言,我希望看到的是花了TOBI的做法的一個項目,但它映射上的東西頂部像https://github.com/LearnBoost/soda這樣,我們可以做的基於雲的硒測試,而不Selenese的(自從imo,它很糟糕)。
嗯,我確實需要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成爲解決方案的一個問題,但它工作得非常好。希望這有助於一些!
這是一個不同的上下文。如果您想操縱從外部源加載的HTML,那麼jsDOM非常有用。但我想用jsDOM來操縱HTML源代碼。是的,jsDOM對於以熟悉的方式處理外部不受控制的HTML非常有用。 – Raynos 2011-05-23 20:11:04
一些浮現在腦海中:
並回答您的問題tions:
2點可以通過這個模板測試用例來回答:
去http://jsperf.com/dom-vs-innerhtml-based-templating/300
點擊按鈕 「運行測試」。
要有耐心,它比較焊接與其他模板引擎的很多,讓您當前的基準...
這些應該是3個獨立的問題。 – mikerobi 2011-05-23 19:15:19
@mikerobi你是這麼認爲的嗎?如果這會更好,我可以將它們重構成三個問題。 – Raynos 2011-05-23 19:16:50
可以在沒有模板引擎的情況下完成視圖嗎? – jcolebrand 2011-05-23 20:25:24