基于原生JS封装的Modal对话框插件的示例代码

基于原生JS封装Modal对话框插件，具体内容如下所示：

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

API配置

1. //基本语法
2. let modal = ModalPlugin({
3. //提示的标题信息
4. title:'系统提示',
5. //内容模板 字符串 /模板字符串/DOM元素对象
6. template:null,
7. //自定义按钮信息
8. buttons:[{
9. //按钮文字
10. text:'确定',
11. click(){
12. //this:当前实例
13. }
14. }]
15. })
16. modal.open()//=>打开
17. modal.close()//=>关闭
18.  
19. //基于发布订阅,实现回调函数的监听
20. modal.on('input/open/close/dragstart/dragmove/dragend',[func])
21. modal.fire(...)
22. modal.off(...)

Modal插件核心功能的开发

导出

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

使用对象和函数创建实例

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

1. (function () {
2. function ModalPlugin() {
3. return new init()
4. }
5. //想使用创建对象的方式`new ModalPlugin()`创建实例或当做普通函数执行`ModalPlugin()`,创建实例,需要这样做
6.  
7. //类的原型: 公共的属性方法
8. ModalPlugin.prototype = {
9. constructor: ModalPlugin
10. }
11.  
12. function init() {}
13. init.prototype = ModalPlugin.prototype;
14. // 浏览器直接导入,这样的方法是暴露到全局的
15. window.ModalPlugin = ModalPlugin;
16. //如果还需要支持ES6Module/CommonJS模块导入规范,在react项目当中,vue项目当中也想用
17. if (typeof module !== 'undefined' && module.exports !== 'undefined') {//如果module不存在,typeof不会出错,会返回undefined
18. module.exports = ModalPlugin;//CommonJS规范,只有在webpack环境下才支持
19. }
20. })()

配置项

1. //封装插件的时候,需要支持很多配置项,有的配置项不传递有默认值,此时我们千万不要一个个定义形参,用对象的方式传形参,好处是可以不传,而且可以不用考虑顺序
2. function ModalPlugin(options) {
3. return new init(options)
4. }
5. //想使用创建对象的方式创建实例new ModalPlugin()或当做普通函数执行也能创建实例ModalPlugin(),需要这样做
6. ModalPlugin.prototype = {
7. constructor: ModalPlugin
8. }
9.  
10. function init(options) {
11. //接下来将所有的操作全部写在init里面
12. //参数初始化:传递进来的配置项替换默认的配置项
13. options = Object.assign({
14. title:'系统提示',
15. template:null,
16. frag:true,
17. buttons:[{
18. text:'确定',
19. click(){
20. }
21. }]
22. },options)
23.  
24. }

命令模式init()执行逻辑

创建DOM

1. //创建DOM结构
2. creatDom(){
3. //如果用creatElement插入DOM,每一次动态插入,都会导致DOM的回流,非常消耗性能,所以最外面使用createElement创建,内部使用字符串的方式拼写进去,创建好了之后放到最外层的容器当中,只引起一次回流
4. let frag = document.createDocumentFragment()
5. let dpnDialog = document.createElement('div')
6. dpnDialog.className = 'dpn-dialog'
7. dpnDialog.innerHTML = `
8. <div class="dpn-title">
9. 系统温馨提示
10. <i class="dpn-close"></i>
11. </div>
12. <div class="dpn-content">
13.  
14. </div>
15. <div class="dpn-handle">
16. <button>确定</button>
17. <button>取消</button>
18. </div>`
19. frag.appendChild(dpnDialog)
20.  
21. let dpnModel = document.createElement('div')
22. dpnModel.className = 'dpn-model'
23. frag.appendChild(dpnModel)
24. document.body.appendChild(frag)//使用frag只需要往页面中插入一次,减少回流次数
25. frag = null
26.  
27. this.dpnDialog = dpnDialog//挂载到实例上,便于其他方法的控制隐藏,并且是私有的实例,
28. this.dpnModel = dpnModel
29. }

对参数进行处理

1. creatDom() {
2. let {title, template, buttons} = this.options
3. //如果用creatElement插入DOM,每一次动态插入,都会导致DOM的回流,非常消耗性能,所以最外面使用createElement创建,内部使用字符串的方式拼写进去,创建好了之后放到最外层的容器当中,只引起一次回流
4. let frag = document.createDocumentFragment()
5. let dpnDialog = document.createElement('div')
6. dpnDialog.className = 'dpn-dialog'
7. dpnDialog.innerHTML = `
8. <div class="dpn-title">
9. ${title}
10. <i class="dpn-close">X</i>
11. </div>
12. <div class="dpn-content">
13. ${template && typeof template === 'object' && template.nodeType === 1
14. ? template.outerHTML
15. : template}
16. </div>
17. ${buttons.length > 0
18. ? `<div class="dpn-handle">
19. ${buttons.map((item, index) => {
20. return `<button index="${index}">${item.text}</button>`
21. }).join('')}
22. </div>`
23. : ''
24. }
25. `
26. frag.appendChild(dpnDialog)
27.  
28. let dpnModel = document.createElement('div')
29. dpnModel.className = 'dpn-model'
30. frag.appendChild(dpnModel)
31. document.body.appendChild(frag)//使用frag只需要往页面中插入一次,减少回流次数
32. frag = null
33.  
34. this.dpnDialog = dpnDialog//挂载到实例上,便于其他方法的控制隐藏,并且是私有的实例,
35. this.dpnModel = dpnModel
36. },

控制隐藏与显示

1. //控制他显示
2. open() {
3. this.dpnDialog.style.display = 'block'
4. this.dpnModel.style.display = 'block'
5. },
6. //控制隐藏
7. close() {
8. this.dpnDialog.style.display = 'none'
9. this.dpnModel.style.display = 'none'
10. }

基于事件委托处理点击事件

1. init() {
2. this.creatDom()
3.  
4. //基于事件委托,实现点击事件的处理
5. this.dpnDialog.addEventListener('click', (ev)=>{
6. let target = ev.target,
7. {tagName,className}= target
8. console.log([target])
9. //点击的关闭按钮
10. if(tagName==='I'&&className.includes('dpn-close')){
11. this.close()
12. return
13. }
14. //点击的是底部按钮
15. if(tagName==='BUTTON' && target.parentNode.className.includes('dpn-handle')){
16. let index = target.getAttribute('index')
17. //让传过来的函数执行,并且函数中的this还必须是当前实例
18. let func = this.options.buttons[index]['click']
19. if(typeof func==='function'){
20. func.call(this)
21. }
22. return
23. }
24.  
25. })
26. },

基于发布订阅实现回调函数的监听(生命周期)

//使用:

完整代码

1. //modalplugin.js
2. (function () {
3. //封装插件的时候,需要支持很多配置项,有的配置项不传递有默认值,此时我们千万不要一个个定义形参,用对象的方式传形参,好处是可以不穿,而且可以不用考虑顺序
4. function ModalPlugin(options) {
5. return new init(options)
6. }
7.  
8. //想使用创建对象的方式创建实例new ModalPlugin()或当做普通函数执行也能创建实例ModalPlugin(),需要这样做
9. ModalPlugin.prototype = {
10. constructor: ModalPlugin,
11. //相当于大脑,可以控制先干什么在干什么(命令模式)
12. init() {
13. //创建DOM结构
14. this.creatDom()
15.  
16. //基于事件委托,实现点击事件的处理
17. this.dpnDialog.addEventListener('click', (ev) => {
18. let target = ev.target,
19. {tagName, className} = target
20. //点击的关闭按钮
21. if (tagName === 'I' && className.includes('dpn-close')) {
22. this.close()
23. return
24. }
25. //点击的是底部按钮
26. if (tagName === 'BUTTON' && target.parentNode.className.includes('dpn-handle')) {
27. let index = target.getAttribute('index')
28. //让传过来的函数执行,并且函数中的this还必须是当前实例
29. let func = this.options.buttons[index]['click']
30. if (typeof func === 'function') {
31. func.call(this)
32. }
33. return
34. }
35. })
36. this.fire('init')//通知init方法执行成功
37. },
38. //创建DOM结构
39. creatDom() {
40. let {title, template, buttons} = this.options
41. //如果用creatElement插入DOM,每一次动态插入,都会导致DOM的回流,非常消耗性能,所以最外面使用createElement创建,内部使用字符串的方式拼写进去,创建好了之后放到最外层的容器当中,只引起一次回流
42. let frag = document.createDocumentFragment()
43. let dpnDialog = document.createElement('div')
44. dpnDialog.className = 'dpn-dialog'
45. dpnDialog.innerHTML = `
46. <div class="dpn-title">
47. ${title}
48. <i class="dpn-close">X</i>
49. </div>
50. <div class="dpn-content">
51. ${template && typeof template === 'object' && template.nodeType === 1
52. ? template.outerHTML
53. : template}
54. </div>
55. ${buttons.length > 0
56. ? `<div class="dpn-handle">
57. ${buttons.map((item, index) => {
58. return `<button index="${index}">${item.text}</button>`
59. }).join('')}
60. </div>`
61. : ''
62. }
63. `
64. frag.appendChild(dpnDialog)
65.  
66. let dpnModel = document.createElement('div')
67. dpnModel.className = 'dpn-model'
68. frag.appendChild(dpnModel)
69. document.body.appendChild(frag)//使用frag只需要往页面中插入一次,减少回流次数
70. frag = null
71.  
72. this.dpnDialog = dpnDialog//挂载到实例上,便于其他方法的控制隐藏,并且是私有的实例,
73. this.dpnModel = dpnModel
74. },
75. //控制他显示
76. open() {
77. this.dpnDialog.style.display = 'block'
78. this.dpnModel.style.display = 'block'
79. this.fire('open')//通知open方法执行成功
80. },
81. //控制隐藏
82. close() {
83. this.dpnDialog.style.display = 'none'
84. this.dpnModel.style.display = 'none'
85. this.fire('close')//通知close方法执行成功
86. },
87. //on向事件池中订阅方法
88. on(type, func) {
89. let arr = this.pond[type]
90. if(arr.includes(func)) return
91. arr.push(func)
92. },
93. //通知事件池中的方法执行
94. fire(type) {
95. let arr = this.pond[type]
96. arr.forEach(item => {
97. if(typeof item ==='function'){
98. item.call(this)
99. }
100. })
101. }
102.  
103. }
104.  
105. function init(options) {
106. //接下来将所有的操作全部写在init里面
107. //参数初始化:传递进来的配置项替换默认的配置项
108. options = Object.assign({
109. title: '系统提示',
110. template: null,
111. frag: true,
112. buttons: [{}]
113. }, options)
114. //把信息挂载到实例上: 在原型的各个方法中,只要this是实例,都可以调用到这些信息
115. this.options = options;
116. this.pond = {
117. init: [],
118. close: [],
119. open: []
120. }
121. this.init()
122. }
123.  
124. init.prototype = ModalPlugin.prototype;
125. // 浏览器直接导入,这样的方法是暴露到全局的
126. window.ModalPlugin = ModalPlugin;
127. //如果还需要支持ES6Module/CommonJS模块导入规范,在react项目当中,vue项目当中也想用
128. if (typeof module !== 'undefined' && module.exports !== 'undefined') {//如果module不存在,typeof不会出错,会返回undefined
129. module.exports = ModalPlugin;//CommonJS规范,只有在webpack环境下才支持
130. }
131. })()

使用

使用时需要引入modalpugin.js和modalpugin.css

使用示例1:

1. //使用:
2. const modal1 = ModalPlugin({
3. //提示的标题信息
4. title: '系统提示',
5. //内容模板 字符串 /模板字符串/DOM元素对象
6. template: null,
7. //自定义按钮信息
8. buttons: [{
9. //按钮文字
10. text: '确定',
11. click() {
12. //this:当前实例
13. this.close()
14. }
15. }, {
16. //按钮文字
17. text: '取消',
18. click() {
19. //this:当前实例
20. this.close()
21. },
22.  
23. }]
24. })
25. modal1.on('open',()=>{
26. console.log('我被打开了1')
27. })
28. modal1.on('open',()=>{
29. console.log('我被打开了2')
30. })
31. modal1.on('close',()=>{
32. console.log('我被关闭了')
33. })
34. modal1.open()

使用示例2:

github

完整代码github

到此这篇关于基于原生JS封装的Modal对话框插件的示例代码的文章就介绍到这了,更多相关JS封装Modal对话框插件内容请搜索服务器之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持服务器之家！

原文链接：https://www.cnblogs.com/mttwind/archive/2020/09/08/13636178.html