有關元件的嚐鮮-SAOUnit彈窗
只有動手去做的時候，才是距離成功最近的時候
最近開始學習了一個前端開發思維，在這裡給和我一樣的“童鞋”做下分享，大佬輕噴。
什麼是元件
元件是對資料和方法進行封裝，每個元件都有自己的屬性和方法，是面向物件程式設計的核心。一個元件可以在許多地方進行使用，這樣就不需要進行重複寫程式碼。寫程式碼講究高內聚低耦合，元件很好的體現了這個思想。
前端的元件長啥樣
現如今前端框架層出不窮，這些框架裡面就是包含了許許多多的元件，它們有著自己的css樣式和JS指令碼。用我最近使用的Swiper舉例吧。
Swiper的使用方法 先引入CSS樣式表和JS指令碼，再到 <body></body> 中建立好指定類名的標籤們，最後再初始化一下，這個元件的功能就會被實現了。當然也有一些是純CSS樣式的元件，這裡就不多推薦了。
在寫過一次程式碼後，這些元件就可以到任意一個頁面中使用了，無需重新寫過一遍CSS樣式或者JS指令碼（初始化還是要再寫一遍的）。
SAOUnit彈窗
好了，上面簡單的介紹了一下元件。如今我正在著手幾個專案，有學校課程需要、有參賽專案需要，還有個人愛好。
今天我就分享一個我個人專案（自嗨）的一個元件。不多說看圖
很明顯，這是一個彈窗元件，是刀劍神域風格的（非常SAO）。
我之所以做這麼一個彈窗元件，是因為預設的彈窗 alert() 實在霸道，它一彈出來，你的頁面就被暫停掉了。突然間的暫停讓我很不爽，所以就有了這麼一個東西。
來看看DOM結構吧
<div class="saopopup-container"> <div class="saopopup-frame"> <div class="saopopup-title"></div> //彈窗標題 <div class="saopopup-text"></div> //彈窗內容 <div class="saopopup-bottom"> <div class="saopopup-button-no">取消</div> //取消按鈕 <div class="saopopup-button-ok">確定</div> //確定按鈕 </div> </div> </div> 複製程式碼
CSS樣式我就不放上來了（目前效果不太好），直接來看JS指令碼部分，如何實現一個元件的功能。
首先我將這個元件的屬性和方法封裝在一個建構函式裡面。
function MPBpopup(theNode, json) {
···
}
複製程式碼
| 引數 | 值 | 必須 |
|---|---|---|
| theNode | String型別，選取當前元件的class或者id | 是 |
| json | JSON格式的資料，可選值有title:'標題'，text:'內容'，okFunc:點選確定呼叫的函式，noFunc:點選取消呼叫的函式 | 可選 |
每個元件都有自己的屬性和方法，下面是該彈窗元件的屬性
var _node = document.querySelector(theNode);//獲取元件節點
var _content = { //預設彈窗內容
title: "Message", //標題
text: "Nothing in here", //內容
okFunc:()=>{}, //確定時呼叫的函式
noFunc:()=>{this.hiddenPopup()} //取消時調的用函式
}
複製程式碼
// 初始化設定
var _frame = _node.getElementsByClassName('saopopup-frame')[0]; //彈窗主體
_node.classList.add('saopopup-close'); // 新增隱藏樣式
_node.getElementsByClassName('saopopup-button-no')[0].onclick = function(){
_content.noFunc(); //繫結點選取消的方法
}
_node.getElementsByClassName('saopopup-button-ok')[0].onclick = function(){
_content.okFunc(); //繫結點選確定的方法
}
複製程式碼
以上這些屬性都是私有的，前面用一個下劃線表示。當使用建構函式建立物件時就會被生成。
元件就要有元件的樣子，能夠彈出展示內容和關閉就行。不過只有預設的屬性值肯定是不行的，彈窗裡顯示什麼內容就得我們自己輸入了。
私有方法：將內容寫入彈窗中
// 設定彈窗的標題以及內容
function _setContent() {
_node.getElementsByClassName('saopopup-title')[0].innerHTML = _content.title;
_node.getElementsByClassName('saopopup-text')[0].innerHTML = _content.text;
}
複製程式碼
當然這只是填寫了初始預設值，修改彈窗內容需要用到下面這個。
私有方法：修改屬性
// 設定物件屬性，包含資料合法性判斷
function _setData(json){
if(json){
if(json.title) _content.title = json.title;
if(json.text) _content.text = json.text;
if(json.okFunc) _content.okFunc = json.okFunc;
if(json.noFunc) _content.noFunc = json.noFunc;
} else {
return;
}
}
複製程式碼
私有方法：獲取元件主體的高度
// 獲取彈窗的高度，用於高度過渡效果
function _getPopupHeight() {
return _frame.offsetHeight;
}
複製程式碼
當元件內部設定好了後，剩下的就是交給外部呼叫了。
物件方法：開啟彈窗
this.showPopup = function (json) {
_setData(json); //設定彈窗的內容，如果沒有傳參進來就使用初始化值
_node.classList.remove('saopopup-close'); //移除 display:none
_node.classList.add('saopopup-open'); //新增 display:block 附帶一段animation
_setContent(); //將彈窗的內容填入頁面中
// 這裡的延時非常有必要，不然會因為非同步執行而取不到主體正確的高度
setTimeout(()=>{
_node.style.height = _getPopupHeight() + 'px'; // GIF圖中高度展開的過渡
},300)
}
複製程式碼
物件方法：關閉彈窗
this.hiddenPopup = function () {
_node.classList.remove('saopopup-open'); // 移除 display:block
_node.style.height = '39px'; // 將主體收起
// 給主體一段時間過渡，再新增display:none
setTimeout(()=>{
_node.classList.add('saopopup-close');
},200)
}
複製程式碼
以上就是這個彈窗元件的主要內部邏輯啦~~
此元件放在了 我的GitHub 上，我會進行更新和維護，如果感興趣的話就給個★吧。歡迎在回覆區討論和指教。
SAOUnit彈窗使用方式
- 首先引入css和js
<!DOCTYPE html> <html> <head> ... <link rel="stylesheet" href="./MPBC.css"> </head> <body> ... <script src="./MPBC.js"></script> ... </body> </html> 複製程式碼
- HTML內容
<div class="saopopup-container"> <div class="saopopup-frame"> <div class="saopopup-title"></div> <div class="saopopup-text"></div> <div class="saopopup-bottom"> <div class="saopopup-button-no">取消</div> <div class="saopopup-button-ok">確定</div> </div> </div> </div> 複製程式碼
- 初始化一下，最好是挨著
</body>標籤
var myPopup = new MPBpopup('.saopopup-container',{
title:"測試用標題",
text:"測試用內容<p>第二行測試內容</p><p>第三行測試內容</p>",
okFunc:()=>{myPopup.hiddenPopup()}
// 這裡設定了點選確認關閉彈窗。關還是不關，取決於你而不是元件。 noFunc是預設關閉彈窗的
});
複製程式碼
- 需要彈窗時使用
myPopup.showPopup(); //然後你就可以看見GIF圖的效果了 複製程式碼