有关组件的尝鲜-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图的效果了
复制代码