雨夜带刀's Blog

React 的骨架 JSX

为什么需要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 和 SeaJS 的结合使用

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

模板引擎的编译和预编译

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

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

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

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

第三版主题上线

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

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

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

纪念拉风的第二版主题
头像

雨夜带刀

前端开发工程师,技术宅,现居北京。

雨夜带刀的开源项目

easy.js
一个简洁的 JavaScript 类库,集成了模块加载器,同时也有包含了常见的的组件库,可访问项目网站
seed
符合 AMD 规范的 JavaScript 模块加载器。
ecope
从 easy.js 组件库中移值过来的基于 jQuery 的组件库,简单实用,API 风格统一。