弹窗组件由浅入深

弹窗是一种通用性极强的页面操作，无论是用户的登录注册还是提示信息都会用到我们要说的弹窗，所以对于各种各样的弹窗我们该怎么去复用呢？首先我们需要把弹窗组件化，每个需要用到弹窗的页面调用该组件就可以了，这样还不够，我们还需要通过继承组件来达到定制化弹窗开发，这也是我们今天要说的。

Alert弹窗组件预览

image.png

Login弹窗组件预览

image.png

需求分析

通用弹窗组件作为父组件提供给其他具体业务弹窗组件继承
通用弹窗提供基本的边框样式和隐藏显示功能
业务弹窗则只需要定制自己需要的内容和功能即可
继承自定义的alert弹窗和登录弹窗

通用弹窗思路

父组件一般提供通用性的功能即可，所以这里考虑到alert弹窗和登录弹窗的相同点和不同点，我们给通用弹窗定义一个容器以及边框和水平垂直居中，然后右上角需要一个关闭的button，提供隐藏和显示弹窗的方法，其实挺简单的吧 ~

// 定义父容器
let html = `<div class="m-modal"></div>`;

通过extend方法拿到传入的参数，并将html转成node方便操作，然后将节点渲染到页面上即可

function Modal(option) {
    // 继承配置
    _.extend(this, option);
    // 缓存节点
    this.container = _.html2node(html);
    this.container.innerHTML = this.content || '';
    this.parent.appendChild(this.container);
}

提供显示和隐藏弹窗的方法

show: function() {
    _.delClassName(this.container, 'f-dn');
},

hide: function() {
    _.addClassName(this.container, 'f-dn');
    this.emit('hide');
},

到这里我们通用组件就完成了，接下来看定制化的alert弹窗组件吧

// alert弹窗html结构
let html = `<div class="m-alertmodal">
        <span class="close_btn u-icon u-icon-close"></span>
        <div class="modal_tt">
            <strong>Alert Information</strong>
        </div>
        <div class="modal_ct">
            <p class="alert_msg"></p>
            <button class="u-btn u-btn-primary submit_btn">确定</button>
        </div>
    </div>`;

首先传入html节点到 this.content ，通过原型式继承得到 AlertModal.prototype ，这里要多谢冴羽大神帮我分析原型是继承和浅拷贝的困惑，这里可以看一下，当做笔记记在小本本里。

function AlertModal(option) {
    // 传入content
    this.content = html;

    // 借调构造函数实现继承
    Modal.call(this, option);

    // 缓存节点
    this.alertMsg = this.container.querySelector('.alert_msg');
    this.submitBtn = this.container.querySelector('.submit_btn');
    this.closeBtn = this.container.querySelector('.close_btn');

    this.initModal();
}

// 通过原型式继承会导致AlertModal.prototype.constructor === Modal，需要手动指回去
AlertModal.prototype = Object.create(Modal.prototype);

这里也贴一下extend的代码：

// 属性赋值，通过浅拷贝
_.extend = function(o1, o2) {
    for (var i in o2) if (typeof o1[i] === 'undefined') {
        o1[i] = o2[i];
    }
    return o1;
};

使用 Object.create 的关系图为：

image.png

使用 extend 的关系图为：

image.png

使用 extend，我们仅仅是给 AlertModal.prototype 添加各种方法而已，就类似于 AlertModal.prototype.a = fn;
如果非要说区别的话，比如我给 Modal.prototype 添加了一个函数, 使用 Object.create 实现继承的话，alertModal 可以自动获得这个方法，而使用 extend 的方式，必须要再执行一次 _.extend(AlertModal.prototype, Modal.prototype) 才能让 alertModal 获得该方法

在这里通过Object.create方式会使 AlertModal.prototype.constructor === Modal 指回去就好了~

接着往下看，我们需要初始化alertModal组件

初始化的时注册alert弹窗事件，显示自定义内容，然后绑定事件

_.extend(AlertModal.prototype, {
    initModal: function() {
        // 触发alert弹窗
        this.on('alert', this.showMsg.bind(this));

        _.addEvent(this.closeBtn, 'click', this.hide.bind(this));
        _.addEvent(this.submitBtn, 'click', this.success.bind(this));
    },

    showMsg: function(msg) {
        this.alertMsg.innerHTML = msg;
        this.show();
    }
});

在测试页面我们提供父容器节点和触发对应的事件即可，到这里我们完成了alert弹窗的继承组件开发的一般流程，实际中考虑的内容比这多很多，这里只是简化过程，明白实现弹窗并且怎么继承组件即可。

let alert = new AlertModal({
    parent: document.body,
});

// 触发事件
alert.emit('alert', '我是Alert弹窗');

alert.on('hide', function() {
    console.log('触发hide事件')
});
alert.on('success', function() {
    console.log('触发success事件')
})

---

登录弹窗实现

有了上面alert弹窗继承的完成后，登录弹窗的继承也就变得很简单，只需要改动几行代码就可以，重复的步骤就不讲了，这里看一看代码，首先还是通过继承得到父类的方法和属性

// 继承父类Modal的原型
LoginModal.prototype = Object.create(Modal.prototype);
LoginModal.prototype.constructor = LoginModal;

初始化时注册登录弹窗并绑定相应的事件，这里由于和注册弹窗有交互，所以这里不去实现

// 初始化登录弹窗组件并绑定事件
initLoginEvent: function() {
    this.on('showLoginModal', this.show.bind(this));

    _.addEvent(this.close, 'click', this.hide.bind(this));
    _.addEvent(this.goregister, 'click',
    function() {
        this.hide();
        // 此处不实现真实的注册弹窗
        this.emit('showRegisterModal');
    }.bind(this));
    _.addEvent(this.submit, 'click', this._submit.bind(this));
}

check表单验证方法是真实项目中用到的，通过正则验证用户名和密码是否为空以及是否符合具体要求，这里贴出来仅供参考。

// 检查用户名和密码是否为空以及长度判断
check: function() {
    let isValid = true,
    flag = true;

    // 验证用户名
    flag = _.isPhone(this.userName.value) && flag;
    flag = !_.isNotEmpty(this.userName.value) && flag;
    flag ? _.delClassName(this.userName, 'error') : _.addClassName(this.userName, 'error');
    isValid = isValid && flag;

    // 验证密码
    flag = true;
    flag = !_.isNotEmpty(this.password.value) && flag;
    flag = _.pwdLength(this.password.value) && flag;
    flag ? _.delClassName(this.password, 'error') : _.addClassName(this.password, 'error');
    isValid = isValid && flag;

    isValid || (this.nError.innerText = '账号或密码错误，请输入正确密码~');

    this.showError();

    isValid ? _.addClassName(this.ErrorParent, 'f-dn') : this.showError();

    return isValid;
},

实际应用中我们检测完成后会提交到服务器上，这里为了演示省略这一步，通过触发事件了解我们登录是正确的即可。

// 提交用户信息前先阻止默认事件
// 检查cookie状态，并设置选中‘保持登录’的失效时间
_submit: function(event) {
    let that = this;
    event.preventDefault();

    let user = {
        username: that.userName.value.trim(),
        password: hex_md5(that.password.value),
        remember: !!that.remember.checked
    };

    // 这里不做真实登录，仅做一下演示
    if (that.check()) {
        console.log(user);
        that.emit('showLoginModal');
        that.hide();
        // _.ajax({
        //     url: '/api/login',
        //     method: 'POST',
        //     data: user,
        //     success: function (data) {
        //         let dataOrz = JSON.parse(data);
        //         console.log(data)
        //         if (dataOrz.code === 200) {
        //             that.hide();
        //             that.emit('login', data.result);
        //             that.lastSuc();
        //             _.setCookie('loginSuc', 'loginSuc');
        //         } else {
        //             that.hide();
        //         }
        //     },
        //     fail: function () {}
        // })
    }
}

总结

至此，我们就算完成了通过继承的方式实现弹窗组件，注意到原型式继承会改变本身的constructor属性，需要手动指回来。这里仅仅是抛砖引玉，希望你能了解思路后写出更加高可用的组件，预计后期还会写级联组件、分页器组件和上传文件等组件，难度也是逐渐增加啊，继续加油，晚安 ~