文档章节

openresty 前端开发序

-外星人-
 -外星人-
发布于 2016/12/09 11:45
字数 1806
阅读 847
收藏 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
博文 47
码字总数 22352
作品 0
深圳
程序员
基于OpenResty和Node.js的微服务架构实践

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

个推
07/02
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
在 OSX 上用 openresty 架设自己的 Git Web Service

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

FreeBlues
2015/06/22
0
0
个推首席架构师Qcon分享 |微服务架构的那些事儿

微服务架构需要注意哪些问题? 微服务架构,首先考虑客户端与服务端之间的通信问题。有两种解决办法,一是客户端与多个服务端直接进行通信,但存在对外暴露接口细节、众多接口协议无法统一、...

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

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

epiclight
2015/06/05
0
0

没有更多内容

加载失败,请刷新页面

加载更多

#mysql50# not Exist

data 目录有中文名称,可能是复制的"复件...."

少年不搬砖老大徒伤悲
22分钟前
1
0
在yii2中,让你action参数支持POST数据的小方法

我们先来看一段代码 class RaController extends Controller { public $enableCsrfValidation = false; public function actionSay($username = '',$city = ''){ echo "{$......

阿北2017
31分钟前
2
0
macOS 10.14 Mojave

在近日发布的 macOS 10.14 Mojave 操作系统中,有人发现它(在某些机型中)悄然禁用了先前的「次像素平滑渲染」选项,导致部分(尤其是使用非高分辨率显示器)用户觉得字体比先前的更细更难看...

火力全開
35分钟前
2
0
 实现分布式锁的正确姿势

实现分布式锁的正确姿势 原理分析 最近看到好多博主都在推分布式锁,实现方式很多,基于db、redis、zookeeper。zookeeper方式实现起来比较繁琐,这里我们就谈谈基于redis实现分布式锁的正确实...

DemonsI
40分钟前
2
0
微信小程序 、支付宝小程序、百度小程序和钉钉e应用的汇总

2018年9月25日 百度小程序开放企业申请 微信小程序:现在微信小游戏都热火朝天了,而且已经有了云开发,包括提供的能力、文档、社区等都相对完善,也有相关的变现方式; 支付宝小程序:https...

to_be_better
42分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部