暑期考核-二手交易市场网页总结

1.缺点

1.1 网页设计缺点
1）瀑布流布局下没有显示“加载/更多”等提示字样
2）页面缩放时没有出现滚动条

1.2 前后端沟通不足
1）前后端页面命名不统一、按钮等功能名称不统一导致合项目时速度慢。
2）前端功能与后端不统一时，后端直接修改，既没有实现前后端分离，又导致后端修改后样式混乱，最后阶段样式直接在后端阶段修改十分困难。
3）传参所用的标签不明确（input标签/a标签），在项目开始之前没有说明什么功能需要用什么标签，这也是导致后端修改后样式混乱的原因。
4）网页相同部分后端可实现，前端重复制作，随意修改，拖慢进度。

1.3 合代码速度慢->原因
1）经过了考试复习月，代码生疏，需要很长时间练手感，考核后期代码提交速度上升但后端已经来不及合项目。
2）对js不熟悉，在注册、购物车这样js代码很多的页面耗费大量时间找bug。
3）与后端没有及时沟通。

2.遗留问题
1）项目没合完！！
2）首页瀑布流：
a）在特定数量时会失去瀑布流效果。

/* goods Exhibition begin */
.goodsContainer{
    position: relative;
    width:1000px;
    margin: 20px auto;
	-moz-column-count: 5;
    -webkit-column-count: 5;
    column-count: 5;
}
.goods{
    position: relative;
    overflow: hidden;
    margin-bottom:20px;	 
	-moz-page-break-inside: avoid;
    -webkit-column-break-inside: avoid;
    break-inside: avoid;
	color:#fff;
}
.goods:nth-of-type(3n){ 
    height:243px; 
    background:#000; 
}
.goods:nth-of-type(3n+1){ 
    height:263px; 
    background:#111; 
}
.goods:nth-of-type(3n+2){ 
    height:283px; 
    background:#222; 
}

b)没有实现异步加载/分部分加载。
c)懒加载没实现。

    //懒加载
    var clientHeight=getWindow().height;
    //选取所有包含属性data-src的img元素，然后在滚动的时候判断是否在可视区域
    var imgArray=toArray(document.querySelectorAll("[data-src]"));

    function lazyLoad(){
        var loadedIndex=[];//=new Array()

        var scrollTop=document.body.scrollTop||document.documentElement.scrollTop;
        for(let i=0;i

3）商品细节页放大镜没实现：只能在一个图片上实现放大镜功能。

(function(window){
        function $(id){
            return document.getElementById(id);
        };
        // 获取对象
        var demo = $("demo"),
        smilBox = $("smil_box"),
        mask = $("mask"),
        bigBox = $("big_box"),
        bigImg = document.getElementsByClassName('big_img');
        
        // smilBox的hover事件
        smilBox.onmouseover = function(){
            mask.style.display = "block";
            bigBox.style.display = "block";
        };
        smilBox.onmouseout = function(){
            mask.style.display = "none";
            bigBox.style.display = "none";
        };
        // 鼠标移动事件
        smilBox.onmousemove = function(event){
            var event = event || window.event;
            // 获取鼠标在页面上的坐标
            var pageX = event.pageX || event.clientX + document.documentElement.scrollLeft;
            var pageY = event.pageY || event.clientY + document.documentElement.scrollTop;
            // mask的位置坐标
            var boxX = pageX - demo.offsetLeft;
            var boxY = pageY - demo.offsetTop;
            var maskX = boxX - mask.offsetWidth / 2;
            var maskY = boxY - mask.offsetHeight / 2;
            // 限制mask的移动范围
            if( maskX < 0 ){
                maskX = 0;
            };
            if( maskX > smilBox.offsetWidth - mask.offsetWidth){
                maskX = smilBox.offsetWidth - mask.offsetWidth;
            };
            if( maskY < 0 ){
                maskY = 0;
            };
            if( maskY > smilBox.offsetHeight - mask.offsetHeight){
                maskY = smilBox.offsetHeight - mask.offsetHeight;
            };
            // 黄色遮罩层的位置坐标
            mask.style.top = maskY + "px";
            mask.style.left = maskX + "px";
            
            for(var i=1;i

4）购物车结算页:
a）购物车内无商品时无法实现“购物车空空如也的样式”。
b)购物车结算的总额的有效位无法控制。
如下图：

    //计算总额
    for(i=0;i

c)全选后全部取消单个商品多选框里的勾选后，全选里的勾选无法自动消失，即x.checked无法控制。

//计算数量
    for (var j = 0; j < takeIt.length; j++) {
        takeIt[j].index = j;
        takeIt[j].onclick = function count(){
            var sum = 0;
            var a = 0;  //用a来判断所有商品是否全部选上/取消
            console.log(sum);
            for (var i = 0; i < takeIt.length; i++) {
                takeIt[i].index=i;
                if(takeIt[i].checked==true){
                    sum++;
                    a = 0;
                }
                else{
                    a = 1;
                }
            } 
            if(a == 0){
                barTakeAll.checked=false;
                cartTakeAll.checked=false;
            }  
            else{
                barTakeAll.checked=true;
                cartTakeAll.checked=true;
            }      
            itemCount.value = sum;
        }
    }

5）商品发布页上传图片无法展示

3.收获
1）轮播图
轮播图
2）瀑布流
瀑布流
3）购物车
购物车
4）多组星级评价
星级评价
5）多沟通！！多讨论！！！！