3月4日,经过直属BOSS点头,我被新项目组借来救急,因为这边没有前端,所以从事前端开发……话说在此之前我一直是各种杂事都做,前后通吃(这词用的很装逼,其实就是有什么项目做什么,需要用什么学什么而已,技术没那么高)。借调过来做专业前端,压力着实不小,想着这种机会难得,抓住了就努力做好,所以,各种磨练痛苦下,我于4月14日完成任务,返回原项目组。

这一个月多,我积累了很多东西,虽然痛苦,最初的一周压力和疲倦都让自己有想哭的冲动,但秉着恶魔的习性,不对自己狠对谁狠,我顺利的完成了任务。回头看看过去的自己,这一个月让我有了用钱买不到的很多提升。下面就这一个月做个总结。

这一个多月,从对seajs只是概念的了解,到熟悉模块,打包jQuery插件为模块,利用jQuery实现很多特效,会利用spm进行打包上传等等,我学到了很多关于前端的知识和经验。比起专业前端,我明白自己还是相差甚远,因为对于CSS和jQuery的了解还不够深入,经验不够。

对于前后端分离协同开发,我也有了一些经验,结合网上的一些博客分享,更加融会贯通。也对产品经理以及UED设计有了更深刻的了解,下面就分开来说说,想到哪儿说到哪儿好了。

seajs:开发方式还是比较方便的,利用spm init比较方便就建立了需要的目录,不过貌似多不少没用的文件,大概可以根据改配置文件来处理吧,暂时不深究了。seajs处理起来确实方便一些,引用js什么的只需要一个模块,剩下的交给模块里自己处理就OK了。不过调试的相对路径和服务器要处理好。否则会给本地调试带来不少麻烦。PS:多用相对路径少用绝对路径。

前端:至少我查看原有框架的一些特效的代码发现,并没有非常在意代码的精简度问题,实现一个hover出现加入购物车或者物品阴影的部分,div嵌套了五层。由此来看,也许html代码的精简已经不是非常重要了(本观点只是怀疑,不是确定)。补充说明下:我不是专业前端,让我实现这个特效还真是挺难……但我初始认为,实现一个特效,能让代码最精简化,会对SEO,服务器方面都有一些益处。所以潜意识想尽量精简代码,但通过查看原始框架的代码,我发现,其实,如果单纯从用户体验角度考虑,多嵌套一些代码实现了很棒的效果,也是完全可以接受的。

后端:后端我还真没怎么了解过,只是在测试反馈BUG的时候有过接触,唯一看过的phtml模板中,代码感觉,还是比较乱的,因为是基于html的,原始html的结构层次还比较分明的,但是看模板,输出一会一个一会一个echo的,觉得这模板用起来不是很顺,最关键的,不方便对比和SVN更新后的模板文件修改了哪些部分。我想,后端的筒子也比较痛苦的,但其实这个还是可以改变的,只要在模板嵌套的时候,尽量遵守原始html的结构和代码,事情也就没那么辛苦了。

前后端分离:
前后端分离本意是为了加快开发速度,加速迭代,将前后端的开发人员精力集中到自己的部分,但在我这个项目中,这反而给调试带来了很大的麻烦。因为,前后端分离不够彻底!调试数据层面上,没有中间层,前端调试ajax最初都没有接口和数据,后端呢,由于前端对指定页面完成度不够,自行在调试页面中添加js实现某些功能。这些都是导致后面联合调试出现问题的原因。前端没有中间数据和接口,所以ajax的部分,预料之中的,都写到模块中注释好。结果到后端联调的时候,发现预留的ajax的部分没人对应,记下来又发现有些特效冲突,要找,利用seajs开发,页面本该只有一个js引用,结果……是各种碎散的js,整合起来还要处理冲突,研究后端编写这些实现的功能方式神马的,着实很是痛苦。然后,写cookie,轮播,浮动层提示,项目建立之初没有约定,导致前后端调用不一致,各种插件乱飞不可控……而出了问题,统统推到前端处理,其中的难受可想而已。

出现上面问题主要由两个因素导致的:一是系统设定时,设定者经验不足;二是系统开发时,后端人员对前后分离的精神贯彻不够。

系统设定之初,公用插件什么的都应该约定好,并且!要让前后端绝对遵守前后分离的原则,后端写js本意是加速开发,实际上给后续的联调带来了很多不可控的因素,后端就应该抓住自己后端的核心责任,开发好系统,开放好对应的接口API,就够了。前端没完成这个页面的特效,模板就放在那里OK,接口在,任何时候js处理OK就好了。后端绝不插手前端js以及html代码的部分,这样,避免了BUG前后说不清的问题,也明确了各自责任。

前后分离的彻底,才能让前后端的开发人员精力集中。

联调环境问题:整合模板后进行调试,后端应主动给予前端人员测试账号,对每个模板对应的实际页面整理并提交。我当时的环境是,自己做的模板,整合完,我看不到,这是不正确的。联调的环境务必保持一致。后来能看到了,结果截至我返回原始项目组(我来该项目组是救急帮忙的,为期一个月),我也没能看到订单审核页面实际的效果。这个页面的debug,是盲调,因为后端负责该页面的同事告诉我,他用的虚拟机,我看不到!@##@¥%%……&不知道后面是否有改善,但至少,要明确的是,联调测试的环境,对前端人员来说应该有百分百的权限查看的。

再说说js和css的问题,因为前面遗留问题,后端有自己的js,所以这块我就说说理想状态下应该是什么样的:js和css,以前端人员为主,务必在调试阶段中,后端模板的js和css引用都使用前端打包上传到服务器上的最新的js。只有这样,才能保证样式和js是最新的。html模板如果根据之前我说的那样编写,查看下SVN日志,看看更新了哪些html,一个compare就可以实现模板更新。效率比现在会高很多很多。

至此,前后端分离的部分就写完了。整理一下,前后端分离要注意的部分如下:

  1. 初始应该有意识的为前后端提供中间层的测试数据
  2. 初始务必约定好常用插件模块,提示层样式等公用信息
  3. 初始应该尽量完整好错误码标准什么的,至少别三天两头改
  4. 必须100%保证前端能看到整合后html模板对应的页面
  5. js和css的服务器要给前端权限,保证即时更新即时看到效果

产品经理:至少之前我对产品经理是没用什么概念的,所以后面说的部分也不一定对,就本次项目中产品经理主要负责的是极其详细的流程步骤的梳理,包括提示语,网站结构的框架图都出自她们之手。事无巨细,令人发指……至少我觉得我是不太可能把一个流程每个步骤都明确到那么细致。产品经理知道自己想要什么,并且明确知道实现方式,但后端感觉不是很给力,感觉后端做的部分是按自己的理解+贴合一部分框架图搞的,我觉得,从程序实现方面来说,可以融入自己的理解,功能要求你实现不了80%是你技术问题,20%才是对方要求奇葩。后端开发,从细节而言,就应该尽量遵守框架图,不懂的可以问产品经理,按自己理解做出来不符合需求,不是浪费你我时间么……

UED:至少这里的UED同事让我感觉到专业的味道,像素级别的细节,网站初始时,各种细节从段落到按钮间距都有最初的标准,这样的标准极大的方便了前端开发也方便了设计人员,着实给力。见过她们设计的东西之后,我才发觉:原来设计标准和效果图这些还可以这样专业。

总结就写到这里,也算对内对外都有个交代。虽然自嘲赚卖白菜的钱操卖白粉的心,但是换个思路想想,你花卖白粉的钱也不一定能有这样的机会去学习提高自己的。生活方面,我总是超级想得开,哈哈哈哈,学到N多东西是最令我开心的事情。感谢每一个项目组成员这一个多月以来对我的支持和指导,感谢直属BOSS能给我这个机会见识专业的人们是如何工作的。这一个多月的辛苦,值!

Related Posts: 修行归来——记一个月项目组救急当前端 :