[概念]直出

[coxo]

我们可能听到过“原图直出”，很少在前端听过直出，词面意思我也不做解释了，一个个字分析吧。

但是javascirpt里面的，其实最近网上讨论较多的，包括AC大会访谈提到的，直出的关键词

引用： 基本的纯前端优化方案确实已经开发得差不多了，但一些新的纯前端性能优化方案，如最近比较流行的 React 使用的虚拟 dom 技术、Webpack 带来的打包模式的改变等，确实可以为我们制定优化方案提供一些新的灵感。另外在与后台结合方面，后台直出等也确实是前端之外可行的方案，但是当这些通用的方案都使用上之后，可能我们又会发现很难再找到其他的方案进行优化。

MVVM直出？

MVVM直出存在的诸多问题，直出后的HTML无法还原配置，可以直出但是能否还原原来的配置，是一个问题，但是也可以利用其他手段来解决，当然还会有其他问题，直出的HTML不一定能反向还原数据。

React直出

• React的虚拟DOM的生成是可以在任何支持Javascript的环境生成的，所以可以在NodeJS或Iojs环境生成
• 虚拟DOM可以直接转成String
• 然后插入到html文件中输出给浏览器便可

其实React有一张图

JSX+DATA ==> Virtual Dom(虚拟DOM) ==> React.rendToString ==>HTML

JSX:

React.createClass({
    render: function () {
        return (
            <p>
                Hello {name}!           
            </p>
        );
    }
})

感觉到了吧。里面的玩意怎么和HTML很相似，JSX 类似于 HTML，但不完全一样。 http://reactjs.cn/react/docs/jsx-in-depth.html

所以，从上面可以看出，其实就是利用JSX和数据组合，生成虚拟DOM直接经过处理直接输出HTML。 好像一个模子里面输出的一样。

例子可以参考，https://github.com/DavidWells/isomorphic-react-example/

[coxo]

就是把HTML这种形态，从后端或者模版，处理为静态的可解释的HTML直接输出。