2013-02-25 39 views
3

運行一個jQuery組件我有一個像jquery full calendar使用的NodeJS

我的組件完全開發jQuery的成分似乎運行在瀏覽器慢(不是日曆)。所以我想使用nodeJs在服務器上運行它。

我想在服務器端做所有的dom操作,只有html頁面必須發送到瀏覽器。似乎一切都是可能的,如果我從頭開始,但我不想這樣做。這是我計劃做

  • 如果用戶輸入URL那麼它擊中了服務器。
  • 然後在服務器中的所有JS和CSS已經被編譯
  • 那麼它的HTML文件返回給瀏覽器
  • 當用戶再次執行某些操作它擊中服務器,並盡一切的變化,然後它有發送到服務器

任何人都可以打電話給我如何做到這一點或任何其他最好的替代方法來實現我想要的? 一個簡單的演示應用程序會更好。 在此先感謝。

+0

這些是目前我正在嘗試解決這個問題的事情。 nodejs-express&cheerio – 2013-03-04 12:25:39

回答

1

我想你的問題可能會有一些困惑,關於DOM的工作方式。

雖然可以在node.js服務器上使用類似jsDom的庫呈現具有DOM的應用,但是當向客戶端提供相同的頁面時,它具有完全不同的DOM實例,他們之間沒有任何溝通方式。因此,您的應用程序對服務器上的DOM進行的任何更改都無法輕鬆傳播到客戶端上的DOM。

如果您的組件似乎在瀏覽器中運行緩慢,那麼您更有可能從組件上獲得良好的結果,使其更有效,而不是通過嘗試將DOM操作卸載到服務器。

如果您查看兩種不同的情況並將其分解爲瀏覽器的實際功能,那麼您會看到爲什麼這是一個糟糕的主意。

方案(1) - 渲染的Dom在服務器上改變

  1. 步驟1 - 客戶端負載初始html頁面從服務器(慢)
  2. 步驟2 - 用戶與網頁上的客戶端進行交互(快)
  3. 步驟3 - 客戶端發送的用戶交互回服務器(vslow)
  4. 步驟4 - 服務器加載的Dom(慢)
  5. 步驟5 - Server運行的Dom改變(快)
  6. 步驟6 - 服務器發送重新呈現的HTML回客戶機(慢)
  7. 步驟7 - 客戶端呈現從服務器新的HTML(慢)

方案(2) - 渲染的Dom上客戶端更改

  1. 第1步 - 從服務器客戶端負載初始HTML頁面(慢)
  2. 步驟2 - 用戶與客戶端(快)
  3. 步驟3頁相互作用 - 客戶端運行的Dom改變(快)
  4. 第4步 - 客戶端渲染改變DOM(慢)

你會好得多隻是你的組件上的工作,使之快於嘗試卸載的DOM渲染到服務器。 Here's a good blog post on how to speed up jquery code

如果您確實想要繼續處理您在問題中提出的工作流程,我建議您查看jsDom庫,但我真的不會推薦它。

+0

sory,我被迫做這件事。我不想從頭開始編寫代碼。還有一件事我應該使用jsdom而不是cheerio? – 2013-03-05 12:40:04

+0

我不熟悉Cheerio,所以我不能給出任何一個比其他更具體的建議。看看文檔,在我看來,cheerio會比jsdom快,但只會讓你訪問jquery的功能。如果您在頁面上有其他JavaScript,並且希望在不通過Jquery的情況下與完整的DOM進行交互,則Cheerio可能會導致頁面呈現不正確。 JSdom會更慢,但會保證頁面上的所有javascript都可以訪問完整的DOM – Racheet 2013-03-06 12:42:28

1

有一個jQuery節點包。所以,你可以安裝包和使用jQuery,你本來會做

安裝node.js的jQuery的

npm install jquery 

那麼這行添加到您的腳本

var $ = require('jquery'); 

如果你是在Windows上,您可能會在安裝jquery時遇到問題。如果你搜索錯誤信息(實質上你需要爲你的環境設置make)

+0

我在windows上。無法安裝jQuery包的節點..任何建議? – beNerd 2013-03-15 06:45:47

+0

@beNerd您需要安裝make實用程序,以便依賴關係可以被構建(即symxtify),據我所知我只是安裝了cygwin make,但很久以前。但是你可以下載二進制文件(參見http://stackoverflow.com/questions/10226301/building-contextify-under-windows-7-x64-for-nodejs-jquery) – 2013-03-15 07:39:15