openresty 前端开发序

阅读更多

还记得第一次尝试前后端分离的时候，是使用nginx + react 构建的spa应用，后端是java，主要处理业务逻辑逻辑部分，返回json数据，在nginx里面配置好html + js纯静态文件，再通过反向代理到java后端，解决跨域问题，然后使用ajax来进行交互，模型很简单，也很有效

主要解决了几个问题

一、独立，由于前后端分离，在开发的时候完全可以互相独立，所谓独立，其实就是说前后端是属于两个项目，保存在各自的git仓库，提交代码既不会冲突，也不需要合并

二、解耦合，后端开发完成之后只需要提交代码，然后发布到测试环境，而前端只需要启动一个nginx然后反向代理到测试环境，就可以开始开发工作，就是这么简单

三、版本更新，在项目上线之后通常需要继续迭代更新，这个时候就提现出前后端分离的价值了，前端样式排版更新，只需要更新前端，对后端几乎没有影响，那么只需要测试前端，避免了部分开发人员的失误，在前端更新的时候，导致后端服务的不可用，而由于前后端分离，并独立部署，提高了后端的稳定性，又保持了前端的多变性

但是也带来了一些其他的问题，主要逻辑都是js编写，成了胖客户端，在网速不佳的时候，体验不是很好，还有一个就是seo问题，当然我之前做的主要针对微信端，而且也不考虑seo，所以即使这样也能接受，那么就只剩下前端加载性能的问题。

前端我是这样解决的

使用webpack + gulp
webpack 用来编译打包js，其实也可以用来编译css，但是根据实战，我发现webpack编译后的css会比gulp编译出来的要大那么一点点，对于手机端来说，少一点是一点，于是选了gulp混合编译

在js层混合使用了amd+cmd模块加载方式，公共模块会被打包到common.js里面，各个页面模块会独立编译出一个js文件，这个文件会在页面加载的时候异步加载

之前本来选的是react-router来做前端路由、但是我发现它并不好用，后来有选择backbone来做路由，又发现仅仅为了一个路由而引入backbone不太划算，但是路由部分已经写成backbone风格的代码，于是写了一个mini版的前端路由兼容backbone，来实现无缝切换，代码一共才十几二十行，基于hash实现，完美支持webpack异步加载，并带loading效果，之前为了amd的loading效果改过react-router，发现很麻烦，所以就不用了，我要的是轻量，简洁

前端样式部分采用了weui做为基础框架，有些组件还是挺好用的，将其封装好之后，发现我只用到了部分组件，图标部分我用的是阿里的字体图标，于是把weui项目源码clone下来，只引用我用到的部分，大小瞬间减了一大半，有没有

对于react其实也是有争议的，一个是它的体积，一个是它的语法jsx
先说说语法吧，我感觉写习惯之后，完全不想再写jquery，从前我也是一个jquery爱好者，感觉jquery无所不能，而且为项目也写了很多插件，各种jquery，后台的前端也是我用jquery+bootstrap写的一个框架。其实一开始看到react的时候，还没什么感觉，因为项目都是基于jquery，也不能说换，就在fb官网看了下例子，就过去了
后来总是有人问我react的问题，为了解答他的问题，我就到官网去看文档，然后在本地测试，OK之后告诉他，其实是这样的，噼里啪啦的说一大堆，后来问得多了，我也看得多了，我也渐渐的对它感兴趣，并决定下次新项目可以试试，于是经常到git上关注它的最新动态，我记得那时的版本是0.14吧，当时react还只是单个文件，现在已经拆分成react 、dom项目模块了，对于jsx的写法有人说是退步了，有人说是进步了，其实主要也css部分吧，这一部分我还是通过外部样式引入class，只在jsx里面写渲染逻辑，组件小而美，没有dom操作，所有行为都可预测，当然了也有同事始终忘不了jquery，于是在react里面经常有('#id').addClass('cls')这样的代码，还有$('#id').addClass('cls') 这样的代码，还有$(‘#id’).data(‘id’)，$(this).find(‘input’) 各种查找元素，不得不佩服jquery的深入人心，不，应该是深入骨髓了，是时候刮骨疗伤了，咳咳

还有一个就是它的体积，gzip之后居然还有40k，对于有点强迫症的我来说，确实有点大，所以我只能尽量压缩其它模块的大小，还好加上cdn跟cache之后，除了第一次大一点，其它都如丝般顺滑，一直都想fork一份react代码，然后做个mini版，但是一直没有时间去研究它的代码，后来发现携程好像做了一件我一直想做的事情，就是把react给精简了，用了一下发现大部分页面都没有问题，由于时间问题，没有深入，也没有切换，现在不知道发展得怎么样了。

ajax模块也是组件封装的一个，为什么没有用jquery或zepto呢，还是那句话我为了精简，当然了自己封装的模块同时兼容了jquery的ajax，并且在里面加了一些拦截器，处理登录状态判断，超时处理，异常处理，调用ajax的方式基本不变，代码不是一个人在那写，有些保留下来会比较好，方便其他人

到这里我都没有贴代码，为什么呢，其实主要表达的是一个思想，代码每个人写的都不一样，同一个功能实现的方式有N多种，写出什么样的代码，主要是一个的技术沉淀与思想沉淀

由于项目成功上线，以及后面的陆续迭代，让我对前后端分离更有信心，网上听得最多的就是nodejs做前端中间层了，但是谁用谁知道。

由此埋下了基于nginx开发前端的伏笔，后面陆续做了几个类似的项目，在一次很偶然的机会下，把lua编译进了tengine模块，并在tengine里面，用lua写了几段处理代码，对nginx + lua 开发开始向往，于是有了这段基于openresty的开发经历，在这里可以分享给大家