关于Harmony的学习

day27

一、原型链

// 调子：Function是引用数据类型，引用数据类型其实就是对象类型。既然是对象，对象必定是被实例化出来的，跟构造函数有关系 ​ // 研究：构造函数也是对象，那么构造函数是由谁实例化出来的呢。既然是对象那么必定也满足三角恋的关系，通过三角恋关系来验证 ​ // 规则：“所有函数”都是通过Function构造函数创建出来的对象 ​ // 规则：原型对象也是对象，都是有Object的原型对象实例出来的

原型链： ​ + 其实原型链描述的是对象与原型对象之间的关系 ​ + 查找规则 ​ => 一个对象如果要使用某个属性或者方法，会先去构造函数内部查找 ​ => 如果没有，那么就去自身的原型对象上面查找，找到就使用，还是没有，那么就会去对象的原型对象上查找

二、OOA和OOD

1.OOA面向对象分析 ​ + 难点：循环里面有事件处理函数，事件处理函数里面拿不到i的值，自定义属性。ES6里面的块级作用域也可以解决 ​ + 面向对象里面需要把获取的元素当成实例化对象的属性，因为构造函数内部要使用this ​ + 面向对象的方法可以放在原型对象里面，这样所有的实例化对象都可以共享，节省空间

2.OOD面向对象设计 ​ + 高内聚、低耦合 ​ + init初始化方法 ​ + bindEvent绑定事件

三、选项卡

    function Tab(btn, content){
        // 获取元素，把元素当做对象的属性来使用了，这样做那么所有的实例化对象都可以使用
        this.aBtn = $(btn, true)
        this.aLi = $(content, true)
        // 调用初始化方法
        this.init()
    }
    // init方法是专门用来管理其他的方法的
    Tab.prototype.init = function(){
        this.bindEvent()
    }
    // bindEvent绑定事件
    Tab.prototype.bindEvent = function(){
        // 问题：既要用到指向对象的this，也要使用指向span标记的this
        // this备份：可以在能找到正确this指向的地方使用一个变量存储this，在需要的地方上使用
        // let that = this
        let _this = this
        for(let i=0; i<this.aBtn.length; i++){
            this.aBtn[i].onclick = function(){
                _this.clearStyle()
                this.className = 'bg'
                _this.aLi[i].className = 'show'
            }
        }
    }
    // clearStyle专门用来清空样式
    Tab.prototype.clearStyle = function(){
        for(let j=0; j<this.aBtn.length; j++){
            this.aBtn[j].className = ''
            this.aLi[j].className = ''
        }
    }
    new Tab('.btn span', 'ul li')

面向对象：

    class Tab {
        constructor(btn, content){
            // 获取元素，把元素当做对象的属性来使用了，这样做那么所有的实例化对象都可以使用
            this.aBtn = $(btn, true)
            this.aLi = $(content, true)
            // 调用初始化方法
            this.init()
        }
        init(){
            this.bindEvent()
        }
        bindEvent(){
            // 问题：既要用到指向对象的this，也要使用指向span标记的this
            // this备份：可以在能找到正确this指向的地方使用一个变量存储this，在需要的地方上使用
            // let that = this
            let _this = this
            for(let i=0; i<this.aBtn.length; i++){
                this.aBtn[i].onclick = function(){
                    _this.clearStyle()
                    this.className = 'bg'
                    _this.aLi[i].className = 'show'
                }
            }
        }
        clearStyle(){
            for(let j=0; j<this.aBtn.length; j++){
                this.aBtn[j].className = ''
                this.aLi[j].className = ''
            }
        }
    }
    new Tab('.btn span', 'ul li')

四、放大镜

    let smallBox = $('.smallBox')
    let mask = $('span')
    let bigBox = $('.bigBox')
    let pic = $('.bigBox>img')
    
    // 当鼠标移入大到smallBox盒子里面的时候，让大盒子和遮罩层出现
    smallBox.onmouseover = function(){
        mask.style.display = 'block'
        bigBox.style.display = 'block'
    }
    smallBox.onmouseout = function(){
        mask.style.display = 'none'
        bigBox.style.display = 'none'
    }
​
    // 当鼠标移入到smallBox盒子里面的时候，让遮罩层跟随
    smallBox.onmousemove = function(e){
        let x = e.pageX - smallBox.parentNode.offsetLeft - mask.offsetWidth/2
        let y = e.pageY - smallBox.parentNode.offsetTop - mask.offsetHeight/2
        if(x<=0){
            x = 0
        }else if(x>=smallBox.offsetWidth - mask.offsetWidth){
            x = smallBox.offsetWidth - mask.offsetWidth
        }
        if(y<=0){
            y = 0
        }else if(y>=smallBox.offsetHeight - mask.offsetHeight){
            y = smallBox.offsetHeight - mask.offsetHeight
        }
        mask.style.left = x + 'px'
        mask.style.top = y + 'px'
​
        // 计算比例
        let w = x / (smallBox.offsetWidth - mask.offsetWidth)
        let h = y / (smallBox.offsetHeight - mask.offsetHeight)
        
        // 给图片进行赋值操作
        pic.style.left = -w * (pic.offsetWidth - bigBox.offsetWidth) + 'px'
        pic.style.top = -h * (pic.offsetHeight - bigBox.offsetHeight) + 'px'
    }

面向对象：

    class Zoom {
        constructor(){
            this.smallBox = $('.smallBox')
            this.mask = $('span')
            this.bigBox = $('.bigBox')
            this.pic = $('.bigBox>img')
            this.init()
        }
        init(){
            this.over()
            this.out()
            this.move()
        }
        over(){
            // 当鼠标移入大到smallBox盒子里面的时候，让大盒子和遮罩层出现
            this.smallBox.onmouseover = ()=>{
                this.mask.style.display = 'block'
                this.bigBox.style.display = 'block'
            }
        }
        out(){
            this.smallBox.onmouseout = ()=>{
                this.mask.style.display = 'none'
                this.bigBox.style.display = 'none'
            }
        }
        move(){
            // 当鼠标移入到smallBox盒子里面的时候，让遮罩层跟随
            this.smallBox.onmousemove = (e)=>{
                let x = e.pageX - this.smallBox.parentNode.offsetLeft - this.mask.offsetWidth/2
                let y = e.pageY - this.smallBox.parentNode.offsetTop - this.mask.offsetHeight/2
                if(x<=0){
                    x = 0
                }else if(x>=this.smallBox.offsetWidth - this.mask.offsetWidth){
                    x = this.smallBox.offsetWidth - this.mask.offsetWidth
                }
                if(y<=0){
                    y = 0
                }else if(y>=this.smallBox.offsetHeight - this.mask.offsetHeight){
                    y = this.smallBox.offsetHeight - this.mask.offsetHeight
                }
                this.mask.style.left = x + 'px'
                this.mask.style.top = y + 'px'
                // 计算比例
                let w = x / (this.smallBox.offsetWidth - this.mask.offsetWidth)
                let h = y / (this.smallBox.offsetHeight - this.mask.offsetHeight)
                
                // 给图片进行赋值操作
                this.pic.style.left = -w * (this.pic.offsetWidth - this.bigBox.offsetWidth) + 'px'
                this.pic.style.top = -h * (this.pic.offsetHeight - this.bigBox.offsetHeight) + 'px'
            }
        }
    }
    new Zoom()