汇域网站项目开发心得
 

汇域网站项目开发心得,技术与合作的体验
2014/06/24
落雪
-

环境:

设备:PC

系统: window 8, window 7, window XP, Mac

浏览器: IE7 +, Google, Firefox, Safari

技术:

HTML5,  CSS3,  JavaScript

工具:

图片处理: Photoshop

代码编辑: Sublime Text2



汇域项目属于传统布局,整站内容宽度为960px,主要分为头部(header),内容(content),底部(footer)三个区域。



这个项目主要是针对PC设备,在开发难度上,相对以往项目要减小很多,但是项目的亮点也就较难体现,所以在项目中合理的使用前沿技术来优化项目是必不可少的。



这次开发初次采用了渐进式开发,渐进式指的是:把页面分为三个层(结构层、表现层、数据层),先搭建整站的框架,然后完善整站的样式,最后处理整站的数据交互,主要目的是为了设计,前端,程序能同步进行,完善开发模式。



由于初次尝试,优劣参半,仅此项目开发反馈如下:

提升了对大型项目的整体把控能力;

对细节上的整体统一性得到提升;

工作的心情愉悦度大幅度提升;

网站兼容性问题相对减少很多;

可以快速的让程序开发人员切入工作;

在开发时间上并没有得到明显的减少;

用户体验没有显著的提高;

后期完善工作没有明显的减少。



汇域项目在框架搭建中借鉴了Bootstrap框架中的栅格系统,由于此项目初期设计并不是根据栅格模式设计,所以项目中使用到的地方也较少,但是对栅格系统的研究带来了较多的实验信息,为以后采用栅格系统开发提供了数据基础。



项目开发初期,对样式选择器的使用花费了较长时间,参考了部分其他大型网站的使用方式,决定采用以下模式:

独一无二模块:ID  (#header, #carousel);

相似相同模块:CLASS (.section-header, .section-contain);

交互选择器:data-name  ($(“[data-tab=’item’]”));

公共类:ui-name  (.ui-fixed, .ui-clear);

网站内部相同模块的样式采用了公共类:.m-t70(上边距70px), .m-t30(上边距30px)。



规范化的模式在开发中减少了不少的重复工作,同时对以往的经验得到充分的发挥。尤其是表现层和数据交互层之间的独立,让网站结构更加的清晰,也为后期维护和更新提供了保障,其中公共类的使用则让以往项目中的优势进一步体现在其他项目中,提高了开发效率。



在完善项目样式时,需要对项目的数据交互有一定的前期规划,才能在后期给数据交互带来便利。



数据交互完善,包括了交互的完善,与后端数据的交互,是较为关键的一步,本次依然使用jQuery作为主框架,自己根据需求进行功能的扩展,在以往的开发过程中,jQuery一直是作为项目的主框架,所以项目的进度也不会有很大的影响。



根据项目的需求对jQuery进行扩展是一个必不可少的过程,最近也在整理相关的扩展插件,对以后的项目开发提供便利,但是开发一个可持续扩展的插件,没有那么简单。汇域项目中主要的框架有:browser(浏览器版本判断), delayLoad(延迟加载), imageLoad(图片位置自适应),carousel(图片轮播),createMap(地图加载)等。



就以上提到的几个插件,在以往的开发中也经常用到,这一次进行了有效的整理和完善,为以后的工作也带来了便利。



其中后端数据交互,主要体现在了表单的提交,这次是由后端提供接口,前端传送数据。如此便能把前端的技术使用最合理化,保证了数据交互的同时,也提高了网站的用户体验,如表单验证(插件整理中)等等。



在用户体验提升研究中,汇域项目做了多方面的尝试:

图片延迟加载;

地图延迟加载;

JS与CSS3互补式交互;

Loading添加;

Ajax调用内容。


图片延迟加载使用的是delayLoad插件,支持不同事件延迟加载(滚动加载、点击加载等),汇域项目整站图片采用延迟加载和Loading配合,所有未加载图片都以Loading为默认展示方式,提示正在加载。



其中导航子菜单的图片等鼠标经过对应菜单才会加载,而其他图片则是在图片进入可视区域才会加载,用户未曾浏览的图片,将不会加载,合理的节省了对资源的请求,提高了网站加载速度,具体原理将会在“网页之延迟加载”一文中详细讲解。



地图延迟加载,也叫异步加载,默认的百度地图是采用的同步加载,执行到该JS则会请求相关资源,采用异步加载则实现了按需加载,在用户准备看地图时,才会加载。具体原理在“百度地图之异步加载”中有详细讲解。



Ajax调用内容主要体现在内页,汇域项目有四级页面,当页面过多,每次跳转带来的体验就会下降,所以本次对文章页使用了Ajax调用方式,在文章列表页点击标题时,并不会跳转,而是通过Ajax把新闻内容调用到当前页,又保留了文章页面,如此即不会影响SEO优化,同时保证了用户体验的提升。



关于JS与CSS3互补交互,这是第二次尝试,基本思路是高版本用CSS3实现交互,低版本用JS。整体上来说,使用CSS3完善交互效果相比JS要减少消耗,同时交互效果也不错。渐渐增强、优雅降级,接受不同浏览器不同用户体验的理念,提高大部分高端用户的优质体验,保证少部分低端用户的正常体验。



关于不同浏览器的提议,有个话题不可避免,IE6浏览器以及XP系统,XP系统在国内暂时无法淘汰,所以兼容是无需置疑的。查阅了国际各大浏览器的市场份额,以及国内市场IE6的市场份额,再结合该项目的用户群体,决定对IE6不支持,在IE6浏览器浏览汇域项目,将会看到提示版本过低信息,同时提供了主流浏览器的下载地址,也算是为国内淘汰IE6尽一份力,最大受益者还是前端开发工程师,少了IE6的兼容,整体开发效率将提高不少。



在开发期间,遇到很多各部门之间的合作问题,这个值得深入思考,一个优秀的项目,是一个Team的结晶。