基于原生JS封装的Modal对话框插件的示例代码
基于原生JS封装Modal对话框插件，具体内容如下所示：
原生JS封装Modal对话框插件，个人用来学习原理与思想，只有简单的基本框架的实现，可在此基础上添加更多配置项
API配置
//基本语法
letmodal=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(){
functionModalPlugin(){
return
}
//浏览器直接导入,这样的方法是暴露到全局的
window.ModalPlugin=ModalPlugin;
//如果还需要支持ES6Module/CommonJS模块导入规范,在react项目当中,vue项目当中也想用
if(typeofmodule!=='undefined'&&module.exports!=='undefined'){//如果module不存在,typeof不会出错,会返回undefined
module.exports=ModalPlugin;//CommonJS规范,只有在webpack环境下才支持
}
})()
使用对象和函数创建实例
想使用创建对象的方式newModalPlugin()创建实例或当做普通函数执行ModalPlugin(),创建实例,需要这样做
(function(){
functionModalPlugin(){
returnnewinit()
}
//想使用创建对象的方式`newModalPlugin()`创建实例或当做普通函数执行`ModalPlugin()`,创建实例,需要这样做
//类的原型:公共的属性方法
ModalPlugin.prototype={
constructor:ModalPlugin
}
functioninit(){}
init.prototype=ModalPlugin.prototype;
//浏览器直接导入,这样的方法是暴露到全局的
window.ModalPlugin=ModalPlugin;
//如果还需要支持ES6Module/CommonJS模块导入规范,在react项目当中,vue项目当中也想用
if(typeofmodule!=='undefined'&&module.exports!=='undefined'){//如果module不存在,typeof不会出错,会返回undefined
module.exports=ModalPlugin;//CommonJS规范,只有在webpack环境下才支持
}
})()
配置项
//封装插件的时候,需要支持很多配置项,有的配置项不传递有默认值,此时我们千万不要一个个定义形参,用对象的方式传形参,好处是可以不传,而且可以不用考虑顺序
functionModalPlugin(options){
returnnewinit(options)
}
//想使用创建对象的方式创建实例newModalPlugin()或当做普通函数执行也能创建实例ModalPlugin(),需要这样做
ModalPlugin.prototype={
constructor:ModalPlugin
}
functioninit(options){
//接下来将所有的操作全部写在init里面
//参数初始化:传递进来的配置项替换默认的配置项
options=Object.assign({
title:'系统提示',
template:null,
frag:true,
buttons:[{
text:'确定',
click(){
}
}]
},options)
}
命令模式init()执行逻辑
创建DOM
//创建DOM结构
creatDom(){
//如果用creatElement插入DOM,每一次动态插入,都会导致DOM的回流,非常消耗性能,所以最外面使用createElement创建,内部使用字符串的方式拼写进去,创建好了之后放到最外层的容器当中,只引起一次回流
letfrag=document.createDocumentFragment()
letdpnDialog=document.createElement('div')
dpnDialog.className='dpn-dialog'
dpnDialog.innerHTML=`
系统温馨提示