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')这样的代码,还有<script type="math/tex" id="MathJax-Element-5">('#id').addClass('cls') 这样的代码,还有</script>(‘#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的开发经历,在这里可以分享给大家

<script type="text/javascript"> $(function () { $('pre.prettyprint code').each(function () { var lines = $(this).text().split('\n').length; var $numbering = $('<ul/>').addClass('pre-numbering').hide(); $(this).addClass('has-numbering').parent().append($numbering); for (i = 1; i <= lines; i++) { $numbering.append($('<li/>').text(i)); }; $numbering.fadeIn(1700); }); }); </script>

相关推荐