前言
《如何學好javascript》這門課是由360技術專家月影老師講的。
說實話,我一直在糾結要不要寫關於js的文章,因為對於js來說,我的實際經驗不足,更不要說物件導向程式設計與函數語言程式設計了,對於過程抽象與行為抽象也沒有深入的理解,但想想還是覺得應該分享出來,並且我儘量原汁原味的闡述這門課的內容,儘量不加入自己主觀理解,因為對於沒有實際經驗的我來說,如果新增自己主觀的理解只能誤導讀者,好了,不費話了~
一、關燈吃麵
需求:
- 點選紅色按鈕
- 背景變成黑色
- 字型color由黑色變成白色
- 紅色按鈕變成綠色
1.1 版本1
light.onclick = function(evt) {
if(light.style.backgroundColor !== 'green'){
document.body.style.backgroundColor = '#000';
document.body.style.color = '#fff';
light.style.backgroundColor = 'green';
}else{
document.body.style.backgroundColor = '';
document.body.style.color = '';
light.style.backgroundColor = '';
}
}
複製程式碼
對於我來說,要是讓我完成這個需求,大概應該就寫成這樣吧^_^,
想想這樣寫好不好呢?
答案肯定是不好的。
這樣寫的問題:
- 用js直接去修改了元素的樣式。
- 並且程式碼只能看出修改了一些元素的樣式,看不出這坨程式碼需要完成哪些需求。
- 假設:如果以後想改需求而了,比如開燈時字型變為紅色,或者需要新增一些功能,那我就得去重新看程式碼,去改這一坨程式碼,這樣的話,維護起來就非常難。
1.2 版本2:
lightButton.onclick = function(evt) {
if(main.className === 'light-on'){
main.className = 'light-off';
}else{
main.className = 'light-on';
}
}
複製程式碼
這回程式碼語義化就比較強了,通過js去修改className而不是用js來直接修改style,這樣寫會比較好一點。
1.3 版本3:其他思路
<input id="light" type="checkbox"></input>
<div id="main">
<div class="pic">
<img src="https://p4.ssl.qhimg.com/t01e932bf06236f564f.jpg">
</div>
<div class="content">
<pre>
今天回到家,
煮了點面吃,
一邊吃麵一邊哭,
淚水滴落在碗裡,
沒有開燈。
</pre>
</div>
<label for="light">
<span id="lightButton"> </span>
<label>
</div>
<style>
html,body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
#light {
display: none;
}
#main {
position: relative;
padding: 20px;
width: 100%;
height: 100%;
background-color: #fff;
color: #000;
transition: all .5s;
}
#light:checked + #main {
background-color: #000;
color: #fff;
}
.pic {
float: left;
margin-right: 20px;
}
.content {
font-weight: bold;
font-size: 1.5em;
}
#lightButton {
border: none;
width: 25px;
height: 25px;
border-radius: 50%;
position: absolute;
left: 30px;
top: 30px;
cursor: pointer;
background: red;
}
#light:checked+#main #lightButton {
background: green;
}
</style>
複製程式碼
這麼寫的思路就是不使用js,而是通過input和label來關聯切換狀態。
二、複雜的UI元件的設計
這是大家最熟悉不過的輪播圖元件了,如果用程式導向的寫法,可能會出現很多bug,那麼如何實現才是最好的呢?
2.1 步驟1:整體思路
整體思路
- 圖片結構是一個列表型結構,所以主體用
<ul>
和<li>
- 使用 css 絕對定位將圖片重疊在同一個位置
- 輪播圖切換的狀態使用修飾符(modifier)
- 輪播圖的切換動畫使用 css transition
2.2 步驟2: API設計
具體實現:
class Slider{
constructor(id){
this.container = document.getElementById(id);
this.items = this.container.querySelectorAll('.slider-list__item, .slider-list__item--selected');
}
// 獲得當前元素
getSelectedItem(){
const selected = this.container.querySelector('.slider-list__item--selected');
return selected
}
// 獲得當前元素的索引
getSelectedItemIndex(){
return Array.from(this.items).indexOf(this.getSelectedItem());
}
// 切換到第index張圖片
slideTo(idx){
const selected = this.getSelectedItem();
if(selected){
selected.className = 'slider-list__item';
}
const item = this.items[idx];
if(item){
item.className = 'slider-list__item--selected';
}
}
// 切換到下一張圖片
slideNext(){
const currentIdx = this.getSelectedItemIndex();
const nextIdx = (currentIdx + 1) % this.items.length;
this.slideTo(nextIdx);
}
// 切換到上一張圖片
slidePrevious(){
const currentIdx = this.getSelectedItemIndex();
const previousIdx = (this.items.length + currentIdx - 1) % this.items.length;
this.slideTo(previousIdx);
}
}
// 通過new來例項化
const slider = new Slider('my-slider');
setInterval(() => {
slider.slideNext()
}, 3000)
複製程式碼
2.3 步驟3:控制流設計 (下方小圓點與左右按鈕設計)
控制結構
<a class="slide-list__next"></a>
<a class="slide-list__previous"></a>
<div class="slide-list__control">
<span class="slide-list__control-buttons--selected"></span>
<span class="slide-list__control-buttons"></span>
<span class="slide-list__control-buttons"></span>
<span class="slide-list__control-buttons"></span>
</div>
複製程式碼
自定義事件
const detail = {index: idx}
const event = new CustomEvent('slide', {bubbles:true, detail})
this.container.dispatchEvent(event)
複製程式碼
因為下方原點與圖片自動切換的下標(index)是一致的,所以可以通過事件機制,在圖片slide時候直接給container派發一個事件,這樣的話呢,通過container去監聽這個事件,去更新控制結構上小圓點的狀態。
具體實現:
class Slider{
constructor(id, cycle = 3000){
this.container = document.getElementById(id);
this.items = this.container.querySelectorAll('.slider-list__item, .slider-list__item--selected');
this.cycle = cycle;
const controller = this.container.querySelector('.slide-list__control');
if(controller){
const buttons = controller.querySelectorAll('.slide-list__control-buttons, .slide-list__control-buttons--selected');
controller.addEventListener('mouseover', evt=>{
const idx = Array.from(buttons).indexOf(evt.target);
if(idx >= 0){
this.slideTo(idx);
this.stop();
}
});
controller.addEventListener('mouseout', evt=>{
this.start();
});
// 監聽slide事件
this.container.addEventListener('slide', evt => {
// 拿到slide事件傳來的index
const idx = evt.detail.index
const selected = controller.querySelector('.slide-list__control-buttons--selected');
if(selected) selected.className = 'slide-list__control-buttons';
buttons[idx].className = 'slide-list__control-buttons--selected';
})
}
const previous = this.container.querySelector('.slide-list__previous');
if(previous){
previous.addEventListener('click', evt => {
this.stop();
this.slidePrevious();
this.start();
evt.preventDefault();
});
}
const next = this.container.querySelector('.slide-list__next');
if(next){
next.addEventListener('click', evt => {
this.stop();
this.slideNext();
this.start();
evt.preventDefault();
});
}
}
getSelectedItem(){
let selected = this.container.querySelector('.slider-list__item--selected');
return selected
}
getSelectedItemIndex(){
return Array.from(this.items).indexOf(this.getSelectedItem());
}
slideTo(idx){
let selected = this.getSelectedItem();
if(selected){
selected.className = 'slider-list__item';
}
let item = this.items[idx];
if(item){
item.className = 'slider-list__item--selected';
}
const detail = {index: idx}
const event = new CustomEvent('slide', {bubbles:true, detail})
this.container.dispatchEvent(event)
}
slideNext(){
let currentIdx = this.getSelectedItemIndex();
let nextIdx = (currentIdx + 1) % this.items.length;
this.slideTo(nextIdx);
}
slidePrevious(){
let currentIdx = this.getSelectedItemIndex();
let previousIdx = (this.items.length + currentIdx - 1) % this.items.length;
this.slideTo(previousIdx);
}
start(){
this.stop();
this._timer = setInterval(()=>this.slideNext(), this.cycle);
}
stop(){
clearInterval(this._timer);
}
}
const slider = new Slider('my-slider');
slider.start();
複製程式碼
這個實現的建構函式會複雜一些,但是把timer定時器也封裝進去了,會有輪播的時間預設為3秒鐘,同樣的也是獲得container,items,cycle(時間)通過事件機制將控制流中的小圓點與圖片聯動起來。並且還判斷了controler是否存在,假如以後我們不需要小圓點這個功能了,我們只需要把html中相關的結構去掉,js也不會報錯,但是這裡還有一個優化的點就是slider與controler之間有著比較強的耦合度。
2.4 控制流設計原則
為什麼要用到事件機制呢?因為要降低結構之間的耦合度,如果不這樣做的話,我們需要做雙向的操控的。
舉個栗子?
比如我們要新增一個需求:顯示當前index。
只需要這樣做:
- 結構中新增
<div id="other">第0張</div>
複製程式碼
- js中新增
document.addEventListener('slider', (evt) => {
other.innerHTML = `第${evt.detail.index}張`
})
複製程式碼
三、這樣是不是就可以交差了呢?
其實還是有很大的改動空間的,比如上面的程式碼在建構函式的程式碼量特別多,slider與controler的耦合度比較大,如何降低它們之間的耦合度呢?
3.1 優化1:外掛/依賴注入
class Slider{
constructor(id, cycle = 3000){
this.container = document.getElementById(id);
this.items = this.container.querySelectorAll('.slider-list__item, .slider-list__item--selected');
this.cycle = cycle;
}
registerPlugins(...plugins){
plugins.forEach(plugin => plugin(this));
}
getSelectedItem(){
const selected = this.container.querySelector('.slider-list__item--selected');
return selected
}
getSelectedItemIndex(){
return Array.from(this.items).indexOf(this.getSelectedItem());
}
slideTo(idx){
const selected = this.getSelectedItem();
if(selected){
selected.className = 'slider-list__item';
}
const item = this.items[idx];
if(item){
item.className = 'slider-list__item--selected';
}
const detail = {index: idx}
const event = new CustomEvent('slide', {bubbles:true, detail})
this.container.dispatchEvent(event)
}
slideNext(){
const currentIdx = this.getSelectedItemIndex();
const nextIdx = (currentIdx + 1) % this.items.length;
this.slideTo(nextIdx);
}
slidePrevious(){
const currentIdx = this.getSelectedItemIndex();
const previousIdx = (this.items.length + currentIdx - 1) % this.items.length;
this.slideTo(previousIdx);
}
addEventListener(type, handler){
this.container.addEventListener(type, handler)
}
start(){
this.stop();
this._timer = setInterval(()=>this.slideNext(), this.cycle);
}
stop(){
clearInterval(this._timer);
}
}
function pluginController(slider){
const controller = slider.container.querySelector('.slide-list__control');
if(controller){
const buttons = controller.querySelectorAll('.slide-list__control-buttons, .slide-list__control-buttons--selected');
controller.addEventListener('mouseover', evt=>{
const idx = Array.from(buttons).indexOf(evt.target);
if(idx >= 0){
slider.slideTo(idx);
slider.stop();
}
});
controller.addEventListener('mouseout', evt=>{
slider.start();
});
slider.addEventListener('slide', evt => {
const idx = evt.detail.index
const selected = controller.querySelector('.slide-list__control-buttons--selected');
if(selected) selected.className = 'slide-list__control-buttons';
buttons[idx].className = 'slide-list__control-buttons--selected';
});
}
}
function pluginPrevious(slider){
const previous = slider.container.querySelector('.slide-list__previous');
if(previous){
previous.addEventListener('click', evt => {
slider.stop();
slider.slidePrevious();
slider.start();
evt.preventDefault();
});
}
}
function pluginNext(slider){
const next = slider.container.querySelector('.slide-list__next');
if(next){
next.addEventListener('click', evt => {
slider.stop();
slider.slideNext();
slider.start();
evt.preventDefault();
});
}
}
const slider = new Slider('my-slider');
slider.registerPlugins(pluginController, pluginPrevious, pluginNext);
slider.start();
複製程式碼
這樣做的好處:比如我們不想要controler這個元件了,直接刪掉外掛與html對應結構,其他的功能還是可以正常使用。
3.2 優化2:改進外掛/模板化
上面的程式碼還不是特別的優雅,當我們不想要一個功能時,需要刪除html結構與js程式碼,如果用模板化,只需要修改js即可。
render方法會傳data資料,負責構造html結構 action方法會注入component物件,負責初始化這個物件,新增事件、行為。
這樣我們的html結構只有
<div id="my-slider" class="slider-list"></div>
複製程式碼
class Slider{
constructor(id, opts = {images:[], cycle: 3000}){
this.container = document.getElementById(id);
this.options = opts;
this.container.innerHTML = this.render();
this.items = this.container.querySelectorAll('.slider-list__item, .slider-list__item--selected');
this.cycle = opts.cycle || 3000;
this.slideTo(0);
}
render(){
const images = this.options.images;
const content = images.map(image => `
<li class="slider-list__item">
<img src="${image}"/>
</li>
`.trim());
return `<ul>${content.join('')}</ul>`;
}
registerPlugins(...plugins){
plugins.forEach(plugin => {
const pluginContainer = document.createElement('div');
pluginContainer.className = '.slider-list__plugin';
pluginContainer.innerHTML = plugin.render(this.options.images);
this.container.appendChild(pluginContainer);
plugin.action(this);
});
}
getSelectedItem(){
const selected = this.container.querySelector('.slider-list__item--selected');
return selected
}
getSelectedItemIndex(){
return Array.from(this.items).indexOf(this.getSelectedItem());
}
slideTo(idx){
const selected = this.getSelectedItem();
if(selected){
selected.className = 'slider-list__item';
}
let item = this.items[idx];
if(item){
item.className = 'slider-list__item--selected';
}
const detail = {index: idx}
const event = new CustomEvent('slide', {bubbles:true, detail})
this.container.dispatchEvent(event)
}
slideNext(){
const currentIdx = this.getSelectedItemIndex();
const nextIdx = (currentIdx + 1) % this.items.length;
this.slideTo(nextIdx);
}
slidePrevious(){
const currentIdx = this.getSelectedItemIndex();
const previousIdx = (this.items.length + currentIdx - 1) % this.items.length;
this.slideTo(previousIdx);
}
addEventListener(type, handler){
this.container.addEventListener(type, handler);
}
start(){
this.stop();
this._timer = setInterval(()=>this.slideNext(), this.cycle);
}
stop(){
clearInterval(this._timer);
}
}
const pluginController = {
render(images){
return `
<div class="slide-list__control">
${images.map((image, i) => `
<span class="slide-list__control-buttons${i===0?'--selected':''}"></span>
`).join('')}
</div>
`.trim();
},
action(slider){
const controller = slider.container.querySelector('.slide-list__control');
if(controller){
const buttons = controller.querySelectorAll('.slide-list__control-buttons, .slide-list__control-buttons--selected');
controller.addEventListener('mouseover', evt => {
const idx = Array.from(buttons).indexOf(evt.target);
if(idx >= 0){
slider.slideTo(idx);
slider.stop();
}
});
controller.addEventListener('mouseout', evt => {
slider.start();
});
slider.addEventListener('slide', evt => {
const idx = evt.detail.index
const selected = controller.querySelector('.slide-list__control-buttons--selected');
if(selected) selected.className = 'slide-list__control-buttons';
buttons[idx].className = 'slide-list__control-buttons--selected';
});
}
}
};
const pluginPrevious = {
render(){
return `<a class="slide-list__previous"></a>`;
},
action(slider){
const previous = slider.container.querySelector('.slide-list__previous');
if(previous){
previous.addEventListener('click', evt => {
slider.stop();
slider.slidePrevious();
slider.start();
evt.preventDefault();
});
}
}
};
const pluginNext = {
render(){
return `<a class="slide-list__next"></a>`;
},
action(slider){
const previous = slider.container.querySelector('.slide-list__next');
if(previous){
previous.addEventListener('click', evt => {
slider.stop();
slider.slideNext();
slider.start();
evt.preventDefault();
});
}
}
};
const slider = new Slider('my-slider', {images: ['https://p5.ssl.qhimg.com/t0119c74624763dd070.png',
'https://p4.ssl.qhimg.com/t01adbe3351db853eb3.jpg',
'https://p2.ssl.qhimg.com/t01645cd5ba0c3b60cb.jpg',
'https://p4.ssl.qhimg.com/t01331ac159b58f5478.jpg'], cycle:3000});
slider.registerPlugins(pluginController, pluginPrevious, pluginNext);
slider.start();
複製程式碼
這樣做的好處就是我們可以隨意修改這個元件的功能,如果不想要兩邊的按鈕或者控制流的小圓點,只需要修改註冊外掛即可。
外掛化/模板化這種做法還有一個缺點就是如果我們修改外掛時,我們直接append到元件裡,可能只修改了一點點程式碼,最後導致整個dom都重新整理了,這就是為什麼現在一些主流框架採用虛擬dom的方式,通過diff演算法來區域性修改dom。
3.3 優化3:元件模型抽象
最終實現:
class Component{
constructor(id, opts = {data:[]}){
this.container = document.getElementById(id);
this.options = opts;
this.container.innerHTML = this.render(opts.data);
}
registerPlugins(...plugins){
plugins.forEach(plugin => {
const pluginContainer = document.createElement('div');
pluginContainer.className = '.slider-list__plugin';
pluginContainer.innerHTML = plugin.render(this.options.data);
this.container.appendChild(pluginContainer);
plugin.action(this);
});
}
render(data) {
/* abstract */
return ''
}
}
class Slider extends Component{
constructor(id, opts = {data:[], cycle: 3000}){
super(id, opts);
this.items = this.container.querySelectorAll('.slider-list__item, .slider-list__item--selected');
this.cycle = opts.cycle || 3000;
this.slideTo(0);
}
render(data){
const content = data.map(image => `
<li class="slider-list__item">
<img src="${image}"/>
</li>
`.trim());
return `<ul>${content.join('')}</ul>`;
}
getSelectedItem(){
const selected = this.container.querySelector('.slider-list__item--selected');
return selected
}
getSelectedItemIndex(){
return Array.from(this.items).indexOf(this.getSelectedItem());
}
slideTo(idx){
const selected = this.getSelectedItem();
if(selected){
selected.className = 'slider-list__item';
}
const item = this.items[idx];
if(item){
item.className = 'slider-list__item--selected';
}
const detail = {index: idx}
const event = new CustomEvent('slide', {bubbles:true, detail})
this.container.dispatchEvent(event)
}
slideNext(){
const currentIdx = this.getSelectedItemIndex();
const nextIdx = (currentIdx + 1) % this.items.length;
this.slideTo(nextIdx);
}
slidePrevious(){
const currentIdx = this.getSelectedItemIndex();
const previousIdx = (this.items.length + currentIdx - 1) % this.items.length;
this.slideTo(previousIdx);
}
addEventListener(type, handler){
this.container.addEventListener(type, handler);
}
start(){
this.stop();
this._timer = setInterval(()=>this.slideNext(), this.cycle);
}
stop(){
clearInterval(this._timer);
}
}
const pluginController = {
render(images){
return `
<div class="slide-list__control">
${images.map((image, i) => `
<span class="slide-list__control-buttons${i===0?'--selected':''}"></span>
`).join('')}
</div>
`.trim();
},
action(slider){
let controller = slider.container.querySelector('.slide-list__control');
if(controller){
let buttons = controller.querySelectorAll('.slide-list__control-buttons, .slide-list__control-buttons--selected');
controller.addEventListener('mouseover', evt=>{
var idx = Array.from(buttons).indexOf(evt.target);
if(idx >= 0){
slider.slideTo(idx);
slider.stop();
}
});
controller.addEventListener('mouseout', evt=>{
slider.start();
});
slider.addEventListener('slide', evt => {
const idx = evt.detail.index;
let selected = controller.querySelector('.slide-list__control-buttons--selected');
if(selected) selected.className = 'slide-list__control-buttons';
buttons[idx].className = 'slide-list__control-buttons--selected';
});
}
}
};
const pluginPrevious = {
render(){
return `<a class="slide-list__previous"></a>`;
},
action(slider){
let previous = slider.container.querySelector('.slide-list__previous');
if(previous){
previous.addEventListener('click', evt => {
slider.stop();
slider.slidePrevious();
slider.start();
evt.preventDefault();
});
}
}
};
const pluginNext = {
render(){
return `<a class="slide-list__next"></a>`;
},
action(slider){
let previous = slider.container.querySelector('.slide-list__next');
if(previous){
previous.addEventListener('click', evt => {
slider.stop();
slider.slideNext();
slider.start();
evt.preventDefault();
});
}
}
};
const slider = new Slider('my-slider', {data: ['https://p5.ssl.qhimg.com/t0119c74624763dd070.png',
'https://p4.ssl.qhimg.com/t01adbe3351db853eb3.jpg',
'https://p2.ssl.qhimg.com/t01645cd5ba0c3b60cb.jpg',
'https://p4.ssl.qhimg.com/t01331ac159b58f5478.jpg'], cycle:3000});
slider.registerPlugins(pluginController, pluginPrevious, pluginNext);
slider.start();
複製程式碼
最後
我一直覺得一篇文章過多的程式碼會讓讀者感到視覺疲勞,但實在是沒有需要修改的地方,非常建議大家一步步的敲一遍,深刻體會月影大大的javascript是多麼的優雅?~~