雨夜带刀

为什么需要JSX

JSX 是 Facebook 团队提出的一个语法方案，可以在 JavaScript 的代码直接中使用 HTML 标签来编写 JavaScript 对象。其使用的是 XML-like 语法，这种语法方案需要通过 JSXTransformer 来进行编译转换成真实可用的 JavaScript 代码。

React 是基于组件的开发思想，React 认为一个组件可以是一个完全独立的没有任何其他依赖的模块文件。一个组件中可以有自己的样式（Inline Style）和结构（JSX编写的HTML）。

在 React 和 JSX 之前，一个组件如果要包含 HTML 结构将面临如下几个问题：

1. 组件的 HTML 直接写在页面中，那么组件的结构和行为是分离的；

2. 组件的 HTML 直接用字符串的形势插入到 JavaScript 代码中，那么就会出现一大段的字符串拼接，开发人员需要很小心的确保字符串拼接时没有因为少了一个符号而导致整个代码无法运行；

3. 使用 MVC 分层的思想，引入模板引擎，那么该如何引入模板文件的片段呢；

JSX 很好的解决了这些问题。

Handlebars 是一款语义化的模板引擎，其模板语法就像是在写普通的 HTML 代码，并且在性能方面也表现优秀。本文将介绍 Handlebars 如何结合 seajs 来使用。

模板引擎的编译和预编译

开发者用语义化的代码编写好模板，然后将编写好的模板再进行编译，这个编译环节是必不可少的。服务端的模板也同样需要编译，只是这个编译环节是在服务器上进行的。

前端模板引擎要么是直接在浏览器中进行编译，要么就先将模板进行预编译，预编译的代码是可以直接放到浏览器中运行的。在浏览器中编译就意味着会有一些编译时的性能开销，如果要追求前端性能的话，肯定是使用预编译好的模板。

Handlebars 提供了支持编译和不支持编译的 2 种版本，不支持编译的 runtime 版本只能运行预编译好的模板，而 runtime 版本的库文件理所当然要小得多。

在开发环境中，要确保开发方便，引用的是支持编译的库文件，而在生产环节中，模板经过了预编译，此时引用的是 runtime 版本。

这是本博的第三版主题了，之前的主题一直以绿色为基本色，虽然我一直挺喜欢绿色的，但这次还是换成低调的灰色吧。

这次的主题更加符合阅读习惯，虽然增加了侧边栏，但看起来更简洁了。由于我对于圆角和渐变的设计风格已经有心理阴影了(因为平时工作，UI设计师总是搞些这样的设计风格来增加图片的体积)，所以本次的主题没有用到任何的圆角和渐变的设计风格，不用这些照样可以有优雅的界面，让那些只会影响页面性能，为了设计而设计的圆角和渐变的设计风格去死吧。

最后还是要纪念下上一版拉风的主题：