es6-class

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

新老客户大回馈,云服务器低至5折

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)

注意class中的this受限於是否使用箭頭函數!

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:【JavaScript】面向对象的程序设计

下一篇:【JavaScript】函数表达式