首页 > 代码库 > 下拉框插件开发 （二）
下拉框插件开发 （二）
今天有事出去了一趟，晚上加了下夜班，终于将它完成了，后续有bug，欢迎探讨。
附上：github地址 https://github.com/mapletao/downdrop
1，需求更新，完成自己想到的
对js里面的需求及每个方法要做的内容简述的描述了下并将其实现。
2.js编写
1.立即执行函数，构造一个Downdrop函数，并注册该函数，同时进行安全处理，前面的;是为了执行出错的问题
;(function(){ var Downdrop=function(opt){ if(!(this instanceof Downdrop)){ return new Downdrop(opt); } this.init(opt); }; window.Downdrop=Downdrop; })();
2.初始化函数
初始化函数主要是做5件事
1：扩展默认配置 setOpt
2： 处理默认配置 dealOpt
3： 插入下拉框组件 setHtml
4： 设置事件 setFun
5： 解除配置信息 removeOpt
3：扩展默认配置
对参数进行处理，并扩展，设置默认参数
setOpt:function(opt){ this.ulTemp=[‘<div class="downdrop">‘, ‘<div class="downdrop-header">请选择</div>‘, ‘<i class="angle"></i>‘, ‘<ul class="downdrop-con">‘, ‘</ul>‘, ‘</div>‘].join(‘‘); this.setting = { liTemp:‘<li data-val="{{val}}">{{text}}</li>‘, text:true, isHide:true, }; mapletao.extend(this.setting,opt); },
4：处理默认配置
处理列表项点击时该执行的事件，并将其保存在数组中，减少后面点击时的多重判断
dealOpt:function(){ var self=this; self.dealLiFns=[]; if(self.setting.text){ self.dealLiFns.push(function(self){ self.headerDom.innerHTML = this.innerHTML; self.headerDom.setAttribute("data-val",this.getAttribute("data-val")); }); } if(self.setting.isHide){ self.dealLiFns.push(function(self){ self.conDom.style.display = "none"; }); } if(self.setting.cb){ self.dealLiFns.push(cb); } },
5：插入下拉框组件
将下拉框html结构，并处理数据，并将数据插入到列表容器中，并保存将要用到的元素，后面就不需再去页面找了
setHtml:function(){ var self = this; self.setting.ele.innerHTML=self.ulTemp; self.setEle(); self.setList(self.setting.data); }, setList:function(data){ var self=this; self.lis=‘‘; data.forEach(function(obj){ self.lis += self.formateString(self.setting.liTemp,obj); }); self.conDom.innerHTML = self.lis; this.headerDom.innerHTML = "请选择"; }, formateString:function(str,data){ return str.replace(/\{\{(\w+)\}\}/g,function(match,key){ return typeof data[key] === undefined? ‘‘ : data[key]; }); }, setEle:function(){ var ele=this.setting.ele; this.headerDom=ele.getElementsByClassName("downdrop-header")[0]; this.conDoms=document.getElementsByClassName("downdrop-con"); this.conDom=ele.getElementsByClassName("downdrop-con")[0]; },
6：事件设置
主要对4个元素进行设置
1：ele 下拉框插件容器 setEleClick 阻止冒泡，下拉框元素里面发生的事件不被外界获取，外界操作不影响里面的操作。
2：下拉框头部 setHeaderClick 头部点击让列表显示，并将其它的隐藏
3： 下拉列表容器 setConClick 代理模式，对下拉列表容器绑定点击事件，当列表项内容重新加载时正常使用，捕获li点击事件并处理
4： document setDocClick 当点击其它地方时让所有下拉框列表内容的隐藏
setFun:function(){ this.setEleClick(); this.setHeaderClick(); this.setConClick(); this.setDocClick(); }, setEleClick:function(){ var self=this; eventUtil.bindEvent(this.setting.ele,"click",self.setDomBubble); }, setDomBubble:function(e){ eventUtil.stopPropagation(e); }, setHeaderClick:function(){ var self=this; self.dealHeaderFn=self.bindFn(self.dealHeaderFn,self); eventUtil.bindEvent(this.headerDom,"click",self.dealHeaderFn); }, dealHeaderFn:function(e,self){ self.hideDom(e,self); self.conDom.style.display = "block"; }, setConClick:function(){ var self=this; self.dealLiFn=self.bindFn(self.dealLiFn,self); eventUtil.bindEvent(this.conDom,"click",self.dealLiFn); }, dealLiFn:function(e,self){ e = eventUtil.getEvent(e); var target = eventUtil.getEventSrc(e); if(target.tagName.toLowerCase() === "li"){ self.dealLiFns.forEach(function(obj){ obj.call(target,self); }); target=null; } }, bindFn:function(fn,args){ return function(e){ fn.call(this,e,args); }; }, hideDom:function(e,self){ for(var i=0;i<self.conDoms.length;i++){ self.conDoms[i].style.display = "none"; } }, setDocClick:function(){ var self = this; Downdrop.prototype.hideDom=self.bindFn(self.hideDom,self); eventUtil.bindEvent(document,"click",self.hideDom); },
7：解除配置信息
删除一些以后不会用到的属性
removeOpt:function(){ delete this.setting; delete this.lis; delete this.ulTemp; }
8：测试
单元测试，改变参数，看看执行结果
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <title>下拉框</title> <link rel="stylesheet" type="text/css" href="css/reset.css" /> <link rel="stylesheet" type="text/css" href="css/downdrop.css" /> </head> <body> <p>默认</p> <div style="width:200px;margin-left: 20px;margin-top:10px;" id="J_test1"> </div> <p>不赋值</p> <div style="width:200px;margin-left: 20px;margin-top:10px;" id="J_test2"> </div> <p>不隐藏</p> <div style="width:200px;margin-left: 20px;margin-top:10px;" id="J_test3"> </div> <p>不赋值,不隐藏</p> <div style="width:200px;margin-left: 20px;margin-top:10px;" id="J_test4"> </div> <script src="js/common.js"></script> <script src="js/downdrop.js"></script> <script type="text/javascript"> var data=[{ "val":1, "text":"语文" },{ "val":2, "text":"数学" },{ "val":3, "text":"英语" },{ "val":4, "text":"历史" },{ "val":5, "text":"化学" },{ "val":6, "text":"生物" },{ "val":7, "text":"物理" }]; var test1={ ele:document.getElementById("J_test1"), data:data }; var obj=new Downdrop(test1); var test2={ ele:document.getElementById("J_test2"), data:data, text:false } var obj2=Downdrop(test2); var test3={ ele:document.getElementById("J_test3"), data:data, isHide:false } var obj3=new Downdrop(test3); var test4={ ele:document.getElementById("J_test4"), data:data, isHide:false, text:false }; var obj4=new Downdrop(test4); </script> </body> </html>
9：测试结果
完成！
10：结语：
首先说说在这个组件开发中遇到的坑，参数传递，事件绑定中，作用域指向会偏离，指向当前点击的事件源，可能不是你自己想要的，这里用了下参与者模式，将我需要的用参数的形式传递，还用到了call，将this指向改成我想要的。还有对事件的封装，增强了自己的代码逻辑能力。有不足的地方，还请多多见谅。后面也会不时的进行bug处理，以及优化及扩张。
下拉框插件开发 （二）
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。