前端开发学习笔记六

前言

终于搞定了一个电商整站临摹,共四张页面,实现了基本的交互功能,同时也应用了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里面的函数,这样就提高了代码的利用率,使结构看起来清晰,易于他人理解和维护。最后在页面中,哪里用到,哪里直接引用就可以了。

总结

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