js--基于面向对象的组件开发及案例
Posted seafwg
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js--基于面向对象的组件开发及案例相关的知识，希望对你有一定的参考价值。
组件的开发：多组对象之间想兄弟关系一样，代码复用的形式。
问题：
1).参数不写会报错；利用对象复制————配置参数和默认惨啊书的覆盖关系（逻辑或也可以）
2).参数特别多时会出现顺序问题；json解决
1 function Drag(id){ 2 this.obj = null; 3 this.disX = 0; 4 this.disY = 0; 5 this.settings = { //默认参数 6 toDown : function() {}, 7 toUp : function() {} 8 } 9 } 10 Drag.prototype.init = function(opts) { 11 var This = this; 12 this.obj = document.getElementById(opts.id); 13 extend(this.settings,opts);//深拷贝配置参数拷贝默认参数，解决参数顺序问题 14 this.obj.onmousedown = function(ev) { 15 var ev = ev || window.event; 16 This.FnDown(ev); 17 This.settings.toDown(); 18 document.onmousemove = function(ev) { 19 var ev = ev || window.event; 20 This.FnMove(ev); 21 } 22 document.onmouseup = function (){ 23 This.FnUp(); 24 This.settings.toUp(); 25 } 26 return false; 27 } 28 } 29 Drag.prototype.FnDown = function(ev) { 30 this.disX = ev.clientX - this.obj.offsetLeft; 31 this.disY = ev.clientY - this.obj.offsetTop; 32 } 33 Drag.prototype.FnMove = function(ev) { 34 this.obj.style.left = ev.clientX - this.disX + "px"; 35 this.obj.style.top = ev.clientY - this.disY + "px"; 36 } 37 Drag.prototype.FnUp = function() { 38 document.onmousemove = null; 39 document.onmouseup = null; 40 } 41 42 function extend(obj1,obj2) { 43 for (var attr in obj2 ) { 44 obj1[attr] = obj2[attr]; 45 } 46 } 47 var d1 = new Drag(); 48 d1.init({ //配置参数,主要配置不同的参数 49 id : "div1" 50 }); 51 var d2 = new Drag(); 52 d2.init({ 53 id : "div2", 54 toDown :function() { 55 document.title = "Wunworld"; 56 } 57 }); 58 var d3 = new Drag(); 59 d3.init({ 60 id : "div3", 61 toDown : function() { 62 document.title = "Assassin"; 63 }, 64 toUp : function() { 65 document.title = "Intelwisd"; 66 } 67 }); 68 var d4 = new Drag(); 69 d4.init({ 70 id : "div4", 71 toUp : function() { 72 document.title = "See You again!"; 73 } 74 });
html:
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style> 7 *{margin:0;padding:0;} 8 #div1{width:100px;height:100px;background:red;position: absolute;} 9 #div2{width:100px;height:100px;background:blue;position: absolute;left:100px;} 10 #div3{width:100px;height:100px;background:black;position: absolute;left:200px;} 11 #div4{width:100px;height:100px;background:green;position: absolute;left:300px;} 12 </style> 13 </head> 14 <body> 15 <div id="div1"></div> 16 <div id="div2"></div> 17 <div id="div3"></div> 18 <div id="div4"></div> 19 </body> 20 <script> 21 22 </script> 23 </html>
分析：主要是基于面向对象的思想，通过(json格式的参数形式)配置参数与默认参数之间进行深拷贝实现参数的匹配。
基于面向对象的组件开发的框架：
1 btn.onclick = function() { 2 var f1 = new Fn(); 3 f1.init({ 4 //配置参数 5 }); 6 7 } 8 9 function Fn(opts){ 10 this.settings = { 11 //默认参数 12 } 13 } 14 Fn.prototype.init = function(opts) { 15 extend(this.settings,opts); 16 } 17 function extend(obj1,obj2){ 18 for(var attr in obj2){ 19 obj1[attr] == obj2[attr]; 20 } 21 }
案例：基于面向对象的弹窗的组件的开发：
1 var aInput = document.getElementsByTagName("input"); 2 aInput[0].onclick = function() { 3 var d1 = new Dialog(); 4 d1.init({ //配置参数 5 iNum : 0, //在每个配置参数中设置一个唯一的标识 6 title : "登录" 7 }); 8 } 9 aInput[1].onclick = function() { 10 var d2 = new Dialog(); 11 d2.init({ //配置参数 12 iNum : 1, 13 w : 300, 14 h : 500, 15 dir : "right", 16 title : "公告" 17 }); 18 } 19 aInput[2].onclick = function() { 20 var d3 = new Dialog(); 21 d3.init({ //配置参数 22 iNum : 2, 23 w : 300, 24 h : 500, 25 dir : "left", 26 title : "注意", 27 mask : true 28 }); 29 } 30 function Dialog() { 31 this.dialog = null; 32 this.oMask = null; 33 this.settings = { //默认参数 34 w : 300, 35 h : 300, 36 dir : "center", 37 mask : false 38 } 39 } 40 Dialog.prototype.json = {};//加一个全局的json解决弹窗不断触发的问题 41 Dialog.prototype.init = function( opts ) { 42 extend(this.settings,opts); 43 if(this.json[opts.iNum] == undefined) { //根据json对象访问配置参数中的对象是否唯一标识设置开关 44 this.json[opts.iNum] = true; //利用开关原理解决弹窗不断触发的问题 45 } 46 if(this.json[opts.iNum]){ 47 this.FnCreate();//创建Dialog 48 this.setData();//设置数据 49 this.FnClose();//关闭弹窗 50 if(this.settings.mask){ 51 this.FnMask();//创建遮燥 52 } 53 this.json[opts.iNum] = false; 54 } 55 56 } 57 Dialog.prototype.FnCreate = function() { 58 this.dialog = document.createElement("div"); 59 this.dialog.className = "dialog"; 60 this.dialog.innerHTML = ‘<div class="diaTop"> 61 <span class="title">‘+this.settings.title+‘</span> 62 <span class="close">X</span> 63 </div> ‘; 64 document.body.appendChild( this.dialog ); 65 } 66 Dialog.prototype.setData = function() { 67 this.dialog.style.width = this.settings.w + "px"; 68 this.dialog.style.height = this.settings.h + "px"; 69 if(this.settings.dir == "center") { 70 this.dialog.style.left = (viewWidth() - this.dialog.offsetWidth)/2 + "px"; 71 this.dialog.style.top = (viewHeight() - this.dialog.offsetHeight)/2 + "px"; 72 }else if(this.settings.dir = "right") { 73 this.dialog.style.left = viewWidth() - this.dialog.offsetWidth + "px"; 74 this.dialog.style.top = viewHeight() - this.dialog.offsetHeight + "px"; 75 }else if(this.settings.dir == "left") { 76 this.dialog.style.left = 0; 77 this.dialog.style.top = viewHeight() - this.dialog.offsetHeight + "px"; 78 } 79 } 80 Dialog.prototype.FnClose = function() { 81 var close = this.dialog.getElementsByTagName("span")[1]; 82 var This = this; 83 close.onclick = function() { 84 document.body.removeChild(This.dialog); 85 if(This.settings.mask) { 86 document.body.removeChild(This.oMask); 87 } 88 This.json[This.settings.iNum] = true; //关闭时开关还原 89 } 90 } 91 Dialog.prototype.FnMask = function() { 92 this.oMask = document.createElement("div"); 93 this.oMask.id = "mask"; 94 document.body.appendChild(this.oMask); 95 this.oMask.style.width = viewWidth() + "px"; 96 this.oMask.style.height = viewHeight() + "px"; 97 } 98 function extend(obj1,obj2) { 99 for(var attr in obj2) { 100 obj1[attr] = obj2[attr]; 101 } 102 } 103 function viewWidth(){ 104 return document.documentElement.clientWidth; 105 } 106 function viewHeight(){ 107 return document.documentElement.clientHeight; 108 }
html:
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style> 7 *{margin:0;padding:0;} 8 .dialog{position:absolute;border: solid 1px #000;z-index: 2;} 9 .dialog .diaTop{width:100%;height:25px;background:black;color:white;} 10 .dialog .diaTop .title{margin-left: 100px;} 11 .dialog .diaTop .close{float:right;margin-right:10px;} 12 #mask{background: #000; filter:alpha(opacity=50);opacity: .5;z-index: 1;} 13 </style> 14 </head> 15 <body> 16 <input type="button" value="btn1"> 17 <input type="button" value="btn2"> 18 <input type="button" value="btn3"> 19 <!-- <div class="dialog"> 20 <div class="diaTop"> 21 <span class="title">title</span> 22 <span class="close">X</span> 23 </div> 24 </div> --> 25 <!-- <div id="mask"></div> --> 26 </body> 27 <script> 28 29 </script> 30 </html>
以上是关于js--基于面向对象的组件开发及案例的主要内容，如果未能解决你的问题，请参考以下文章
JavaScript中的面向对象编程，详解原型对象及prototype，constructor，proto，内含面向对象编程详细案例（烟花案例）