抹桥的博客
828 字
4 分钟
前端开发学习笔记六

前言#

终于搞定了一个电商整站临摹,共四张页面,实现了基本的交互功能,同时也应用了less这个新学的css预处理语言。之前也做过一个电商首页点这儿。但是因为只是单页面,处理起来比较简单。但是在制作这个整站的过程中,更加深刻的理解一些之前学过的内容:比如样式结构的分离,js设计时的分层思想等。点击这里查看网页效果,或者下面有效果图(图好丑):

效果图

结构#

首先说结构,拿到设计图时,先要进行分析。比如这四张页面,是典型的上中下结构,其除了中间正文部分,头部和脚部都是完全一样的,而且除了商品详细页面外,其他的正文部分都分为左右结构,可先将这部分相同的结构写好后作为模版,在写其他页面时只需要在模版的基础上填充内容就可以了。

<body>
  <div id="head"><!-- 完全一样的 --></div>
  <div id="content"><!-- 部分一样 --></div>
  <div id="footer"><!-- 完全一样 --></div>
</body>

样式#

因为在写样式过程中用了less这个 css 高级语言,写起来方便了许多,不用再去将一些重复的东西写上一遍又一遍,省去诸多麻烦。我对 Css 也惊醒了分层,先针对模版写一份样式名为mian.js,接下在针对不同的页面写不同的样式,最后在页面中同时引入进来就可以了。其实还可以再进一步细分,比如针对头部和页脚的,banner 部分的,页码部分的等等。

逻辑#

最后是js,在分析中发现,不同的页面中用的许多的逻辑都是一样的、比如几个 banner 部分的自动切换、模拟下拉菜单等。这时,将整个js代码分为以下三个层来写:

工具层#

这里是一些最基础的东西,比如获取元素的 class

shop.tools = {};
shop.tools.getByClass = function(par, cla) {};//获取相应class元素
shop.tools.onmouseover = function(ele,eles,select){};//参数为子元素,和父元素,最终为当前元素添加active状态
shop.tools.onclick = function(ele,eles){};

用户界面层#

这里写一下会多处用到的 UI 层:

shop.ui = {};
shop.ui.fadeIn = function(ele, time, opacity) {};
shop.ui.fadeOut = function(ele, time, opacity) {};

应用层#

这里就是页面会直接用的交互层:

shop.app = {};
shop.app.tip = function() {};
shop.app.banner = function() {};
shop.app.chose = function(){
	var specification = document.getElementById('specification');
	var color = document.getElementById('color');
	var speSpans = specification.getElementsByTagName('span');
	var colorSpans = color.getElementsByTagName('span')
	for (var i = speSpans.length - 1; i >= 0; i--) {
		shop.tools.onmouseover(speSpans[i],speSpans);
		shop.tools.onclick(speSpans[i],speSpans);
	}
	for (var j = colorSpans.length - 1; j >= 0; j--) {
		shop.tools.onmouseover(colorSpans[j],colorSpans);
		shop.tools.onclick(colorSpans[j],colorSpans);
	};
}
shop.app.chose_screen = function(){
	var top = document.getElementById('top');
	var a = top.getElementsByTagName('a');
	for (var i = a.length - 1; i >= 0; i--) {
		if (a[i].innerHTML == "更多") {continue}
		else{
			shop.tools.onmouseover(a[i],a,"active");
		}
	};
};

代码太多就不全贴了,可以看到在这里会多次用到之前 tools 和 ui 里面的函数,这样就提高了代码的利用率,使结构看起来清晰,易于他人理解和维护。最后在页面中,哪里用到,哪里直接引用就可以了。

总结#

在这个过程中也认识到自己很多方面还是不够熟练,需要继续加油啊。

前端开发学习笔记六
https://blog.kisnows.com/2015/01/13/learning-note-6/
作者
Kisnows
发布于
2015-01-13
许可协议
CC BY-NC-ND 4.0