封装思想

1、先封装一个Alerts类

用来生成弹出框的页面结构

• 1.1 属性：
  提示头
  提示信息
  字体颜色
• 1.2 方法：
  创建页面结构
  头部提示模块
  提示信息内部展示
  按钮模块
  成功按钮
  取消按钮

2、封装子类

例：成功

• 2.1 属性
  提示头 type
  提示信息 text
  字体颜色 color

3、、封装工厂

插件js代码

// 先封装一个 Alerts()
function Alerts() { }

// 给父类中 封装一个创建页面结构的方法
Alerts.prototype.create = function () {
    // 1. 先创建蒙版
    var mask = document.createElement('div');
    mask.className = 'mask';
    mask.id = 'mask';
    // 2. 设置css样式
    mask.style.width = '100%';
    mask.style.height = '100%';
    mask.style.position = 'absolute';
    mask.style.top = '0px';
    mask.style.left = '0px';
    mask.style.background = 'rgba(0,0,0,0.5)';
    mask.style.zIndex = '999999999999999999';

    // 3. 将蒙版 加入到 body
    var bodys = document.getElementsByTagName('body')[0];
    bodys.appendChild(mask);

    // 4. 创建内容区域
    var fbox = document.createElement('div');
    fbox.className = 'fbox';
    fbox.id = 'fbox';
    // 给内容区域 设置 样式
    fbox.style.width = '430px';
    fbox.style.height = '300px';
    fbox.style.position = 'absolute';
    fbox.style.top = '0px';
    fbox.style.left = '0px';
    fbox.style.right = '0px';
    fbox.style.bottom = '0px';
    fbox.style.margin = 'auto';
    fbox.style.background = '#fff';
    fbox.style.borderRadius = '10px';
    fbox.style.overflow = 'hidden';


    //添加至mask中
    mask.appendChild(fbox);
    // 给内容区域添加头部
    fbox.appendChild(this.top());
    // 给内容区域添加提示信息区域
    fbox.appendChild(this.cont());
    // 给内容区域添加按钮区域
    fbox.appendChild(this.bottom());
}


// 给Alerts添加一个创建头部的方法
Alerts.prototype.top = function () {
    var div = document.createElement('div');
    div.className = 'top';
    div.style.height = '50px';
    div.style.width = '90%';
    div.style.padding = '0 5%';
    div.style.borderBottom = '1px solid #000';
    div.style.fontSize = '24px';
    div.style.fontWeight = 'bold';
    div.style.lineHeight = '50px';
    div.style.color = this.color;
    div.innerText = this.type;
    return div;
}

// 给Alerts添加一个创建提示消息的方法
Alerts.prototype.cont = function () {
    var div = document.createElement('div');
    div.className = 'cont';
    div.style.height = '160px';
    div.style.width = '90%';
    div.style.padding = '20px 5% 0px';
    div.style.borderBottom = '1px solid #000';
    div.style.fontSize = '18px';
    div.style.lineHeight = '40px';
    div.style.color = this.color;
    div.innerText = this.text;
    return div;
}

//给Alerts添加一个创建按钮区域的方法
Alerts.prototype.bottom = function () {
    var div = document.createElement('div');
    div.className = 'bottom';
    div.style.width = '90%';
    div.style.padding = '10px 5% 0px';
    div.style.fontSize = '16px';
    div.style.lineHeight = '40px';

    //添加成功按钮
    div.appendChild(this.sure());
    //如this.flag = true; 添加取消按钮
    if (this.flag) {
        div.appendChild(this.del());
    }
    return div;
}


// 给Alerts添加一个创建成功按钮的方法
Alerts.prototype.sure = function () {
    var div = document.createElement('div');
    div.className = 'sure';
    div.style.width = '110px';
    div.style.height = '40px';
    div.style.fontSize = '16px';
    div.style.lineHeight = '40px';
    div.style.color = '#fff';
    div.style.backgroundColor = '#007aff';
    div.style.borderRadius = '5px';
    div.style.textAlign = 'center';
    div.style.marginLeft = '20px';
    div.style.float = 'right';
    div.style.cursor = 'pointer';
    div.innerText = '确认';
    //用that接收以下this
    var that = this;
    //给成功按钮添加一个点击方法，点击后移出
    div.onclick = function () {
        mask.remove();
        that.callback();
    }
    return div;
}

//给Alerts添加一个创建取消按钮的方法
Alerts.prototype.del = function () {
    var div = document.createElement('div');
    div.className = 'del';
    div.style.width = '110px';
    div.style.height = '40px';
    div.style.fontSize = '16px';
    div.style.lineHeight = '40px';
    div.style.color = '#333';
    div.style.backgroundColor = '#ccc';
    div.style.borderRadius = '5px';
    div.style.textAlign = 'center';
    div.style.marginLeft = '20px';
    div.style.float = 'right';
    div.style.cursor = 'pointer';
    div.innerText = '取消';
    //给取消按钮添加一个点击方法，点击后移出
    div.onclick = function () {
        mask.remove();
    }
    return div;
}

//创建一个成功类
function Success(text) {
    this.type = '成功';
    this.text = text;
    this.color = 'green';
    this.flag = false;
}
//继承父类
Success.prototype = new Alerts();
//恢复构造函数指向
Success.prototype.constructor = Success;

//创建一个失败类
function Err(text) {
    this.type = '失败';
    this.text = text;
    this.color = 'red';
    this.flag = false;
}
//继承父类
Err.prototype = new Alerts();
//恢复构造函数指向
Err.prototype.constructor = Err;

//创建一个提示类
function Tip(text, fl, callback) {
    this.type = '提示';
    this.text = text;
    this.color = 'orange';
    this.flag = fl || false;
    this.callback = callback;
}
//继承父类
Tip.prototype = new Alerts();
//恢复构造函数指向
Tip.prototype.constructor = Tip;

//封装工厂函数
function aler(type, text, fl) {
    var obj = {};
    switch (type) {
        case '成功':
            obj = new Success(text);
            break;
        case '失败':
            obj = new Err(text);
            break;
        case '提示':
            obj = new Tip(text, fl);
            break;
    }

    //生成弹出框
    obj.create();
    return obj;
}


function aler(O) {
    var obj = {};
    switch (O.type) {
        case '成功':
            obj = new Success(O.text);
            break;
        case '失败':
            obj = new Err(O.text);
            break;
        case '提示':
            obj = new Tip(O.text, O.fl, O.callback);
            break;
    }

    //生成弹出框
    obj.create();
    return obj;
}

调用插件代码

//将js代码路径引进来
<script src="Alerts.js"></script>
  aler({
            type: '提示',
            text: '数据传入有误',
            fl: true,
            callback : function(){
                console.log(true);
            }
        })