Hao
Hi, I am Hao (👋): a coder, a woodworker, a blogger, and a father.
React开发有感
July 19, 2015

最近要做一个浏览器端的支付页面,选用了React来进行项目搭建。之所以选择React,很大程度上是想尝试新鲜事物(虽然React 2013年就已经出现了,但是对我来说是个新鲜事物)。这个支付页面并非复杂——一个登录表单,一些Pricing的内容,一个支付表单和产品介绍。虽然不复杂,但如果只是用最简单的HTML和CSS来做,势必也会随着项目内容的增加或者修改而导致很难管理。一直以来我对于前端开发的看法是:很容易入门,但是也很难精益求精。很多人仅仅是懂基本的HTML标签,了解一些CSS的属性,再加上懂得怎样使用jQuery的第三方插件就可以正儿八经做一些前端项目了,但随着项目的复杂度的提升加上更多需求的引入,这种原始的方式会变得非常痛苦。

对于我个人来说,写CSS是必须要用LESS或者Sass的。离开了它们我会变得食欲不振,精神萎靡,一天不想写三行代码。这只是组件化(或者模块化)的第一步。我之前在经过大量的思考和实践后提出并实现了一种前端开发的组件化思路,在项目中使用情况良好——用LESS和Browserify分别管理CSS和JavaScript,而HTML则用Jade来管理。Jade本不是组件化工具,只是一种方便写模板的语法糖。然而Jade的mixin功能很强大,被我拿来当组件化的重要组成部分。这个方案使得我对前端代码的掌控能力变得异常强大,但随着项目的增加也逐渐显露出几个缺点:一是没有前端路由,页面跳转还是得依靠Node.js,使得前端有时也要处理逻辑,与后端职责不清。二是很多组件的数据源混乱,有些利用ajax从后端取得,有些直接放在组件内部用模块加载器加载。三是虽然号称组件,但实际上HTML,CSS和JavaScript代码之间依然是分开的,需要依靠程序员的命名联系起来。

刚使用React来做这个项目一天,就深陷其中不能自拔,深深认同其设计理念。尤其是一些loader,能够把LESS文件和图片等原来难以管理的静态资源变成组件的一部分,从而彻底实现了前端的组件化,使得从开发到部署都变得异常简单。