阶段性技术啰嗦(一)

听听有情怀的歌,陶冶情操!大学很爱的一首歌。

又到周五了,趁现在下班时间,抽空写写最近在公司遇到的坑以及学到的东西吧,最近一直很少做自己的技术总结,老是写生活随笔啥的似乎也不符合我这个愤青的年龄 。看到我都觉得我活在小康社会似的,我都快不相信自己了。

最近一直在做支付项目,公司用到了百度ECUI的一个MVC框架,配合ETpl模板引擎,后台是Java语言,开始做前后端分离

毕竟第一次做,难免有些紧张。(~.~),讲讲几个遇到的问题以及解决办法吧,俗话说,找到合适的途径 合适的方法才是做重要的。因为在公司没写完就回来了,所以深夜还是继续写,当日事当日毕。

ETpl

说说ETpl吧,一个百度模板引擎,虽然用到人不是很多,但是大致还是一样的吧 通用模板都是大致类似,一开始遇到的问题还是挺多的,因为模板在项目或者是组件都是很多封装或者是写好的,需要什么就哪来用,不过,多多少少还是会有问题的,比如兼容性或者是可能这个组件不适用今后的产品升级,那就需要更新这个组件,但是你会发现,组件是很多地方在通用,所以你很多东西你不能乱动的,就怕会牵一发而动全身。

但是这不是我要考虑的事情,我要做的就是把功能做好,或者做出来吧 现阶段。先熟悉熟悉框架或者是别人的代码,一开始没啥经验,也没比较全面的文档,或者是教程,很多都是需要你去看别人的代码或者是代码去运行了你才能懂这个功能到底是干嘛用的。刚开始前几天确实没头绪,蒙了,有点想放弃,但是想想别人大都是这么过来的,自己就是吃翔也得坚持下来对吧?

ECUI

ECUI实现MVC的一些业务实现控件化,就是希望做到每个功能能够组件化吧。不过写组件的我都觉得很佩服,是我需要学习的前辈们。

入职第一天,我的导师—— 我的师傅,挺不错的,我见过的很勤奋的一个女前端,得叫全栈,因为他们都是Java转的前端,来抢前端的饭碗的女中豪杰,还有超哥和浩哥都是这里的一员。吃饭都是各成一派,我要是想吃面食就跟浩哥走,想吃盖饭啥的就跟超哥走。就是这么随波逐流,没办法。

一开始,需要知道的东西比较多,所以比较乱,毕竟从外包公司出来的,所以很多东西还是比较不规范需要去加强学习的。先来说说Git吧,耳熟能详的东西。

按照以往的做法,以往我们都是直接在Master提交代码,或者是SVN,那时候还不是命令那么高端,都是客户端可视化,所以直接更新或者是检出提交,所以总出现各种问题,在外包的时候,你需要跟着客户的节奏走,赶时间赶项目,时间一紧张就会频繁遇到问题。小项目还好,但是遇到大项目估计就不行了这种办法。

来了公司之后,开始熟悉下运作流程,提交代码都是各种需要权限,我自己建一个分支,然后开始开发了,每次提交代码都需要别人的代码审核或者叫review,没问题给你通过代码审核,你可能push成功上去,不行就给你打回去,你就需要重新git reset 到成功的那个版本(changeId) ,假如通过了,那还不一定就完事了,代码是使用Jenkins配置自动化构建,自动代码检查和压缩打包之类的,你得看是不是有报错,所以没问题才能继续通过SSH上传到开发环境。一开始我又蒙了,什么鬼啊这是?一直出问题,代码报错,因为你JS不书写规范或者是CSS 不书写规范都会构建不成功(比如function后面需要空格或者是改空格就空格,分号啥的都要按照书写规范,一开始有个功能用到Tab切换,我用到的时候闭包去写切换,然后又是报错,我实在没辙了),最后师傅叫我安装本地的JSSLint 和 CSSLint ,OK 安装就安装呗,没想到,又是遇到问题来了。我之前Sublime安装了各种插件,所以一直安装不成功,因为公司用的CSSLint 和 JSLint 的校验包都是有了,我需要用Node安装着两个,然后替换这两个文件夹,后台我把我心爱的插件都删了,重新安装了CSSLint 和 JSLint 就可以了,真是纠结死我了。

1
2
3
4
5
6
7
1.安装nodejs最新版本,通过nodejs指令 cmd下执行npm install -g xxx分别安装jslint与csslint
npm install -g jslint
npm install -g csslint
2.安装Sublime Text 3(推荐,也可以安装别的工具),安装Package Control
3.通过Package Control安装SublimeLinter/SublimeLinter-contrib-jslint/SublimeLinter-csslint
  ctrl + shift + p--->install package
4.执行jslint找到jslint的安装目录的父目录,使用我提供的jslint/csslint包覆盖掉原来的jslint与csslint

安装完这两个东西,把所有的文件报错都修改了 ,再Git命令push,review进行审核,哦哦,原来如此,不过真是折腾死宝宝 了(づ。◕‿‿◕。)づ 我不能放弃吃药才行!

Fiddler代理

也是知道原来用这个来做前后端分离,假如后台是Java或者是项目是基于后台的Java 我就想到头疼的需要各种配置后台环境,用Fiddler 写正则判断,实现本地走代理,不过需要配置本地的HOST文件。

1
regex:https://hyb628.github.io/(.*).(html|js|css|less|js_|jpg|png)(\?[a-zA-Z0-9]+=[0-9A-Za-z]*)?$

这样我就把需要的资源就不走外网直接走本地,不过https链接本地打开的话每次都提示证书问题确实比价烦,需要把s去掉就好,第一次资源加载进来在打开代理加载规则,加上用用框架的,视图层 和 数据逻辑都分开配合使用,加上ECUI的路由addRoute 控制实现类似单页面的不刷新页面跳转差不多这个意思。也可以用callRoute调用路由,哦哦,原来这样啊。

前端交互之前一直没在做这块,所以,后端专心写他们的接口就好了,前端也不用去管他们用什么环境,前端该怎么开发就怎么开发,完全独立出来。各自负责自己的业务吧。

后台写好接口需要前后端联调,好吧,我确实没做过这块,所以,又得跟后台大哥去做配合联调,一开始可能他们写的接口有问题那就慢慢对接,我照样开发,我需要什么参数叫后台给我提供好,或者看需求文档,不过,需求文档这东西,要是产品经理写的没那么详细,那估计你又得去撩妹,找找她们说说哪里不行怎么做好了。也很费神。

需求文档包含埋点的增加,就是类似数据监控吧。我开发完才去加这些 不过还算简单,期间,PPT和PSD 都给到你了,不过PSD比较不好找,估计时间比较赶吧设计师,有点糙,不过也没事,反正我是切图仔,专业抠图20年(顺带抠脚)。

开发完一个功能,因为涉及到跟JSP的页面跳转,因为毕竟可能有些老代码的话那就不可能一下子都改革过来都是慢慢更新迭代,就涉及到比如页面的跳转,也是需要用路由的方式,发个请求跟JSP那个大哥协商好发什么东西给他我页面才能跳转到正确页面,也蛮有意思的。

SSH (Xshell)代码部署

我通过Jenkins 构建成功的话,需要进行打包,因为一开始构建我遇到一直打包不成功的问题,后来各种找问题,才发现我的LESS文件里面import了其他功能的LESS ,导致那个文件编译了,我的LESS就被output 丢弃了。所以搞得我都直播吃翔了。一开始以为LESS书写不规范或者是哪里问题,各种修改,各种蛋疼,就取消嵌套规则,结果还是不行,后台请教了文浩大哥,他第二天早上去看了看打包工具的源码,才发现是我的import问题,删掉结果就成功了,那时候,感动的鼻涕鼻屎都快出来了(没那么夸张,有点夸张,就是比较激动吧)。

成功后,下载打包成功的代码包,准备部署到测试环境了,这下师傅跟我说你用Xshell工具进行部署,问我会不会LINUX的一些命令,我这下又懵逼了,我说不会,我说你演示我看看,我记一下,结果,上面很多文件夹还是有权限的,一开始给我部署时候,进行代码全部覆盖,其实我都看不懂,比较笨呗,最后,暗自下决心开始学习基本命令,因为Mac几个简单命令还是稍微知道,要是这种 .tar.gz 打包好,先rz命令上传文件包,上传然后用 -zxvf web-fe-XXXX.tar.gz ( Tab键可补全文件名) 解压文件,然后再改改一个配置文件,就好了,第二天,我做了笔记自己尝试了下,觉得还行,像文件的删除,移动,或者是解压命令用几次就熟悉啦。也就能实现自己去部署代码啦。

CO提测

以前写代码,假如有测试人员,貌似都是后台部署然后测试进行测试吧,怎么测试我就不懂啦。现在需要做的就是进行提交测试申请,加入后端写接口的 他们也自己提交自己的测试申请,前端自己开发的提交自己Git分支的测试申请,通过网站,把构建好的源码包上传,还有需要写README文件,大致内容告诉测试人员提测点,需要测试哪些功能,他们好进行测试,还有就是你修改的哪些文件,这样他们测试的时候,直接抓取那个修改的文件过来就好,不至于整个项目进行替换,还有自己也写写备注自己修改了哪些文件,自己好知道。还有重要的一点就是,写提测点文件需要附上后台接口地址这样他们测试人员好对照接口进行测试,还有,因为埋点前端自己加,所以加了哪些也得提测前写到通用的线上文档里面,写完了测试申请说明和文件就提交上去啦,只是第一轮提测,期间测试人员通过禅道进行测试Bug反馈,不过,我拿到我的禅道账号打开一看,再次懵逼了,里面的项目多的我都找不到我的项目属于哪个,最后才知道我需要问问测试人员测试项目的版本号,每进行一个小功能测试都有测试版本号,加入这个版本号测试完了,你去修改Bug 改完了后继续提交第二轮测试,貌似好几轮测试。都不容易啊。~~(>_<)~~

浅谈Bug

说下遇到的一个之前没遇到过的Bug吧,就是tbody用JS的innerHTML插入,在IE9- 不支持,因为IE的只读模式所以出现未知的报错, 问题描述, 尝试后发现过于复杂并且不使用这个模板渲染方式,所以最后不得不换用li 标签之类的修改。加上模板引擎就不好做处理,所以需要谨慎用table标签吧。

涉及到的知识点有: 加入我用callRoute调用路由的方式进行页面的参数附带在浏览器上数据重新渲染,那还好,但是,我实现的是JS的重新渲染数据,所以这里就遇到瓶颈,纠结了一晚上最后还是决定改标签了。数据逻辑还是需要考虑全面一点才行。

今天例会,师傅老大说,看我现在手头项目也差不多好了,就说叫我下周开始学习React + Webpack ,新项目会用到吧,正好我也想研究点新东西加上项目实践。然后ECUI项目边弄吧。

明天团建得早起,2天时间得忙咯,貌似去北京郊外玩玩,顺带爬爬山。好久没去走走了,快枯萎了。晚安。

0%