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受限於是否使用箭頭函數!
更多专业前端知识,请上 【猿2048】www.mk2048.com