盒子
盒子
文章目录
  1. 分析PSD设计图
  2. 创建项目文件目录
  3. 模块化搭建整站结构布局
  4. 公共样式提取与实现
  5. 从上到下逐步编写样式
  6. js交互效果实现
  7. 浏览器兼容测试
  8. 写在后面

一个简单的电商网站模块化开发总结

一个PC端的电商网站首页开发,采用比较成熟常用的模块化开发,以方便后期维护。从结构搭建、到公共样式提取,再到js交互实现,循序渐进,总结一下,如有高见,欢迎指正,拍砖。

开发思路:

1.分析PSD设计图
2.创建项目文件目录
3.模块化搭建整站结构布局
4.公共样式提取与实现
5.从上到下逐步编写样式
6.js交互效果实现
7.浏览器兼容测试

附:此次并没有使用自动化工具,没有进行文件压缩优化,意在聊模块化开发。

分析PSD设计图

从设计图可以看出,整站采用固定宽度布局,有部分的圆角、渐变(可单独提取成渐变class)、小图标(可以分类合并),有多处相似的地方,比较适合模块化开发。比如可以通用的圆角矩形框、tab切换、渐变样式等。

创建项目文件目录

由于没有采用自动化工具,并不是做线上发布,所以没有过多的结构,没有多版本

1
2
3
4
5
6
|----index.html
|----js
|----css
|----img
|--ad
|--content

模块化搭建整站结构布局

根据设计图,进行网页结构分析,可以大致分为以下几部分

1
2
3
4
5
6
7
8
9
10
11
12
13
14
#header /* 页头 */
#nav /* 导航部分 */
#search /* 搜索部分 */
.content /* 主体部分 */
.main /* 左侧主内容 */
.section /* 普通容器 */
.options /* tab容器 */
.main_ad /* 主内容广告 */
.side /* 侧边栏 */
.side_section /* 侧边栏普通容器 */
.side_ad /* 侧边栏广告 */
#footer /* 页脚 */

因此可以写出布局样式,即layout。

公共样式提取与实现

这里针对这个网站的主要有:浮动与清除浮动、渐变类、三角形箭头。实现渐变class=>.gradient

1
2
3
4
5
6
7
8
.gradient {
background: -webkit-linear-gradient(top, #ffffff, #f8f8f8);
background: -moz-linear-gradient(top, #ffffff, #f8f8f8);
background: -ms-linear-gradient(top, #ffffff, #f8f8f8);
background: linear-gradient(top, #ffffff, #f8f8f8);
-ms-filter:"progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#FFFFFF, endColorstr=#f8f8f8)"; // 针对IE低版本
+background: #f9f9f9; //针对IE7就只显示一个背景色
}

从上到下逐步编写样式

编写样式时是利用模块化布局的思想,先写公共部分,再写特殊部分,例如侧边栏的标题部分基本都相同,故实现一个所有的都实现。编写样式时要测量精准,每做完一个小模块立即和设计图进行对比,找出差异,然后精准高度,以免写到后面时,网页底部对不齐,到头来找时耗时耗力,效率低。

对于图标合并的方案是采用:同模块图标合并。一、命名方便;二、管理维护方便。避免整页图标一起合并,倘若其中一个图标改变,尺寸大小不变还好,如果尺寸一旦改变,涉及到修改的地方就太多了。同模块图标合并显然可以更方便维护,虽然增加了一点点所谓的请求数量。

切图采用的方案是:如果css能实现就用css,如果要求兼容性更强一点,则部分采用切图。即采用优雅降级方案,比如渐变,低版本的浏览器则换做一个近似的背景色代替。三角形IE6下变成矩形,但可以接受,谁让他非得搬出IE老大哥来呢,略略略~。

js交互效果实现

由于本站只是一个练习项目,所以采用了jquery来实现交互效果。js实现时基本要考虑方法的复用性,函数的执行效率等等。

多种类型的函数采用立即执行函数来将变量封闭起来,避免全局变量的污染(个人感觉最主要的是减轻了起名的负担,哈哈哈~)。所以js部分的结构会变成

1
2
3
4
5
6
7
8
9
10
11
12
$(function () {
// 搜索切换
(function () {
})();
// update 文字滚动
(function () {
})();
... ...
});

浏览器兼容测试

最好是在实现每一个模块儿后就立即去测试,如果经验丰富的可以最后测试,测试的浏览器主要有:Chrome、Firefox、IE(6/7/8/9/11)、Safari、(当然你也可以加上Opera)。这个例子中主要涉及到的可能有渐变背景、圆角、浮动元素margin值、半透明背景色、浮动元素对齐(vertical-align:middle;)等等。
一些效果可能采用不影响浏览即可以,但是布局不能乱的方案。

写在后面

此次案例来自妙味课堂的设计图和图片资源。

最后上实现demo传送门:(http://fehey.com/demos/items/100U/)
github源码:(https://github.com/EryouHao/demos/tree/gh-pages/items/100U)

支持一下
扫一扫,支持forsigner