前端小白之每天学习记录----js简单的组件封装
设计模式:是解决问题的模板
关于设计模式,可以阅读汤姆大叔的博文http://www.cnblogs.com/TomXu/archive/2011/12/15/2288411.html
这里简单介绍两种设计模式:
1.单例模式:单例就是保证一个类只有一个实例
eg:在JavaScript里,实现单例的方式有很多种,其中最简单的一个方式是使用对象字面量的方法,其字面量里可以包含大量的属性和方法:
1 2 3 4 5 6 7 | var people = { name: "lxb" , age: "22" , eat: function () { console.log( 'eat' ); } }; |
2.工厂模式:建造类型的模式, 重点是创造对象
eg:可以创建许多有相同属性,属性的值不同的对象:
1 2 3 4 5 6 7 8 9 | function CreateObj( name, age ){ var obj = new Object(); obj.name = name; obj.age = age; return obj; } var o1 = CreateObj( xx, xx ); var o2 = CreateObj( xx, xx ); |
组件:许多插件组合在一起
想要封装组件,首先要先搭建插件
比如现在我们要搭建一个警告框插件
警告框插件:
1.整体架构准备
第一步:定义一个警告框构造函数
第二步:给这个构造函数加上方法
方法1:显示警告框
方法2:隐藏警告框
第三步:把构造函数实例化,并调用显示方法显示警告框
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 | <!DOCTYPE html> <html lang= "en" > <head> <meta charset= "UTF-8" > <meta name= "viewport" content= "width=device-width, initial-scale=1.0" > <meta http-equiv= "X-UA-Compatible" content= "ie=edge" > <title>Document</title> <script> //第一步:定义一个警告框构造函数 var popAlert = function (opt) { //opt参数为外部可定制参数集合 this .opt = opt || {}; //未传参时默认为空 }<br> //第二步: //显示警告框 popAlert.prototype.show = function () { var oDiv = document.createElement( "div" ); //新建一个div oDiv.setAttribute( 'class' , 'alert' ); //为div添加类名alert document.body.appendChild(oDiv); //把div输出到body } //隐藏警告框 popAlert.prototype.hide = function () { }<br> 第三步: //测试:F12查看 window.onload = function () { var oAlertSuccess = new popAlert(); //实例化 oAlertSuccess.show(); //显示 } </script> </head> <body> </body> </html> |
以上代码会在body创建一个div
2.警告框插件完成
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 | <! DOCTYPE html> < html lang="en"> < head > < meta charset="UTF-8"> < meta name="viewport" content="width=device-width, initial-scale=1.0"> < meta http-equiv="X-UA-Compatible" content="ie=edge"> < title >Document</ title > <!-- 从bootstrap复制的警告款样式 --> <!-- <link rel="stylesheet" href="./css/layout.css"> --> <!-- 或者直接用bootstrap样式 --> < link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.css"> < script > //定义一个警告框构造函数 var popAlert = function (opt) { this.opt = opt || {}; } //显示警告框 popAlert.prototype.show = function () { //新建div var oDiv = document.createElement("div"), that = this, //that 保存构造函数构造的实例对象 aClose; //添加类名 this.opt['class']?// 判断有无外部参数class oDiv.classList.add( 'alert', this.opt['class']) :oDiv.classList.add( 'alert',"alert-info");//外部没有传参数用默认的 //为div添加内容 oDiv.innerHTML = "< a href='javascript:;' class='close'>x</ a >"; //添加一个x的关闭标志 oDiv.innerHTML += this.opt['content'] || '请添加内容'; //添加外部指定内容 //把div输出到body下 document.body.appendChild(oDiv); // 为所有x关闭标志绑定点击事件(重复遍历,在后面会改正) aClose = document.querySelectorAll(".alert > .close"); aClose.forEach(function( ele ){ ele.addEventListener( 'click', function(){ that.hide( this.parentNode ); //用构造函数的隐藏方法隐藏点击的关闭标志的父节点(即整个警告框) }); }); } //隐藏警告框 popAlert.prototype.hide = function ( obj ) { obj.style.display = 'none'; } //测试: window.onload = function () { var oAlertkong = new popAlert(); oAlertkong.show(); var oAlertkong2 = new popAlert({ content: '这是默认样式', // class: 'alert-success' }); oAlertkong2.show(); var oAlertSuccess = new popAlert({ content: '这是成功提示', class: 'alert-success' }); oAlertSuccess.show(); var oAlertWarning = new popAlert({ content: '这是警告提示', class: 'alert-warning' }); oAlertWarning.show(); var oAlertInfo = new popAlert({ content: '这是信息提示', class: 'alert-info' }); oAlertInfo.show(); var oAlertDanger = new popAlert({ content: '这是危险提示', class: 'alert-danger' }); oAlertDanger.show(); } </ script > </ head > < body > </ body > </ html > |
3.把警告框插件(popAlert)封装在组件(module)里面
分装好的js部分(plugin.js):
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 | ; ( function (window, undefined) { var module = {}; //定义组件 //插件1 var popAlert = function (opt) { this .opt = opt || {}; } // 输出 popAlert.prototype.show = function () { var oDiv = document.createElement( "div" ), that = this , aClose; this .opt[ 'class' ] ? oDiv.classList.add( 'alert' , this .opt[ 'class' ]) : oDiv.classList.add( 'alert' , "alert-info" ); oDiv.innerHTML = "<a href='javascript:;' class='close'>x</a>" ; oDiv.innerHTML += this .opt[ 'content' ] || '请添加内容' ; document.body.appendChild(oDiv); // 绑定事件 aClose = document.querySelectorAll( ".alert > .close" ); aClose.forEach( function (ele) { ele.addEventListener( 'click' , function () { that.hide( this .parentNode); }); }); } popAlert.prototype.hide = function (obj) { obj.style.display = 'none' ; }; module[ 'popAlert' ] = popAlert; //为组件添加插件一 window.module = module; //暴露组件到外部 })(window, undefined); |
测试输出的html部分:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 | <! DOCTYPE html> < html lang="en"> < head > < meta charset="UTF-8"> < meta name="viewport" content="width=device-width, initial-scale=1.0"> < meta http-equiv="X-UA-Compatible" content="ie=edge"> < title >Document</ title > <!-- <link rel="stylesheet" href="./css/layout.css"> --> < link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.css"> < script src="./js/plugin.js"></ script > < script > //封装在plugin.js里面 window.onload = function () { var oAlertSuccess = new module.popAlert({ content: '这是成功提示', class: 'alert-success' }); oAlertSuccess.show(); var oAlertWarning = new module.popAlert({ content: '这是警告提示', class: 'alert-warning' }); oAlertWarning.show(); var oAlertInfo = new module.popAlert({ content: '这是信息提示', class: 'alert-info' }); oAlertInfo.show(); var oAlertDanger = new module.popAlert({ content: '这是危险提示', class: 'alert-danger' }); oAlertDanger.show(); } </ script > </ head > < body > </ body > </ html > |
模态框插件+警告框插件:(新建plugin2.js)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 | ; ( function (window, undefined) { var module = {}; //定义组件 //插件1:警告框 var popAlert = function (opt) { this .opt = opt || {}; }; popAlert.prototype.show = function () { var oDiv = document.createElement( "div" ), that = this , aClose; this .opt[ 'class' ] ? oDiv.classList.add( 'alert' , this .opt[ 'class' ]) : oDiv.classList.add( 'alert' , "alert-info" ); oDiv.innerHTML = "<a href='javascript:;' class='close'>x</a>" ; oDiv.innerHTML += this .opt[ 'content' ] || '请添加内容' ; document.body.appendChild(oDiv); var that = this ; aClose = document.querySelectorAll( ".alert > .close" ); aClose.forEach( function (ele) { ele.addEventListener( 'click' , function () { that.hide( this .parentNode); }); }); }; popAlert.prototype.hide = function (obj) { obj.style.display = 'none' ; }; //插件2:模态框 var popModal = function (opt) { this .opt = opt || {}; }; //显示 popModal.prototype.show = function () { var that = this ; var modalHtml = "<div class='modal fade'>" ; //进入的方式:飞入 modalHtml += "<div class='modal-dialog'>" ; //布局 modalHtml += "<div class='modal-content'>" ; //模态框盒子 //标题 modalHtml += "<div class='modal-header'>" ; modalHtml += "<button type='button' class='close'>x</button>" ; modalHtml += "<h4 class='modal-title'>" + ( this .opt[ 'title' ] || '可定制title标题' ) + "</h4>" modalHtml += "</div>" ; //内容 modalHtml += "<div class='modal-body'>" ; modalHtml += this .opt[ 'content' ] || '可定制content内容' ; modalHtml += "</div>" ; // 底部内容 modalHtml += "<div class='modal-footer'>" ; modalHtml += this .opt[ 'footer' ] || '可定制footer底部内容' ; modalHtml += "</div>" ; //尾部标签 modalHtml += "</div>" ; modalHtml += "</div>" ; modalHtml += "</div>" ; //按钮 modalHtml += "<h2>" ; modalHtml += this .opt[ 'tip' ] || "可定制tip提示信息" ; modalHtml += "</h2><button class='btn btn-primary btn-lg' data-toggle='modal' data-target='#myModal'>" ; modalHtml += this .opt[ 'btn' ] || "可定制btn按钮文本" ; //输出到bady var oldHTML = document.body.innerHTML; //保存旧的文档 document.body.innerHTML = oldHTML + modalHtml; //添加插件 //绑定x点击事件 关闭框 var that = this ; var oClose = document.querySelector( ".modal .close" ) oClose.addEventListener( "click" , function () { that.hide( this ); }); //绑定显示事件 var open = document.querySelector( ".btn[data-toggle=modal]" ); open.onclick = function () { var oModal = document.querySelector( ".modal" ); oModal.style.display = 'block' ; oModal.classList.add( 'in' ); //遮罩层 var backdrop = document.createElement( "div" ); //新建一个div backdrop.setAttribute( 'class' , 'modal-backdrop in' ); //为div添加类名 document.body.appendChild(backdrop); } } popModal.prototype.hide = function (obj) { var objParents = findNode(obj, "modal" ); //当前.close的父辈元素 .modal objParents.style.display = 'none' ; //隐藏模态 document.body.removeChild(document.querySelector( ".modal-backdrop" )); // document.querySelector(".modal-backdrop").style.display = "none"; } //公共的方法: //找到关闭按钮的指定父节点 function findNode(obj, classname) { var aClass; var regExp = new RegExp(classname); while (obj = obj.parentNode) { aClass = Array.prototype.slice.call(obj.classList); //类数组--->数组 if (aClass.length && regExp.test(aClass[0]) && aClass[0].length == 5) { break ; } } return obj; } //把插件存入组件 module = { popAlert: popAlert, popModal: popModal }; window.module = module; //把组件暴露到外部 })(window, undefined); |
测试使用模态框:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | <! DOCTYPE html> < html lang="en"> < head > < meta charset="UTF-8"> < meta name="viewport" content="width=device-width, initial-scale=1.0"> < meta http-equiv="X-UA-Compatible" content="ie=edge"> < title >Document</ title > < link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.css"> < script src="./js/plugin2.js"></ script > < script > window.onload = function () { var oModal = new module.popModal({ // title: '你好', // content: '这是模态框的内容', // footer:"作者:你好啊", // tip:"下面这个按钮点一下", // btn:"点我啊" }); oModal.show(); } </ script > </ head > < body > </ body > </ html > |
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· .NET Core GC压缩(compact_phase)底层原理浅谈
· 现代计算机视觉入门之:什么是图片特征编码
· .NET 9 new features-C#13新的锁类型和语义
· Linux系统下SQL Server数据库镜像配置全流程详解
· 现代计算机视觉入门之:什么是视频
· Sdcb Chats 技术博客:数据库 ID 选型的曲折之路 - 从 Guid 到自增 ID,再到
· .NET Core GC压缩(compact_phase)底层原理浅谈
· Winform-耗时操作导致界面渲染滞后
· Phi小模型开发教程:C#使用本地模型Phi视觉模型分析图像,实现图片分类、搜索等功能
· 语音处理 开源项目 EchoSharp