项目总结

1：你学会了什么

• 学会了对本地存储localStroage的应用,设置本地存储localStorage.setItem("id","1");得到存储值用localStorage.getItem("id"),删除本地存储值用localStroage.removeItem("id");
• 返回顶部可以用window.scrollTo Api,对里面传值(横轴坐标,纵轴坐标)就可以实现返回顶部的效果,还可以传入一个对象,用于控制返回的速度
• 返回上一个页面history.go(-1);
• 对变量污染的解决办法

2：你的进步有哪些

通过这次项目的完成,加深了对本地存储localStroage的应用.新认识了scrollTo这个api,在多次应用ajax发请求后,对ajax理解的更加透彻了.还有对登录注册的正则判断reg.test(str).还有就是对offsetTop与ScroolTop,scrollHeight的应用更比以前熟练了.加深了变量污染的知识点,可以用闭包解决,可以用let解决.

3：你哪里不会

对组件的封装代码理解不太够,底层原型逻辑理解有些迷糊.

4：总结项目中有那些业务，你是符合实现的

• 在这次项目的完成后,我印象最深的就是对页面间的传值的应用,也就是本地存储.localStorage.setItem与localStorage.getItem分别将值存入本地.在另一个页面取到存储的值并应用;与其一起的还有history.go(-1),小括号里面传入的值为-1就是向历史上一个页面返回,传入的是1的话就是向前进一个页面,以前只是知道,并没有将这两个功能应用,现在做完这个项目就将他熟练的应用了,算是一个小的进步.(代码如下)
• 图片的懒加载

   //  懒加载
            var imgs = document.querySelectorAll(".img img");
            imgs = Array.from(imgs);
            window.onscroll = function (e) {
                setTimeout(function () {
                    LazyLoading(imgs)
                }, 2000)
            }
            LazyLoading(imgs);
            function LazyLoading(imgs) {
                for (var i = 0; i < imgs.length; i++) {
                    var height = imgs[i].offsetTop;
                    var wheight = window.innerHeight;
                    var sheight = document.documentElement.scrollTop;
                    if (height <= wheight + sheight) {
                        imgs[i].src = imgs[i].getAttribute('date-src');
                    }
                }
            };

• 在ajax发起的请求后,利用for循环将数据渲染在界面时会发生变量污染的情况,可以在声明变量时用let声明.或者利用闭包也可以解决变量污染的问题.
• 然后就是对正则的应用,匹配数字,字母/^[a-zA-Z0-9]{6,13}/ 或者数字字母下划线/^[\w]{6,13}$/等条件.{最少,最多}这个代表的是量词,有两个参数条件(最少与最多), 可以用reg.test(要匹配的字符串)来判断是否符合条件.符合条件则返回true.
• 项目中有一个小功能即楼层滚动,实现的主要原理就是用元素.offsetTop,实现这个分为两个步骤:
  • 1.判断内容区当前元素距离上方的距离,如果当前元素.offsetTop<被卷去的高度时,就让其侧边栏加特效.
  • 2.当点击侧边栏中的某一个,将其索引值拿到,让documentElement.scrollTop的值等于内容区元素.offsetTop值就可以实现楼层滚动的效果了.(代码如下)

   //楼层滚动
            floorMoble();
            function floorMoble() {
                var h3s = document.querySelectorAll("h3");
                var catalogueUlLis = document.querySelectorAll(".catalogue ul li");
                window.addEventListener("scroll", function (e) {
                    for (let i = 0; i < h3s.length; i++) {
                        var top = document.documentElement.scrollTop;
                        if (h3s[i].offsetTop <= top + 200) {
                            for (let j = 0; j < catalogueUlLis.length; j++) {
                                catalogueUlLis[j].classList.remove("floorColor");
                            }
                            catalogueUlLis[i].classList.add("floorColor")
                        }
                    };

                });
                //侧边跳转
                catalogueUlLis.forEach(function (item, index) {
                    item.onclick = function () {
                        for (let i = 0; i < catalogueUlLis.length; i++) {
                            catalogueUlLis[i].classList.remove("floorColor")
                        }
                        catalogueUlLis[index].classList.add("floorColor");
                        document.documentElement.scrollTop = h3s[index].offsetTop - 200;
                    }
                })
            }

• 相对于楼层滚动效果,触底请求数据也是类似的效果,我的实现原理是:先获取整个页面元素的正文高度,在获取屏幕滚动被卷去的高度,判断如果整个页面元素的正文高度-屏幕滚动被卷去的高度<=当前网页可见区域高度时,表明元素已触底了,则可以发起一次请求.这就完成了触底请求.(代码如下)
• element.scrollHeight - element.scrollTop <= element.clientHeight

  var htmlScrolHeight = document.documentElement.scrollHeight;
            var heightCount = htmlScrolHeight - top;
            var showClient = document.documentElement.clientHeight;
            // console.log("html元素的总体高度:"+htmlScrolHeight,"被卷去的高度:"+top,"相减的高度:"+heightCount,"页面可见高度"+showClient)
            if (heightCount <= showClient) {
                page++; //再次发起请求
                // console.log(page)
                getShop(page);//调用请求
            }

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

返回顶部功能:有一个api,window.scrollTo();可以快捷实现返回顶部.里面传入两个值(x横轴坐标,y纵轴坐标)或者传入对象(代码如下)

  backTop.onclick = function () {
            // timerTop = setInterval(function () {
            //     var osTop = document.documentElement.scrollTop || document.body.scrollTop;
            //     var speed = Math.floor(-osTop / 5);
            //     document.documentElement.scrollTop = document.body.scrollTop = osTop + speed;
            //     if (osTop == 0) {
            //         clearInterval(timerTop);
            //     };
            //     isTop = true;
            // }, 30);
            window.scrollTo({
                top:0,
                behavior:"smooth",
            })
        }

{top:0,behavior:"smooth",};smooth是平滑的意思,返回顶部平滑效果.这是一个亮点,只用两三行代码就可以实现了平滑返回顶部的效果.