文档章节

openresty 前端开发序

-外星人-
 -外星人-
发布于 2016/12/09 11:45
字数 1806
阅读 849
收藏 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
深圳
程序员
私信 提问
【开源访谈】OpenResty 作者章亦春访谈实录

关于开源访谈 开源访谈是开源中国推出的一系列针对国内优秀开源软件作者的访谈,以文字的方式记录并传播。我们希望开源访谈能全面的展现国内开源软件、开源软件作者的现状,着实推动国内开源...

虫虫
2012/07/09
76.4K
31
OSC 第 105 期高手问答 —— 高性能 Web 应用开发

OSCHINA 本期高手问答( 12月23日- 12月29日)我们请来了 Vanilla 的开发者@iDev_周晶 来解答 从 Vanilla 开始做 OpenResty 高性能 Web 应用开发 方面的问题。 周晶,@iDev_周晶 ,新浪移动事业...

叶秀兰
2015/12/22
13.8K
41
openresty调用自己编译C动态库,无法找到其自己动态库依赖的库

使用FFI编写一个动态库,库里面调用openssl及相关的库,但是加载到openresty时,无法找到其依赖的openssl库和第三方的库,并且已放到usr/lib目录性,并在 lua_package_cpath '/lib64/?.so;/...

vanlee90
2016/09/26
628
1
ngx_openresty 1.2.7.1 开发版发布

OpenResty 刚刚发布了 ngx_openresty 新的开发版 1.2.7.1。该版本将 Nginx 核心升级到了最新的稳定版 1.2.7,同时把 LuaJIT 2.0 升级到了最新的 2.0.1 发布;另外,ngx_lua 模块也有一些微小...

章亦春
2013/02/24
1K
4
openresty+lua灰度发布的简单实验

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

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

没有更多内容

加载失败,请刷新页面

加载更多

tac 与cat

tac从后往前看文件,结合grep使用

writeademo
36分钟前
2
0
表单中readonly和dsabled的区别

这两种写法都会使显示出来的文本框不能输入文字, 但disabled会使文本框变灰,而且通过通过表单提交时,获取不到文本框中的value值(如果有的话), 而readonly只是使文本框不能输入,外观没...

少年已不再年少
58分钟前
2
0
SpringBoot上传图片操作

首先有个上传文件的工具类 /** * 文件上传 * @param file * @param filePath * @param fileName * @throws Exception */public static void uploadFile(byte[] file, String ...

_liucui_
今天
6
0
DrawerLayout

public class MainActivity extends BaseActivity implements NavigationView.OnNavigationItemSelectedListener,OnFragmentInteractionListener{ public NavigationView navView; ......

安卓工程师王恒
今天
2
0
python精简笔记

python精简笔记-字符串基本用法 字符串常见用法: * encode() # 编码成bytes类型 * find() # 查找子串 * index() # 获取下标 * replace() # 替换子串 * len(string) # 返回字符串长度,...

平头哥-Enjoystudy
今天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部