有人知道這個怎么封裝嗎？我大概思路是創建一個函式，然后根據傳入引數不同做判斷，回傳不同結果，但寫的時候發現不知道怎么寫，很尷尬，不會封裝
uj5u.com熱心網友回復：
class Player {
constructor (nodeId, videoId) {
this.nodeId = nodeId
this.videoId = videoId
}
play () {
console.log('play...', this.nodeId, this.videoId)
}
pause () {
console.log('pause...', this.nodeId, this.videoId)
}
}
class TxPlayer extends Player {
constructor (options) {
super(options.containerId, options.vid)
}
play () {
super.play()
}
pause () {
super.pause()
}
}
class EgamePlayer extends Player {
constructor (options) {
super(options.domId, options.videoId)
}
start () {
super.play()
}
stop () {
super.pause()
}
}
uj5u.com熱心網友回復：
封裝的時候，針對不同入參，最好要有一個中間層，不要根據傳入引數不同做判斷如果做判斷的話，后續假如再讓你加一個 AQYPlayer，你還要追加引數判斷，這樣改業務代碼是不提倡的
uj5u.com熱心網友回復：
謝謝，晚上還在看js函式封裝的視頻，發現還是不會
uj5u.com熱心網友回復：
搞反了吧，樓主要求是要封裝成對外統一呼叫的。uj5u.com熱心網友回復：
我還沒試效果，還要敲一下看看
uj5u.com熱心網友回復：
確實看錯了，封裝成統一呼叫的要用策略模式去封裝了吧
uj5u.com熱心網友回復：
抽象出播放器介面，包含播放與停止兩個函式。封裝兩個播放器，暴露兩個方法，方法內部呼叫各自的實作。
uj5u.com熱心網友回復：
+1。這是最常規，也是最好維護，擴展的實作方式
介面申明:
/**
* @description `播放器介面`：有需要擴展的方法時繼續申明，并在對應的播放器類中實作即可
*/
interface IPlayer {
/**
* @description `播放`
*/
play (): void
/**
* @description `暫停`
*/
pause (): void
}
實際使用時，下面兩個類是不需要寫的，就是簡單的申明了一下要呼叫的兩個播放器(TxPlayer,EgamePlayer)；我本地沒有這倆貨，為了后面代碼不報錯
class TxPlayer {
constructor (options: Record<string, any>) {
}
play () {}
pause () {}
}
class EgamePlayer {
constructor (options: Record<string, any>) {
}
start () {}
stop () {}
}
uj5u.com熱心網友回復：
TxPlayer播放器和EgamePlayer播放器
/**
* @description `TxPlayer播放器`
*/
class ITxPlayer implements IPlayer {
/** `TxPlayer的實體化物件` */
private player;
/**
* 構造器
* @param {Record<string, any>} options 配置
*/
constructor (options: Record<string, any>) {
this.player = new TxPlayer(options)
}
play (): void {
this.player.play()
console.log('TXPlayer play')
}
pause (): void {
this.player.pause()
console.log('TXPlayer pause')
}
}
/**
* @description `EgamePlayer播放器`
*/
class IEgamePlayer implements IPlayer {
/** `EgamePlayer的實體化物件` */
private player;
/**
* 構造器
* @param {Record<string, any>} options 配置
*/
constructor (options: Record<string, any>) {
this.player = new EgamePlayer(options)
}
play (): void {
this.player.start()
console.log('EgamePlayer play')
}
pause (): void {
this.player.stop()
console.log('EgamePlayer pause')
}
}
對外統一的播放器類Player
/**
* @description `統一的播放器類Player`
*/
class Player implements IPlayer {
/** `對應播放器實體化物件` */
private player: IPlayer;
/**
* 構造器
* @param {number} mode 型別
* @param {Record<string, any>} options 配置
*/
constructor (mode: number, options: Record<string, any>) {
// 這里只是簡單的用mode引數來代表“不同的視頻型別”
this.getInstance(mode, options)
}
/**
* @description `根據型別獲取播放器實體`
* @param {number} mode 型別
* @param {Record<string, any>} options 配置
*/
private getInstance (mode: number, options: Record<string, any>) {
switch (mode) {
case 1:
this.player = new ITxPlayer(options)
break
case 2:
this.player = new IEgamePlayer(options)
break
default:
this.player = new ITxPlayer(options)
break
}
}
play (): void {
this.player.play()
}
pause (): void {
this.player.pause()
}
}
export default Player
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/284058.html
標籤：JavaScript