VUE實戰4：狀態模式實現窗口停靠，靈動、自由, 管理後臺Admin界面

昨天作的tabs窗口，很是滿意，今天乘勝追擊，把它作成了能夠根據自身大小改變顯示樣式，自身寬度太小時，tab頁能夠浮動停靠其一側。具體效果：
左側

右側

向來喜歡簡單明瞭的東西，因此想實現的簡單一點，無奈現實不容許啊，功能實在有一丟丟複雜。硬着頭皮搞了整整一下午，終於完成。
左側跟右側窗口，要使用同一個控件，儘可能增長代碼的可複用性，控件的狀態就有些多：正常顯示（普通tabs窗口），列表（顯示圖標跟標題，點擊時彈出tab頁），迷你列表（只顯示圖標，點擊時彈出tab頁）。
控件在界面左側時，tab頁彈出在其右側。反之，控件在界面右側時，tab頁彈出在其左側。
從正常tabs，縮小到列表顯示時，全部tab都是不被激活的。從列表放大到正常tabs，要默認一個標籤（tab）是被選中的。
這麼多的狀態要求，代碼很容易就亂掉。不過還好，設計模式中有一個叫「狀態模式」的，能夠很好的解決這個問題，缺點就是初期代碼量稍大，優勢是便於後期管理。
昨天作了兩個tabs控件，一個是WidgetTabs，另一個是PageTabs，後者如今還能知足咱們的需求，只須要修改WidgetTabs這一個就行。
昨天實現的一些代碼刪掉，首先重寫模板，根據模板寫腳本代碼，可讓腳本代碼更實用些，就像測試驅動的開發裏，先寫測試再寫代碼，是一個道理。
還有，差點忘了。昨天的代碼裏，把全部的style樣式都放在style.css這個文件裏了，讓後vue全局引入，隨着咱們寫的控件愈來愈多，這個文件會愈來愈臃腫，不便於管理。此次把WidgetTabs相關的style代碼，拿到vue組件裏面。
先看模板代碼：

`<template>
<div class="widget-tabs" :class="stateClass" ref="widget">

<ul class\="heads"\>
  <li v-for\="tab in tabs" class\="item" :class\="{ 'active': tab.isShow }" @click\="click(tab)"\>
    <div v-show\="showIcon" class\="tab-icon"\><i :class\="tab.icon"\></i\></div\> 
    <span v-show\="showTitle"\> {{ tab.name }}</span\>
  </li\>
</ul\>
<div v-show\="showTabBody" class\="tab-body" :class\="dockLeft?'dock-left':''"\>
  <div v-show\="showTabTitle" class\="tab-title"\>
    <div\>{{selectedTab ? selectedTab.name : ''}}</div\>
    <div class\="tab-close" @click\="close"\>×</div\>
  </div\>
  <slot\></slot\>
</div\>

</div>
</template>`

頂層的DIV是咱們這個控件的殼子，class對應三個狀態的三個css class：
一、缺省狀態，空字符串
二、列表狀態，middle-size
三、迷你列表狀態，mini-size
css代碼里根據這個csss class，用不一樣的方式顯示其子元素，從而實現正常顯示，或者彈出顯示兩種風格。
ref至關於給這個DIV定了一個惟一ID，咱們能夠在代碼裏經過這個ID，獲取相應的dom元素，從而判斷當前控件大小，根據這個大小，調整控件顯示樣式。
ul元素顯示的是tabs控件的導航標籤部分，根據每一個tab頁的顯示或者隱藏來肯定標籤是否激活，它還有一個功能就是接受鼠標點擊事件，傳給控制腳本，模板基本沒什麼邏輯，主要就是顯示和接收事件。
是否顯示圖標，根據showIcon計算屬性肯定。
是否顯示標題，根據showTitle計算屬性肯定。
整個選項卡body是否顯示，根據showTabBody計算屬性肯定。由於選項卡body有時停靠在控件左側，有時停靠在控件右側，這個停靠方式根據屬性dockLeft肯定，若是停靠在左邊dockLeft爲true，反之爲false。
tabTitle是停靠時，顯示的標題區域：

根據計算屬性showTabTitle肯定是否顯示。關閉按鈕負責接收點擊事件，傳遞給控制器腳本。無論用什麼樣的方式實現，控制腳本只要能知足模板的這個要求就能夠了。至關於接口定了，根據接口設計實現方式。
前面已經肯定要用狀態模式實現，根據狀態設計三個狀態類：
NormalState（普通tabs控件），MiddleState（列表狀態，帶標題帶圖標），MiniState（迷你列表狀態，只顯示圖標）。後兩個類有一些共同的操做，好比彈出隱藏選項卡等，能夠繼承共同的基類：ListState，三個狀態類功能上也有一些交集，他們能夠有共同的基類State。類關係圖以下（好多年沒有用UML工具了，用Excel湊合一下）：

 

不仔細看，不知道這個圖實際上是Excel畫的，還覺得是哪一個高端UML工具作的呢。

狀態類對應的代碼：
`
class State{
constructor(context){ this.context = context
}

widthChange(width){ if(width <=90){ this.toState(this.context.miniState)

} else if(width <=160){ this.toState(this.context.middleState)
} else{ this.toState(this.context.normalState)
}

}

showTabBody(){ return true }

showTabTitle(){ return false }

showIcon(){ return false }

showTitle(){ return true }

close(){}

toState(state){ if(this.context.state !== state){ if(this.context.state === this.context.normalState){ this.context.selectedTab.isShow = false console.log('dddd')

} if(state === this.context.normalState){ this.context.selectedTab.isShow = true } this.context.state = state
}

}

stateClass(){ return '' }

}
class NormalState extends State{
constructor(context){

super(context)

}

clickTab(clickedTab){ this.context.tabs.forEach(tab => {

tab.isShow \= (tab.name == clickedTab.name) this.context.selectedTab = clickedTab
});

}
} //須要彈出式顯示標籤內容
class ListState extends State{
constructor(context){

super(context)

}

showTabBody(){ return this.context.selectedTab.isShow
}

showTabTitle(){ return true }

showIcon(){ return true }

showTitle(){ return true }

close(){ this.context.selectedTab.isShow = false }

clickTab(clickedTab){ this.context.tabs.forEach(tab => { if(tab === clickedTab){

tab.isShow \= !tab.isShow this.context.selectedTab = clickedTab
  } else{
    tab.isShow \= false }
});

}
} //該狀態顯示圖標跟標題
class MiddleState extends ListState{
constructor(context){

super(context)

}

stateClass(){ return 'middle-size' }
} //該狀態只顯示圖標
class MiniState extends ListState{
constructor(context){

super(context)

}

showTitle(){ return false }

stateClass(){ return 'mini-size' }
}
`
控件腳本代碼：

`export default {
name: 'WidgetTabs',
data() { return {

tabs: \[\],
  state: null,
  selectedTab :null,
  dockLeft:false,
}

},

created() { this.tabs = this.$children; this.normalState = new NormalState(this) this.middleState = new MiddleState(this) this.miniState = new MiniState(this) this.state = this.normalState
},

computed: {

stateClass(){ return this.state.stateClass()
},

showIcon(){ return this.state.showIcon()
},

showTitle(){ return this.state.showTitle()
},

showTabBody(){ return this.state.showTabBody()
},
showTabTitle(){ return this.state.showTabTitle()
},

},

methods: {

click(clickTab) { this.state.clickTab(clickTab)
},

mouseMove(){ if(this.$refs.widget){ this.dockLeft = this.$refs.widget.offsetLeft < 50
    this.state.widthChange(this.$refs.widget.offsetWidth)
  }
},

mouseDown(event){
  document.addEventListener('mousemove', this.mouseMove)
},

mouseUp(event){
  document.removeEventListener('mousemove', this.mouseMove)
},

close(){ this.state.close()
}

},

mounted () {

document.addEventListener('mousedown', this.mouseDown)
document.addEventListener('mouseup', this.mouseUp) this.tabs.forEach(tab => { if(tab.isShow){ this.selectedTab = tab
  }
});

},

beforeDestroyed() {

document.removeEventListener('mousedown', this.mouseDown)
document.removeEventListener('mouseup', this.mouseUp)

},
}
`
組件建立時初始化各類狀態。須要注意的一點是，須要在窗口變化時動態獲取控件寬度，來肯定控件是處在哪一個狀態。JS中DIV沒有resize事件，能夠經過鼠標事件來代替。咱們的窗口大小是經過鼠標拖動實現的，因此跟蹤鼠標拖動事件，動態查詢控件大小，而後分發事件。
這個控件至此就完成了，寫這個文章的事件比寫代碼時間長，天生是個程序員不是writer。
整個項目在這個歷史節點的代碼，請到個人Github上查看：https://github.com/vularsoft/...
找到該歷史節點的方法：

RXEditor是一個Boostrap代碼可視化編輯工具，本系列記錄了該軟件的開發過程，有問題的朋友請在ithub上給我留言。