有關組件的嚐鮮-SAOUnit彈窗

時間 2019-11-30

標籤有關組件嚐鮮 saounit 简体版

原文原文鏈接

只有動手去作的時候，纔是距離成功最近的時候css

最近開始學習了一個前端開發思惟，在這裏給和我同樣的「童鞋」作下分享，大佬輕噴。html

什麼是組件

組件是對數據和方法進行封裝，每一個組件都有本身的屬性和方法，是面向對象編程的核心。一個組件能夠在許多地方進行使用，這樣就不須要進行重複寫代碼。寫代碼講究高內聚低耦合，組件很好的體現了這個思想。前端

前端的組件長啥樣

現現在前端框架層出不窮，這些框架裏面就是包含了許許多多的組件，它們有着本身的css樣式和JS腳本。用我最近使用的Swiper舉例吧。
Swiper的使用方法node

先引入CSS樣式表和JS腳本，再到<body></body>中建立好指定類名的標籤們，最後再初始化一下，這個組件的功能就會被實現了。固然也有一些是純CSS樣式的組件，這裏就很少推薦了。git

在寫過一次代碼後，這些組件就能夠到任意一個頁面中使用了，無需從新寫過一遍CSS樣式或者JS腳本（初始化仍是要再寫一遍的）。github

SAOUnit彈窗

好了，上面簡單的介紹了一下組件。現在我正在着手幾個項目，有學校課程須要、有參賽項目須要，還有我的愛好。
今天我就分享一個我我的項目（自嗨）的一個組件。很少說看圖編程

很明顯，這是一個彈窗組件，是刀劍神域風格的（很是SAO）。
我之因此作這麼一個彈窗組件，是由於默認的彈窗alert()實在霸道，它一彈出來，你的頁面就被暫停掉了。忽然間的暫停讓我很不爽，因此就有了這麼一個東西。json

來看看DOM結構吧bash

<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圖的效果了
複製代碼

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。