JS-面向物件 使用ES5實作繼承

JS-面向物件

1.建構式的繼承

 java面向物件的三大特性，封裝，繼承，多型，
 ES6以前是沒有語法實作繼承的，但我們可以通過代碼做到繼承的效果
 ES6后可以使用class類   

 var Ball = function(type,style,parent){
            this.speed = 10;
            this.t = null;
            console.log(this)
            this.elem = this.createDom(type,style,parent)
            this.bool = false;
            this.elem.addEventListener("click",this.move.bind(this));
            return this.elem
        }
        Ball.prototype.createDom = function(type,style,parent){
            var ele = document.createElement(type)
            //將后面的物件屬性合并到第一個位置的屬性 實作樣式添加
            Object.assign(ele.style , style)
            if(typeof parent === "string") parent = document.querySelector(parent);
            parent.appendChild(ele)
            return ele
        }
        Ball.prototype.move = function(){
           //點擊切換狀態
            this.bool = !this.bool ;
            if(!this.bool) {
                clearInterval(this.t);
                return
            }
            this.t =setInterval(function(){
                this.speed+=4;
                this.elem.style.left=this.speed+"px";
            }.bind(this),16)
            
        }

上面的代碼是一個面向物件的小球，接下來實體化它

        var obj = {
            width :" 100px",
            height:"100px" ,
            background:"aqua",
            borderRadius:"50px",
            position:"absolute"
        }
        var ele = new Ball("div",obj,"body")

接下來我們定義一個建構式用來繼承它；

       var obj1 = {
            width :" 100px",
            height:"100px" ,
            background:"aqua",
            borderRadius:"50px",
            position:"absolute",
            top:"200px"
        }
        var sonBall =function(type,style,parent){
            Ball.call(this,type,style,parent)
        }
        function fn(){};//中間函式  用來保存propertype
        fn.prototype =Ball.prototype;
        sonBall.prototype = new fn()
        //建構式會被覆寫 需要重新設定
        sonBall.prototype.constructor = sonBall;
        new sonBall("div",obj1,"body")

效果如下

02 設計模式-觀察者模式

如此我們便實作了繼承，在這個代碼中，我們還可以繼續優化，當我們實體化物件的時候，每個物件都創建了一個定時器，當數量多的時候 ，性能消耗是比較嚴重的，我們可以使用觀察者模式來托管這些物件 用一個定時器來管理所有的元素，
首先 創建一個類 用來管理元素

function Message(){
    this.list = new Set();
    this.ids = 0;
}

Message.prototype.add=function (elem){
    this.list.add(elem);
    if(this.list.size===0 || this.ids)return;
    this.ids=setInterval(()=>this.animation(),16);
}

Message.prototype.remove = function(elem){
    if(!this.list.has(elem))return;
    this.list.delete(elem);
    if(this.list.size>0)return;
    clearInterval(this.ids);
    this.ids=0;
}

Message.prototype.animation=function(){
    this.list.forEach(value=>{
       if(value.change) value.change();
    })
}

其次 將小球代碼稍作修改

 var message = new Message();
        var Ball = function(type,style,parent){
            this.speed = 10;
            this.t = null;
            this.x = 0;
            console.log(this)
            this.elem = this.createDom(type,style,parent)
            this.bool = false;
            this.elem.addEventListener("click",this.move.bind(this));
            return this.elem
        }
        Ball.prototype.createDom = function(type,style,parent){
            var ele = document.createElement(type)
            Object.assign(ele.style , style)
            if(typeof parent === "string") parent = document.querySelector(parent);
            parent.appendChild(ele)
            return ele
        }
        //修改處
        Ball.prototype.move = function(){
            this.bool = !this.bool ;
            if(this.bool) {
                message.add(this)
            }else{
                message.remove(this)
            }
        }
        //修改處
        Ball.prototype.change =function(){
            if(!this.bool)return;
            this.x++;
            this.elem.style.left=this.x+"px";
        }
        var obj = {
            width :" 100px",
            height:"100px" ,
            background:"aqua",
            borderRadius:"50px",
            position:"absolute"
        }

        var obj1 = {
            width :" 100px",
            height:"100px" ,
            background:"aqua",
            borderRadius:"50px",
            position:"absolute",
            top:"200px"
        }
        var ele = new Ball("div",obj,"body")
        var sonBall =function(type,style,parent){
            Ball.call(this,type,style,parent)
        }
        function fn(){};
        fn.prototype =Ball.prototype;
        sonBall.prototype = new fn()
        sonBall.prototype.constructor = sonBall;
        new sonBall("div",obj1,"body")