文档章节

openresty 前端开发序

-外星人-
 -外星人-
发布于 2016/12/09 11:45
字数 1806
阅读 848
收藏 12

还记得第一次尝试前后端分离的时候,是使用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’).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的开发经历,在这里可以分享给大家

© 著作权归作者所有

共有 人打赏支持
-外星人-
粉丝 49
博文 48
码字总数 22995
作品 0
深圳
程序员
私信 提问
在 OSX 上用 openresty 架设自己的 Git Web Service

在 OSX 上用 openresty 架设自己的 Git Web Service 目录 - 介绍- 下载编译安装 openresty- 启动 openresty- 下载编译运行 sockproc 守护进程- 下载安装运行 codea-scm web 服务- 在 iPad 上...

FreeBlues
2015/06/22
0
0
Openresty中使用LuaJit

今天在使用Openresty的时候,遇到了一个问题: local resty_sha1 = require "resty.sha1" 想使用resy.sha1的时候,出现了error,log如下: 2013/09/25 09:00:40 [error] 19620#0: *3 lua en...

timingbob
2013/09/25
0
0
基于OpenResty和Node.js的微服务架构实践

什么是微服务? 传统的单体服务架构是单独服务包,共享代码与数据,开发成本较高,可维护性、伸缩性较差,技术转型、跨语言配合相对困难。而微服务架构强调一个服务负责一项业务,服务可以单...

个推
07/02
0
0
OpenResty(nginx扩展)实现防cc攻击

OpenResty(nginx扩展)实现防cc攻击 作者:朱 茂海 /分类:Nginx, 服务器安全 /Tag:OpenResty 文章目录 [隐藏] 一、安装依赖 二、luajit安装 三、openresty安装 四、nginx配置 防cc攻击,推荐使...

epiclight
2015/06/05
0
0
openresty+lua灰度发布的简单实验

如题,本文是笔者使用openresty 和lua脚本实现的简单灰度发布系统,记录下来。 一、安装 参考openresty 官方网站安装openresty即可 建议参考文章https://www.cnblogs.com/zdz8207/p/Nginx-L...

月黑风高杀人夜
08/27
0
0

没有更多内容

加载失败,请刷新页面

加载更多

安秒平衡

相关介绍 电容两端的电压不能突变。 一般用在平衡条件下的开关电路中。 流经电容的电流平均值在一个开关周期内为零。 定义 安秒平衡原则:在稳态工作的开关电源中电容两端的正安秒值等于负安...

colinux
今天
2
0
Apache日志不记录访问静态文件,访问日志切割,静态元素过期时间设置

Apache配置不记录访问静态文件的日志 网站大多元素为静态文件,如图片、css、js等,这些元素可以不用记录 vhost原始配置 <VirtualHost *:80> ServerAdmin test@163.com DocumentRoo...

野雪球
今天
3
0
聊聊storm的ICommitterTridentSpout

序 本文主要研究一下storm的ICommitterTridentSpout ICommitterTridentSpout storm-core-1.2.2-sources.jar!/org/apache/storm/trident/spout/ICommitterTridentSpout.java public interface......

go4it
今天
4
0
Ubuntu常用操作

查看端口号 netstat -anp |grep 端口号 查看已使用端口情况 netstat -nultp(此处不用加端口号) netstat -anp |grep 82查看82端口的使用情况 查找被占用的端口: netstat -tln netstat -tl...

hc321
昨天
3
0
网站cdn的静态资源突然访问变的缓慢,问题排查流程

1.首先我查看了一下是否自己的网络问题,通过对比其他资源的访问速度和下载速度,确认不是 2.通过ping 和 tracert 判断cdn域名能否正常访问,(最后回想感觉这一步可以省略,因为每次最终能访...

小海bug
昨天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部