基于原生JS封装的Modal对话框插件

基于原生JS封装Modal对话框插件

原生JS封装Modal对话框插件，个人用来学习原理与思想，只有简单的基本框架的实现，可在此基础上添加更多配置项

API配置

		//基本语法
    let modal = ModalPlugin({
   
        //提示的标题信息
        title:'系统提示',
        //内容模板 字符串 /模板字符串/DOM元素对象
        template:null,
        //自定义按钮信息
        buttons:[{
   
            //按钮文字
            text:'确定',
            click(){
   
                //this:当前实例
            }
        }]
    })
    modal.open()//=>打开
    modal.close()//=>关闭

//基于发布订阅,实现回调函数的监听
    modal.on('input/open/close/dragstart/dragmove/dragend',[func])
		modal.fire(...)
    modal.off(...)

Modal插件核心功能的开发

导出

(function () {
   
    function ModalPlugin() {
   
        return 
    }

    // 浏览器直接导入,这样的方法是暴露到全局的
    window.ModalPlugin = ModalPlugin;
    //如果还需要支持ES6Module/CommonJS模块导入规范,在react项目当中,vue项目当中也想用
    if (typeof module !== 'undefined' && module.exports !== 'undefined') {
   //如果module不存在,typeof不会出错,会返回undefined
        module.exports = ModalPlugin;//CommonJS规范,只有在webpack环境下才支持
    }
})()

使用对象和函数创建实例

想使用创建对象的方式new ModalPlugin()创建实例或当做普通函数执行ModalPlugin(),创建实例,需要这样做

(function () {
   
    function ModalPlugin() {
   
        return new init()
    }
//想使用创建对象的方式`new ModalPlugin()`创建实例或当做普通函数执行`ModalPlugin()`,创建实例,需要这样做

    //类的原型: 公共的属性方法
    ModalPlugin.prototype = {
   
        constructor: ModalPlugin
    }

    function init() {
   }
    init.prototype = ModalPlugin.prototype;
    // 浏览器直接导入,这样的方法是暴露到全局的
    window.ModalPlugin = ModalPlugin;
    //如果还需要支持ES6Module/CommonJS模块导入规范,在react项目当中,vue项目当中也想用
    if (typeof module !== 'undefined' && module.exports !== 'undefined') {
   //如果module不存在,typeof不会出错,会返回undefined
        module.exports = ModalPlugin;//CommonJS规范,只有在webpack环境下才支持
    }
})()

配置项

 //封装插件的时候,需要支持很多配置项,有的配置项不传递有默认值,此时我们千万不要一个个定义形参,用对象的方式传形参,好处是可以不传,而且可以不用考虑顺序
    function ModalPlugin(options) {
   
        return new init(options)
    }
//想使用创建对象的方式创建实例new ModalPlugin()或当做普通函数执行也能创建实例ModalPlugin(),需要这样做
    ModalPlugin.prototype = {
   
        constructor: ModalPlugin
    }

    function init(options) {
   
        //接下来将所有的操作全部写在init里面
        //参数初始化:传递进来的配置项替换默认的配置项
        options = Object.assign({
   
            title:'系统提示',
            template:null,
            frag:true,
            buttons:[{
   
                text:'确定',
                click(){
   
                }
            }]
        },options)

    }

命令模式init()执行逻辑

创建DOM

/