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

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<imgArray.length;i++){
            let img=imgArray[i];
            if(img.offsetTop-scrollTop<clientHeight){
                img.src=img.getAttribute("data-src");
                // console.log("img "+img.src.substring(img.src.lastIndexOf("/")+1)+"display.");
                loadedIndex.unshift(i);//数组的开头添加元素||因为删除的时候先要删除后面的，再删除前面的，否则Array删除了前面的，后面的就会自动覆盖到前面来。
            }
        }
        for(let i=0;i<loadedIndex.length;i++){
            imgArray.splice(loadedIndex[i],1);
        }
    }

    //跨浏览器获取可视窗口大小
    function  getWindow (){
        if(typeof window.innerWidth !='undefined') {
            return{
                width : window.innerWidth,
                height : window.innerHeight
            }

        } else{
            return {
                width : document.documentElement.clientWidth,
                height : document.documentElement.clientHeight
            }
        }
    }

    function toArray(arrLike){
        if(typeof Array.from !="function"){
            var result=[];
            for(let i=0;i<arrLike.length;i++){
                result.push(arrLike[i]);
            }
            return result;
        }else{
            return Array.from(arrLike);
        }
    } 
    window.οnscrοll=lazyLoad;
    lazyLoad();

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<bigImg.length;i++){
                bigImg[i].index = i;
                
            
            // 大图片移动的比例
            var prop = ( bigImg[i].offsetWidth - bigBox.offsetWidth ) / (smilBox.offsetWidth - mask.offsetWidth);
            // 大图片的坐标
            var bigImgX = prop * maskX;
            var bigImgY = prop * maskY;
            bigImg[i].style.top = -bigImgY + "px";
            bigImg[i].style.left = -bigImgX + "px";
            }
        }
    })(window)

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

    //计算总额
    for(i=0;i<takeIt.length;i++){
        takeIt[i].index = i;
        takeIt[i].onclick = function(){
            if(takeIt[this.index].checked == true){
                total1.innerHTML=(parseFloat(aPriceSum[this.index].innerHTML)+parseFloat(total1.innerHTML))*100/100;
                total2.innerHTML = total1.innerHTML;
            }
            else{
                total1.innerHTML=(parseFloat(total1.innerHTML)-parseFloat(aPriceSum[this.index].innerHTML))*100/100;
                total2.innerHTML = total1.innerHTML;
            }        
            itemCount.value = sum;
        }
    }

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）多沟通！！多讨论！！！！