有关组件的尝鲜-SAOUnit弹窗

栏目: CSS · 发布时间: 5年前

内容简介:只有动手去做的时候,才是距离成功最近的时候最近开始学习了一个前端开发思维,在这里给和我一样的“童鞋”做下分享,大佬轻喷。组件是对数据和方法进行封装,每个组件都有自己的属性和方法,是面向对象编程的核心。一个组件可以在许多地方进行使用,这样就不需要进行重复写代码。写代码讲究高内聚低耦合,组件很好的体现了这个思想。

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

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

什么是组件

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

前端的组件长啥样

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

Swiper的使用方法

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

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

SAOUnit弹窗

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

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

有关组件的尝鲜-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弹窗使用方式

  1. 首先引入css和js
<!DOCTYPE html>
<html>
<head>
    ...
    <link rel="stylesheet" href="./MPBC.css">
</head>
<body>
    ...
    <script src="./MPBC.js"></script>
    ...
</body>
</html>
复制代码
  1. 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>
复制代码
  1. 初始化一下,最好是挨着 </body> 标签
var myPopup = new MPBpopup('.saopopup-container',{
    title:"测试用标题",
    text:"测试用内容<p>第二行测试内容</p><p>第三行测试内容</p>",
    okFunc:()=>{myPopup.hiddenPopup()} 
    // 这里设置了点击确认关闭弹窗。关还是不关,取决于你而不是组件。 noFunc是默认关闭弹窗的
});
复制代码
  1. 需要弹窗时使用
myPopup.showPopup(); 
//然后你就可以看见GIF图的效果了
复制代码

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

你不知道的JavaScript(中卷)

你不知道的JavaScript(中卷)

[美] Kyle Simpson / 单业、姜南 / 人民邮电出版社 / 2016-8 / 79.00元

JavaScript这门语言简单易用,很容易上手,但其语言机制复杂微妙,即使是经验丰富的JavaScript开发人员,如果没有认真学习的话也无法真正理解。本套书直面当前JavaScript开发人员不求甚解的大趋势,深入理解语言内部的机制,全面介绍了JavaScript中常被人误解和忽视的重要知识点。本书是其中卷,主要介绍了类型、语法、异步和性能。一起来看看 《你不知道的JavaScript(中卷)》 这本书的介绍吧!

JSON 在线解析
JSON 在线解析

在线 JSON 格式化工具

Base64 编码/解码
Base64 编码/解码

Base64 编码/解码