汇域网站项目开发心得

环境：

设备：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的结晶。