有关组件的尝鲜-SAOUnit弹窗-白红宇

只有动手去做的时候，才是距离成功最近的时候

最近开始学习了一个前端开发思维，在这里给和我一样的“童鞋”做下分享，大佬轻喷。

什么是组件

组件是对数据和方法进行封装，每个组件都有自己的属性和方法，是面向对象编程的核心。一个组件可以在许多地方进行使用，这样就不需要进行重复写代码。写代码讲究高内聚低耦合，组件很好的体现了这个思想。

前端的组件长啥样

现如今前端框架层出不穷，这些框架里面就是包含了许许多多的组件，它们有着自己的css样式和JS脚本。用我最近使用的Swiper举例吧。

先引入CSS样式表和JS脚本，再到<body></body>中创建好指定类名的标签们，最后再初始化一下，这个组件的功能就会被实现了。当然也有一些是纯CSS样式的组件，这里就不多推荐了。

在写过一次代码后，这些组件就可以到任意一个页面中使用了，无需重新写过一遍CSS样式或者JS脚本（初始化还是要再写一遍的）。

SAOUnit弹窗

好了，上面简单的介绍了一下组件。如今我正在着手几个项目，有学校课程需要、有参赛项目需要，还有个人爱好。

今天我就分享一个我个人项目（自嗨）的一个组件。不多说看图

很明显，这是一个弹窗组件，是刀剑神域风格的（非常SAO）。

我之所以做这么一个弹窗组件，是因为默认的弹窗alert()实在霸道，它一弹出来，你的页面就被暂停掉了。突然间的暂停让我很不爽，所以就有了这么一个东西。

来看看DOM结构吧

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)}复制代码

以上就是这个弹窗组件的主要内部逻辑啦~~

此组件放在了上，我会进行更新和维护，如果感兴趣的话就给个★吧。欢迎在回复区讨论和指教。

SAOUnit弹窗使用方式

首先引入css和js

    ...    
        ...        ...复制代码

HTML内容

初始化一下，最好是挨着</body>标签

var myPopup = new MPBpopup('.saopopup-container',{    title:"测试用标题",    text:"测试用内容第二行测试内容
第三行测试内容
",    okFunc:()=>{myPopup.hiddenPopup()}     // 这里设置了点击确认关闭弹窗。关还是不关，取决于你而不是组件。 noFunc是默认关闭弹窗的});复制代码

需要弹窗时使用

myPopup.showPopup(); //然后你就可以看见GIF图的效果了复制代码