### 闲话js前端框架
前端人员=美工+设计+代码+测试
——题记
**专题文章：**
一、从avalonjs的模板说起
二、庞大的angularjs
三、再也不想碰DOM
四、组件化？有没有后端的事？
五、再看自己一年前设计的微型渲染引擎
六、在浏览器标准上做文章
七、抛开浏览器，构建应用容器
八、为何Flash、银光和Java都在网页端一蹶不振
本文属 西风逍遥游 原创, 转载请注明出处: 西风世界 [http://blog.csdn.net/xfxyy_sxfancy](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只关注界面及数据，在服务器上也一样，你可以得到同样的输出结果，从而避免了搜索引擎优化上的大量困扰。
