删除属性

为什么把那些this.critical_point等属性给删了？

慕芸芸 2023-05-29

源自：“仿穷游”商城webapp 3-13 代码优化

收起

1回答

好帮手慕久久 2023-05-29 10:20:01

同学你好，这里做了代码优化，把重复的代码做了抽离，从而复用重复代码。如果一个项目中，重复的代码特别多，那么这个项目就不是一个优秀的项目。咱们的项目，没优化之前，Backtop和Header这两个类，重复代码太多了，二者功能有相同的部分：

为了去除重复冗余的代码，可以将重复代码、功能抽离出来，比如我们将重复的代码抽离到了util中：

然后在Backtop和Header这两个类中，引入公共部分就行了：

就好比我们把各个页面公共的css代码提取到一个css文件中，然后在不同的页面中，直接使用link标签引入该css文件就可以使用公共样式了，不用再重复书写这部分css代码了。

祝学习愉快！

收起回答

提问者慕芸芸 #1

为什么在 backtop 中不用删，在 header 中就删了？

2023-05-29 10:33:52
好帮手慕久久回复提问者慕芸芸 #2

backtop中也可以删，估计是讲师遗漏了。比如：

2023-05-29 10:42:55

提问者慕芸芸回复好帮手慕久久 #3

this.scrollContainer不能删吧，this.scrollTo();有用到this.scrollContainer

import './backtop.css';
import 'icons/iconfont.css';
import Scroll from 'utils/scroll';
const CHANGE_CLASS_NAME='backtop-hidden';


class Backtop{
    constructor(el,critical_point,scrollContainer,eventEl=scrollContainer){
        this.el=el;
        // 滚动条所在的容器
        this.scrollContainer=scrollContainer;
       
        new Scroll({
            critical_point,
            change:()=>{
                this.show();
            },
            reset:()=>{
                this.hide();
            }
        },scrollContainer,eventEl);
        this.bindEvent();
    }
   
    bindEvent(){
        this.el.addEventListener('click',()=>{
            this.scrollTo();
        },false)
    }
    scrollTo(top=0,left=0){
        this.scrollContainer.scrollTo({
            top,
            left,
            behavior:'smooth'
        })
    }
    // 显示
    show(){
        this.el.classList.remove(CHANGE_CLASS_NAME);
    }
    // 隐藏
    hide(){
        this.el.classList.add(CHANGE_CLASS_NAME);
    }
}
export default Backtop;

2023-05-29 10:55:52

点开查看后面3条评论