项目总结1

2024-01-24 16:21:58

1、你学会了什么？

  • 从看到项目的第一眼，开始分析这个项目具体的功能模块有哪些，需要使用什么样的方式才能更加方便，同时，项目中的各个html文件、css样式文件、js文件应该怎样去整理才能更加的规范整洁，并且能快速找到相应的文件。

  • 在项目的进行期间对class类名、id名进行系统性分析进行规范命名，对Ajax的数据请求，根据项目的数据首先使用css样式进行处理，使用函数封装的js来完成项目的效果，通过

    （ console.log(`\n%c ${msg} ↓ `,'background:#67c23a;color:#fff;padding:1px;border-radius:3px');）

    可以自定义打印到控制台，使打印效果更加一目了然

  • 注册、登录模块，通过正则表达式 /1{6,12}$/;验证密码或者账号是否符合条件，在注册模块全部符合条件时跳转到登录页面需要通过本地存储

    （localStorage.setItem（））

    进行记录，再通过

    localStorage.getItem（）

    进行取值来渲染页面。

  • 在遍历数据时遇到了较多的数据，在Ajax请求数据时会出现较慢或卡顿的现象，在这种情况下使用懒加载加触底加载

    （就是当屏幕的可视区高度(clientHeight)+鼠标的偏移量高度(scrollTop)<=（scrollHeight））

    从而来进行数据的请求和渲染，

  • 传送到git仓库，方便以后的观看

  • 变量污染问题，下面这段代码则是变量污染

for (var i = 0; i < h1s.length; i++) {

​      h1s[i].onclick = function (params) {

​        console.log(i);

​        console. log(h1s[i]);

​        h1s[i].style.color = 'red' 

​      }

​    }

可以通过改变变量的声明方式：

for (let i = 0; i < h1s.length; i++) {

​      h1s[i].onclick = function (params) {

​        console.log(i);

​        console. log(h1s[i]);

​        h1s[i].style.color = 'red' 

​      }

​    }

这样就可以解决变量污染问题。

2、你的进步有哪些？

  • 项目功能的总体分析
  • html、css、js、文件命名的易懂
  • 通过小组交流可以完善bug
  • 熟练了Ajax请求、函数封装引用
  • 变量污染的解决
  • 传送文件到git

3、你哪里不会？

  • 组件、组件、组件！面对老师写的组件发现自己有一种无力感，而我只会简单的封装函数来实现一个业务来调用，完成项目的单个效果。
  • 在分类页面渲染数据的二级标题遇到bug，通过请教解决了困扰一晚上的难题

4、总结项目中有哪些业务，你是如何实现的？

  • 返回顶部：通过鼠标偏移高度来监听实现返回顶部的按钮，再通过点击事件和计时器来实现在规定的时间内返回顶部的规定高度，在鼠标便宜高度返回到0时清除计时器。从而实现返回顶部的平滑效果，而不是直接闪现到顶部

  •  //返回顶部

  var totop = document.querySelector('.return');

  // 显示按钮

  window.addEventListener("scroll", function () {

​    var top = document.documentElement.scrollTop || document.body.scrollTop;

​    var ketop = document.documentElement.clientHeight;



​    if (top >= ketop) {

​      totop.style.display = "block";

​    } else {

​      totop.style.display = "none";

​    }

  })

  //  点击返回

  totop.onclick = function () {
​    var scrollTop = window.pageYOffset;

​    var timer = setInterval(() => {

​      scrollTop -= 100;

​      window.scrollTo(0, scrollTop);

​      if (scrollTop <= 0) {

​        clearInterval(timer)

​      }

​    }, 25)

  }

  • 登录、注册，通过正则表达式 /2{6,12}$/;验证密码或者账号是否符合条件，在注册模块全部符合条件时跳转到登录页面需要通过本地存储

    （localStorage.setItem（））进行存值

    localStorage.getItem（）进行取值

  • 放大镜：首先显示的是小图，当鼠标移入小图时让最小图和大图显示，移出则隐藏，再让鼠标位于最盒的*，让鼠标移动的同时让最小盒跟着移动，并让最小盒子不溢出，获取大盒子和大图片，让大图片跟着放大移动。

    <body>

    <div class="box">
        <div class="box1">
            <img src="./images/xiao.jpg" alt="">
            <div class="box3"></div>
        </div>
    </div>
    <div class="box2">
        <img src="./images/da.jpg" alt="" class="tumax">
    </div>
</body>

<script>

    var box1 = document.querySelector('.box1');
    var box2 = document.querySelector('.box2');
    var box3 = document.querySelector('.box3');
    // 当鼠标经过显示，离开隐藏
    box1.addEventListener('mouseover', function () {
        box2.style.display = 'block';
        box3.style.display = 'block';
    })
    box1.addEventListener('mouseout', function () {
        box2.style.display = 'none';
        box3.style.display = 'none';
    })
    // 获取鼠标坐标
    box1.addEventListener('mousemove', function (e) {
        var x = e.pageX - this.offsetLeft;
        var y = e.pageY - this.offsetTop;
        // console.log(x,y);
        // box3盒子跟着鼠标动，-50是让鼠标位于盒子*。
        var box3x = x - 50;
        var box3y = y - 50;
        // 添加判断条件让box3盒子不溢出
        if (box3x <= 0) {
            box3x = 0;
        } else if (box3x >= 200) {
            box3x = 200;
        }
        if (box3y <= 0) {
            box3y = 0;
        } else if (box3y >= 200) {
            box3y = 200;
        }
        box3.style.left = box3x + 'px';
        box3.style.top = box3y + 'px';
        // 大图片跟着放大移动
        var tumax = document.querySelector('.tumax');
        var tuMaxyd = tumax.offsetWidth - 100;
        var bigx = box3x * tuMaxyd / 300;
        var bigy = box3y * tuMaxyd / 300;
        tumax.style.left = -bigx + 'px';
        tumax.style.top = -bigy + 'px';
    })

  • 购物车增删减商品：通过获取要点击的按钮加上点击事件，获取接口返回值，当code值返回1时进行数据处理，返回其他则弹出操作失败

     var span3 = document.querySelectorAll('.span3');
            for (let i = 0; i < span3.length; i++) {
                span3[i].addEventListener('click', function () {
                    var id = span3[i].getAttribute('data-id')
                    REQUEST.get("/del", {
                        params: {
                            token: token,
                            goodId: id
                        }

                    }, function (data) {
                        console.log(data)
                        if (data.code == 1) {
                            span3[i].parentNode.style.display = 'none'
                        } else {
                            alert('删除失败')
                        }
                    })
                })
            }
            
            
            
            
            //数量增加
    function jia() {
        var btu = document.querySelectorAll('.button1');
        var shu = document.querySelectorAll('.shuliang');
        var span2 = document.querySelectorAll('.danjia');
        var jine = document.querySelectorAll('.span2');
        var zongjia = document.querySelector('.zong>p>span')
        for (let i = 0; i < btu.length; i++) {
            btu[i].addEventListener('click', function () {
                var token = window.localStorage.getItem('token')
                var goodId = window.localStorage.getItem('goodId')
                var username = window.localStorage.getItem('username');
                REQUEST.get("/add", {
                    params: {
                        token: token,
                        username: username,
                        goodId: goodId
                    }
                }, function (data) {
                    // console.log(data)
                    if (data.code == 1) {
                        shu[i].innerHTML++
                        jine[i].innerHTML = shu[i].innerHTML * span2[i].innerHTML
                        zongjia.innerHTML

                    } else {
                        alerta('添加失败')
                    }
                })
            })
        }

    }





function jian() {
        var btu1 = document.querySelectorAll('.button2');
        var shu = document.querySelectorAll('.shuliang');
        var span2 = document.querySelectorAll('.danjia');
        var jine = document.querySelectorAll('.span2');
        for (let i = 0; i < btu1.length; i++) {
            btu1[i].addEventListener('click', function () {
                var token = window.localStorage.getItem('token')
                var goodId = window.localStorage.getItem('goodId')
                var username = window.localStorage.getItem('username');
                REQUEST.get("/remove", {
                    params: {
                        token: token,
                        username: username,
                        goodId: goodId
                    }
                }, function (data) {
                    // console.log(data)
                    if (data.code == 1) {
                        shu[i].innerHTML--;
                        if (shu[i].innerHTML <= 1) {
                            shu[i].innerHTML = 1
                        }
                        jine[i].innerHTML = shu[i].innerHTML * span2[i].innerHTML

                    } else {
                        alerta('减少失败')
                    }
                })
            })
        }
    }

5、总结你写的项目中有哪些技术亮点并详细说明

  • 返回顶部：虽然和别人的代码量相比较多，但我感觉效果还不错，因为返回顶部的过程中可以自己定义速度的快慢从而实现返回顶部的平滑效果和视觉的满足，而不是直接闪现到顶部。

    //返回顶部

  var totop = document.querySelector('.return');

  // 显示按钮

  window.addEventListener("scroll", function () {

​    var top = document.documentElement.scrollTop || document.body.scrollTop;

​    var ketop = document.documentElement.clientHeight;



​    if (top >= ketop) {

​      totop.style.display = "block";

​    } else {

​      totop.style.display = "none";

​    }

  })

  //  点击返回

  totop.onclick = function () {
​    var scrollTop = window.pageYOffset;

​    var timer = setInterval(() => {

​      scrollTop -= 100;

​      window.scrollTo(0, scrollTop);

​      if (scrollTop <= 0) {

​        clearInterval(timer)

​      }

​    }, 25)

  }

  • 无缝轮播图：无缝轮播图是一个比较麻烦的业务，我的思路是创建一个div，然后在div这个盒子里创建一个宽度大于这个盒子n倍的ul，ul下的每个li标签的宽度等于div，图片的宽度也等于li标签，通过定时器或点击事件让li标签每次移动一个宽度。实现的效果达到了无缝轮播的效果。

    // 轮播图
 window.addEventListener('load', function () {
        var arrow_l = document.querySelector('.arrow-l');
        var arrow_r = document.querySelector('.arrow-r');
        var focus = document.querySelector('.lun');
        var focusWidth = focus.offsetWidth;
        focus.addEventListener('mouseenter', function () {
            arrow_l.style.display = 'block';
            arrow_r.style.display = 'block';
            clearInterval(timer);
            timer = null;
        });
        focus.addEventListener('mouseleave', function () {
            arrow_l.style.display = 'none';
            arrow_r.style.display = 'none';
            timer = setInterval(function () {
                arrow_r.click();
            }, 3000);
        });

        var ul = focus.querySelector('.lun ul');
        var ol = focus.querySelector('.lun .circle');

        for (var i = 0; i < ul.children.length; i++) {
            var li = document.createElement('li');
            li.setAttribute('index', i);
            ol.appendChild(li);
            li.addEventListener('click', function () {
                for (var i = 0; i < ol.children.length; i++) {
                    ol.children[i].className = '';
                }
                this.className = 'current';
                var index = this.getAttribute('index');
                num = index;
                circle = index;
                console.log(focusWidth);
                console.log(index);

                animate(ul, -index * focusWidth);
            })
        }
        ol.children[0].className = 'current';
        var first = ul.children[0].cloneNode(true);
        ul.appendChild(first);
        var num = 0;
        var circle = 0;
        var flag = true;
        arrow_r.addEventListener('click', function () {
            if (flag) {
                flag = false;
                if (num == ul.children.length - 1) {
                    ul.style.left = 0;
                    num = 0;
                }
                num++;
                animate(ul, -num * focusWidth, function () {
                    flag = true;
                });
                circle++;
                if (circle == ol.children.length) {
                    circle = 0;
                }
                circleChange();
            }
        });
        arrow_l.addEventListener('click', function () {
            if (flag) {
                flag = false;
                if (num == 0) {
                    num = ul.children.length - 1;
                    ul.style.left = -num * focusWidth + 'px';
                }
                num--;
                animate(ul, -num * focusWidth, function () {
                    flag = true;
                });
                circle--;
                circle = circle < 0 ? ol.children.length - 1 : circle;
                circleChange();
            }
        });
        function circleChange() {
            for (var i = 0; i < ol.children.length; i++) {
                ol.children[i].className = '';
            }
            ol.children[circle].className = 'current';
        }
        var timer = setInterval(function () {
            arrow_r.click();
        }, 3000);
    })

  1. a-zA-Z0-9_ ↩︎

  2. a-zA-Z0-9_ ↩︎

上一篇：10122. Sparse Matrix Multiplication


下一篇：css选择器总结