面向对象的案列

面向对象案例

面向对象设计思路：

  面向对象的核心设计核心点：
  对象（可以用this来代表）
      对象是由一系列属性和方法的集合
      对象的属性在constructor中定义
      对象的方法在和constructor并列的位置

    class Banner {
        constructor(ele) {
              this.属性名1 = 属性值;
              this.属性名2 = 属性值;
        }
        方法名1(){}
        方法名2(){}
    }

注意点：
        1. 对象的属性和方法的访问需要通过this来访问
        2. 方法体内部的this默认都是实例对象
        3. new Banner()会自动触发和执行constructor函数
        4. 方法体中如果有事件，this的指向会变化，如果想在事件中使用实例对象this。
            要么将事件处理函数改为箭头函数
            要么将this在事件外部存储一下，然后在事件内部使用外部存储的那个变量

   放大镜做题思路： 

     1. 移入
             显示
     2. 移出 
             隐藏
     3. 移动时  
            遮罩移动（边界限制）
                 鼠标到哪儿，遮罩到哪儿
            大图跟着动（大图需要有绝对定位）
   
            
            
            
     细节注意点：
       1. 移入移出移动时需要移入移出移动到那个小盒子的区域，
          如果不这样做的话，移出时移动到大盒子上遮罩也不会消失
       2. 给遮罩设置left的时候，由于遮罩的left是相对于具有定位的父级元素来进行的，所以
          omask.style.left = 光标的位置 - box的左偏移量
       
       3. 遮罩的宽度设计是有讲究的：/*** mask的宽 / box的宽 = big的宽 / bImg的宽 ***/
       4. 图片可以运动的最大距离/遮罩运动的最大距离=图片移动的位置/遮罩的左偏移量
       
       

​

若有收获，就点个赞吧