2010-10-18 80 views
3

我發現了大量的瀏覽器端JavaScript模板,這些模板呈現一個數據值爲字符串的模板。但是,我有點不確定該字符串應該如何轉換爲顯示DOM中的元素。瀏覽器端JavaScript模板引擎如何呈現模板?

很明顯,一種方法就是document.write - 但我認爲這已經被埋沒了很久。

另一個是使用element.innerHTML,但至少在幾年前,這不是任何標準的一部分,它不適用於XHTML文檔。

那麼,現在的交易是什麼? .innerHTML是一個用於XHTML的完美工具,它是標準的一部分嗎?或者人們只是使用它,它的工作原理?還是有其他支持的東西?除此之外,PURE.js似乎都是關於從DOM元素中構建模板的,這對我來說很有吸引力 - 是否還有其他模板引擎以相同的方式工作?

回答

4

innerHTML幾乎無處不在。

這些方法也可用於與基本上就是一個模板引擎需要做的DOM工作:

  • createElement
  • appendChild
  • createTextNode
  • removeChild
  • parentNode

像jQuery這樣的庫大量使用這些。

+0

我相信'innerHTML'也往往是非常快速的,與您通常的DOM方法相比。 (插入過早的優化警告。)當你考慮它時,'innerHTML'接受一個字符串,並將它變成一個DOM節點,這是瀏覽器在加載網頁時所做的事情。如果瀏覽器不這麼快,那就麻煩了。 – 2010-10-18 12:22:20

+0

@Paul在Chrome中,DOM比「innerHTML」快,在Firefox中它們大致相同,而在IE中,「innerHTML」要快得多。 – xj9 2010-10-18 13:02:01

+0

@indieinvader:呵呵,很高興知道。你有什麼消息來源?我發現的測試表明,在非IE瀏覽器中,DOM方法和innerHTML沒有太大的區別。 1)http://andrew.hedges.name/experiments/innerhtml/ 2)http://blog.nqzero.com/2009/11/javascript-rendering-performance.html – 2010-10-18 13:38:28