jsdom有什麼用例

看完這篇文章後Micro templates are dead。我已經變得好奇了：jsdom有什麼用例

是否在服務器上使用DOM會導致更清潔，更易維護的代碼，然後模板化。
使用jsdom而不是模板引擎更高效。
如何將jsdom分解爲標準MVC設置的視圖。

而且一般在什麼情況下會是最好使用一個服務器端的DOM抽象，像jsdom而不是一個模板引擎，像EJS或jade。

的問題是具體到node.js和其他SSJS

來源

2011-05-23 Raynos

這些應該是3個獨立的問題。 – mikerobi 2011-05-23 19:15:19

@mikerobi你是這麼認爲的嗎？如果這會更好，我可以將它們重構成三個問題。 – Raynos 2011-05-23 19:16:50

可以在沒有模板引擎的情況下完成視圖嗎？ – jcolebrand 2011-05-23 20:25:24

它是一種很好的抽象，一個客戶端的工程師們對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做到圍繞集成測試和蜘蛛：

https://github.com/mikeal/spider - 通用網絡蜘蛛，它利用節點的基於事件的處理，讓您jsdom/jquery幫助您以編程方式輕鬆訪問DOM
https://github.com/assaf/zombie - 使用jsdom/jquery進行集成測試的無頭瀏覽器測試
https://github.com/LearnBoost/tobi - 類似的無頭的瀏覽器測試

就個人而言，我希望看到的是花了TOBI的做法的一個項目，但它映射上的東西頂部像https://github.com/LearnBoost/soda這樣，我們可以做的基於雲的硒測試，而不Selenese的（自從imo，它很糟糕）。

來源

2011-05-23 22:12:34 Josh

嗯，我確實需要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成爲解決方案的一個問題，但它工作得非常好。希望這有助於一些！

來源

2011-05-23 20:03:54 Hacknightly

這是一個不同的上下文。如果您想操縱從外部源加載的HTML，那麼jsDOM非常有用。但我想用jsDOM來操縱HTML源代碼。是的，jsDOM對於以熟悉的方式處理外部不受控制的HTML非常有用。 – Raynos 2011-05-23 20:11:04

一些浮現在腦海中：

交流意見/服務器和瀏覽器
數據挖掘/爬行/處理
轉變的控制器在AJAX /實時玩藝HTML片段
通過避免模板標籤實現邏輯和內容的絕對分離

並回答您的問題tions：

也許。很多東西會影響代碼質量，但這是朝着正確方向邁出的一步，模板引擎總是會更快，因爲它們可以預編譯模板
這可能需要一個新問題嗎？你的問題

來源

2011-05-28 04:05:16

2點可以通過這個模板測試用例來回答：

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

點擊按鈕「運行測試」。
要有耐心，它比較焊接與其他模板引擎的很多，讓您當前的基準...

來源

2014-04-01 20:02:19 sebilasse

jsdom有什麼用例

回答

相關問題