闲话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只关注界面及数据，在服务器上也一样，你可以得到同样的输出结果，从而避免了搜索引擎优化上的大量困扰。