大型网站开发:如何正确整合视图页

发送到手机
使用"扫一扫"即可发送至手机

在大型网站开发项目上,像稻壳互联这样具有一定规模的互联网企业都会有包含系统架构、前端、后端、测试的完整过程。在整个流程中前端和后端的耦合会非常大。当然目前有两种主流的方式来完成前端页面和后端逻辑的整合。第一种方式是通过前端js框架(如ExtJS,AngularJS)调用后端api的方式,这种方式在网站前台使用的比较少;而另一方式则是侵入HTML的整合,在MVC框架(如spring mvc,.net mvc,php mvc等)下就是所谓的视图页的整合,这种方式无论在网站前台还是后台都比较常见。本文主要探讨侵入HTML的整合即视图页的整合。

对于用户而言视图页整合的质量直接影响了整个网站的最终使用体验,在这个环节中往往附带着大家的疑问:“为什么我前端好的,整合了就不行了?”,“这个链接怎么不能点啊?”,“图片怎么显示不出来?”,“这块怎么错位了?”,“滑动效果怎么没了?”,“怎么手机号没验证?”……如此多的问题大概是因为“我手滑了下吧!”。所以,今天给大家带来一些整合流程以及一些tips避免这些问题。

1、在整个视图之前我们要从整体上构思视图的模块结构,找出哪些是公用模块、模版页以及其中需要包含的内容,这部分工作最好是通过设计稿来完成。 

2、有些同胞们拿到前端二话不说就开始干了,但这往往是最容易出错的,“人非圣人,孰能无过”,前端同学们也会犯小错误的,所以,先对比下前端与设计稿是否有差异,会尽早的发现问题并得到大家的解决。

3、非常重要的一个环节,对前端的审核。图片大小是否过大,css、js文件是否过大,页面中是否引入大量的css、js,即早发现这些影响性能的问题且尽早解决,就比如说如果css、js引入过多,我们势必合并压缩,这可能会导致有些样式冲突或者js冲突,虽然在一个页面中看不出来,但是其他页面出错了,如果在此时合并,在其他页面整合的时候这些问题可以再现出来,但在完成之后这些问题可能就直接展示给了用户。 

4、接下来进入大家熟悉的coding,针对coding过程我这儿给出一些tips及一些技巧让大家能做出完善的页面。

下面奉上大型网站开发视图页整合TIPS: 

  1. 注意每个页面的头部以及底部,正是因为有了模版,我们往往忽略了模版,以至于前端在头部和底部针对这个页面的独特代码没被整合进去。

  2. 注意页面的TKD。页面的TKD往往会被大家忽视,毕竟大家的注意力主要集中在样式以及数据的继承上。

  3. 检查前端是否有404,500页面。

  4. 检查前端是否有暂无内容页面。

  5. 注意图片大小。尽量对图片进行大小截取处理,不一定要完全适合此处,可根据全站该图片的使用情况截图适当的尺寸,如:图片在整个网站中有400*400,100*100,60*60,我们可以采用400*400和100*100两种图片。

  6. 注意每个a标签,包括图片上的a标签。有些是前端的效果,有些是要链接到其他页面的,注意区分以及正确对href属性和target属性;

  7. 特别注意有些图片上前端可能没有包围a标签,这时候需要我们加上去,即使会导致样式问题。

  8. a标签有js交互的,href属性最好为“javascript:void(0)”,如果非要传递url,用data-href。

  9. 保证同一个页面只有一个连接入口。

  10. 尽量保证通过一个页面的入口url大小写完全一致,或者干脆全部用小写。

  11. 表单验证要尽早集成上去,尽早发现表单验证错误提示的问题。

  12. 使用TODO。在整合页面的过程中肯定会出现模块地方没法进行下去的,那么加个todo,继续干其他对的。

  13. 完成视图开发后可通过ide全局查找a标签是否有href属性,a标签href属性是否为“#”,然后检查它,然后统一完善掉。

  14. 最后检查使用IDE检查所有未完成的todo解决且删除todo。

  15. 哦,对了,记得网站的favicon要加上去。


    最后,建议大家在写每个模块是先考虑特殊情况,在集成正常情况。 如:列表页先考虑无内容时怎么处理,条数不足分页时怎么处理。


大型网站开发:如何正确整合视图页

大型网站开发:如何正确整合视图页

分享:

标签: