es6-class

2018-06-24 01:30:30来源：未知阅读 ()

es5中有構造函數可以很好的繼承複用模塊，es6中更加簡潔，如下：

"use strict";
class Video {
    constructor(signStatus){
        this.signStatus = signStatus
        this.boxDom = document.getElementById("boxDom")
        this.init()
    }
    init(){
        this._getAnchorInfo()
    }
    _getAnchorInfo(){
        api.getInfo("/anchor/info").then(res =>{
            // success
            if(res.ret_code=="0"){
                let data = res.data
                this._renderHtml(data)
            // failed
            }else{
                this._errorTips()
            }
        }).catch(error =>{
            console.log(error)
        })
    }
    _renderHtml(data){
        if(this.signStatus){
            // 如果存在
        }else{
            this.boxDom.innerHTML="</p>"+data+"</p>"
        }
    }
    _errorTips(){
        this.boxDom.innerHTML="数据为空了~"
    }
}

var ReplayVideos = new Video()
window.ReplayVideos = ReplayVideos

// other status
// var ReplayVideos = new Video(true)

上面等同於：

"use strict";
function Video(status){
    this.init(status)
}
Video.prototype = {
    init:function(status){
        this.status = status;
        this.boxDom = document.getElementById("boxDom");
        this.getAnchorInfo();
    },
    getAnchorInfo:function(){
        let _this = this;
        api.getInfo("/anchor/info").then(function(res){
            // success
            if(res.ret_code=="0"){
                let data = res.data
                _this._renderHtml(data)
            // failed
            }else{
                _this._errorTips()
            }
        }).catch(function(error){
            console.log(error)
        })
    },
    renderHtml:function(data){
        if(this.status){
            // 如果存在
        }else{
            this.boxDom.innerHTML="</p>"+data+"</p>"
        }
    },
    errorTips:function(){
        this.boxDom.innerHTML="数据为空了~"
    }
}

var ReplayVideos = new Video()
window.ReplayVideos = ReplayVideos

// other status
// var ReplayVideos = new Video(true)