閒話js前端框架
前端人員=美工+設計+代碼+測試
——題記
專題文章：
一、從avalonjs的模板說起
二、龐大的angularjs
三、再也不想碰DOM
四、組件化？有沒有後端的事？
五、再看自己一年前設計的微型渲染引擎
六、在瀏覽器標準上做文章
七、拋開瀏覽器，構建應用容器
八、爲何Flash、銀光和Java都在網頁端一蹶不振
本文屬 西風逍遙遊 原創, 轉載請註明出處: 西風世界 http://blog.csdn.net/xfxyy_sxfancy
三、再也不想碰DOM
我只能說，在複雜應用中，DOM操作是危險的。
如果你在寫一個網站，你寫下了一段html：
<!DOCTYPE html>
<html>
<head>
<title>test</title>
</head>
<body>
<h1>Welcome</h1>
<div class="left">
<ul>
<li><a href="#">登錄</a></li>
...
</ul>
</div>
<div class="content">
...
</div>
</body>
</html>你本以爲代碼會好好的工作，但是發現事實並非如此，因爲你的同事在代碼裏增加了這樣的部分：
$('.left a').click(...)原因只是因爲他也想給他負責的頁面中，如下代碼中增加了特殊處理：
<!DOCTYPE html>
<html>
<head>
<title>test2</title>
</head>
<body>
<div class="left">
<a href="#">ajax更新</a>
</div>
</body>
</html>哦，夠了，你會發現，DOM操作必須時刻注意着，第一，要正確的選擇到對應的元素；第二，比小心不能影響其他人的工作。
另外，你會發現更爲悲慘的事情，如果你的代碼全是自己寫的，那麼還好，但如果引入的第三方庫，你根本不知道，這個庫會將dom樹修改成什麼樣子。
DOM比較慢，我們應該儘可能的減少不良的DOM操作，例如大批量的重建DOM，或者是更新DOM時，重建了不變的節點等。
避免DOM帶來的麻煩
避免手動DOM操作的最簡單方法，就是儘量使用前端模板，這樣往往能夠使得DOM操作變成模板或組件的變動。你會發現，對應的DOM操作被自動實現了，而且被有效的限定在指定的作用域中。
所以我們去看，很少發現angularjs會出現幾個人或庫對同一個DOM進行修改操作，原因就是DOM操作被內化了，並不直接暴露給用戶。而模型的修改和引用庫，都得到了良好的封裝，不會影響其他部分。
但前端模板也不是萬能的，因爲很多原因，例如要引入一個jQuery的庫，你又很難找到和他一樣作用的angularjs的版本，那麼沒法，你就只能考慮使用。
使用虛擬DOM技術
Reactjs是一項非常具有革新意義的技術，將前端的視圖顯示做到了一個新的高度。
首先React不是一個框架，他只是一個視圖層，但這個視圖層的功能確實厲害。使用React時，你無需關心你實現界面效果的過程，而只需要關注每一個畫面。
於是，你需要做的就是告訴React，你要渲染的效果是什麼：
render: function() {
return <header>
{ this.state.name ? <div>this.state.name</div> : null }
</header>;
}如果你以前用過innerHTML，那麼應該會深有體會，在更新html時，全部的dom節點都會重建，然後所有的事件綁定都消失了，這個體驗非常差。而ReactJS，恰恰提供了一個smart版的innerHTML，智能的分析出你改變的部分。
而React的另一個好處是你可以在服務器上渲染它，因爲React只關注界面及數據，在服務器上也一樣，你可以得到同樣的輸出結果，從而避免了搜索引擎優化上的大量困擾。
