通过js和jq的学习自己 封装一个message提示的插件

自己封装一个message的插件

效果要求如下

html代码块如下：分别有几个按钮，点击不同的按钮会显示不同的提示信息
![在这里插入图片描述](https://img-blog.csdnimg.cn/20190921175201609.png)
   <input type="button" value="信息提醒" class="btn-info"/>
    <input type="button" value="成功提示" class="btn-success"/>
    <input type="button" value="警告提示" class="btn-warning"/>
    <input type="button" value="失败提示" class="btn-danger"/>
     前端样子的实现，我使用了bootstrap，使用第三方工具一定要正确引入，如下所示
  <link rel="stylesheet" href="css/bootstrap.css"/>

这里演示一下点击第一个按钮的时候，去调用绑定在$对象上的message方法
	$('.btn-info').on('click',function(){
	    $.message({
	        message:this.value,//实时获取html页面中输入框中的值
            type:'info',//这里的类型是传入的类型，根据传入类型的不同，分别进行不同的操作。
            showClose:true,//这个参数表示，是否出现x号框。默认是false不出现
            duration:3000,//参数表示信息提示出现的时间长度
            onClose:function(){
                alert("哈哈哈哈哈哈");//onclose表示一个回调函数的功能，传入回调函数的话，就有这个功能--会弹出自己定义的信息。
            }
	    });
	})

下面是具体的实现
//开启匿名自调用函数
(function ($) {
    "use strict";//开启严格的模式
    $.message = function (options) {//这里的options是对象，里面是形参，谁调用他就传入值
        var obj={};
        var {
            message,
            type,
            duration,
            showClose,
            center,
            onClose
        } = options;
        type = type || "info"; //type默认是info显示类型 
        center = center == true ? true : false; //默认为false
        showClose = showClose == true ? true : false; //默认为false
        duration = duration || 5000; //默认显示时间5秒钟
        onClose=onClose||function(){};//处理回调函数，防止没有传入的时候会报错
         //判断type类型是什么--根据类型分别进行各自的操作
        switch (type) {
            case "success":
                suceess();
                break;
            case "warning":
                warning();
                break;
            case "error":
                erro();
                break;
            default:
                info();
        } 
        //默认是信息提示模块功能
        function info() {
                myFuc(message,showClose,center,onClose,duration,"#0ff");
        }

        // suceess代码块
        function suceess() {
            myFuc(message,showClose,center,onClose,duration,"#0f0");
        }

        // erro代码块----
        function erro() {
            myFuc(message,showClose,center,onClose,duration,"#f00");
        }
        // 警告代码块
        function warning() {
        myFuc(message,showClose,center,onClose,duration,"#ff0");
        }


    }
    //声明为全局变量，处理每次点击会创建一个div,多次点击会出现多个div的bug
    //还有要清除定时器，累加的效果
    var obj={};
    var time;  
    //代码重复用的---尽量封装成函数
    function myFuc(message,showClose,center,onClose,duration,color){   
            clearInterval(time);//进入函数首先进行清除定时器，目的是清除上一次的定时器效果。
            if(!obj.div){
                obj.div = $(`<div>${message}</div>`);  //创建div来存入你点击对应的显示的信息
            }
        $("body").append(obj.div);
        if(showClose){
            var span=$("<span>x</span>");//如果showClose为true的时候，那么创建x标检
            obj.div.append(span);
            span.css({
                position:"absolute",
                right:"3px",
                width:"5px",
                height:"5px",
                top:"5px",
            })
            $("span").click(function(){//点击x的时候，会触发回调函数onClose()
                onClose();
            })
        }   
        if(center){//居中功能的开始，下面是设置样式
           obj.div.css({
                width: "300px",
                height: "50px",
                background: color,
                textAlign: "left",
                lineHeight: "50px",
                position:"relative",
                margin:"50% auto",
            })
        }else{
           obj.div.css({
                width: "300px",
                height: "50px",
                background: color,
                textAlign: "left",
                lineHeight: "50px",
                position:"relative",
                margin:"0 auto",
            })
        }
        time= setInterval(() => {//下面是隔一段时候后移除你的信息提示框
            obj.div.remove();
        },
        duration)//时间可以根据传入的参数来决定
    }

})(jQuery); //传入jq对象