openresty 前端开发序

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

主要解决了几个问题

1、独立，因为先后端分离，在开发的时候彻底能够互相独立，所谓独立，其实就是说先后端是属于两个项目，保存在各自的git仓库，提交代码既不会冲突，也不须要合并

2、解耦合，后端开发完成以后只须要提交代码，而后发布到测试环境，而前端只须要启动一个nginx而后反向代理到测试环境，就能够开始开发工做，就是这么简单

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

可是也带来了一些其余的问题，主要逻辑都是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’).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的开发经历，在这里能够分享给你们