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的结构层次还比较分明的，但是看模板，输出一会一个<?php echo $xxx;一会一个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就可以实现模板更新。效率比现在会高很多很多。
至此，前后端分离的部分就写完了。整理一下，前后端分离要注意的部分如下：
- 初始应该有意识的为前后端提供中间层的测试数据
- 初始务必约定好常用插件模块，提示层样式等公用信息
- 初始应该尽量完整好错误码标准什么的，至少别三天两头改
- 必须100%保证前端能看到整合后html模板对应的页面
- js和css的服务器要给前端权限，保证即时更新即时看到效果
产品经理：至少之前我对产品经理是没用什么概念的，所以后面说的部分也不一定对，就本次项目中产品经理主要负责的是极其详细的流程步骤的梳理，包括提示语，网站结构的框架图都出自她们之手。事无巨细，令人发指……至少我觉得我是不太可能把一个流程每个步骤都明确到那么细致。产品经理知道自己想要什么，并且明确知道实现方式，但后端感觉不是很给力，感觉后端做的部分是按自己的理解+贴合一部分框架图搞的，我觉得，从程序实现方面来说，可以融入自己的理解，功能要求你实现不了80%是你技术问题，20%才是对方要求奇葩。后端开发，从细节而言，就应该尽量遵守框架图，不懂的可以问产品经理，按自己理解做出来不符合需求，不是浪费你我时间么……
UED：至少这里的UED同事让我感觉到专业的味道，像素级别的细节，网站初始时，各种细节从段落到按钮间距都有最初的标准，这样的标准极大的方便了前端开发也方便了设计人员，着实给力。见过她们设计的东西之后，我才发觉：原来设计标准和效果图这些还可以这样专业。
总结就写到这里，也算对内对外都有个交代。虽然自嘲赚卖白菜的钱操卖白粉的心，但是换个思路想想，你花卖白粉的钱也不一定能有这样的机会去学习提高自己的。生活方面，我总是超级想得开，哈哈哈哈，学到N多东西是最令我开心的事情。感谢每一个项目组成员这一个多月以来对我的支持和指导，感谢直属BOSS能给我这个机会见识专业的人们是如何工作的。这一个多月的辛苦，值！
如您从本文得到了有价值的信息或帮助，请考虑扫描文末二维码捐赠和鼓励。
如本文对您有用，捐赠和留言 将是对我最好的支持~（捐赠可转为站内积分）
如愿意，请向朋友推荐本站，谢谢。
尊重他人劳动成果。转载请务必附上原文链接，我将感激不尽。
留言