组件的开发：多组对象之间想兄弟关系一样，代码复用的形式。
问题：
1).参数不写会报错；利用对象复制————配置参数和默认惨啊书的覆盖关系（逻辑或也可以）
2).参数特别多时会出现顺序问题；json解决
function Drag(id){ this.obj = null; this.disX = 0; this.disY = 0; this.settings = { //默认参数 toDown : function() {}, toUp : function() {} } } Drag.prototype.init = function(opts) { var This = this; this.obj = document.getElementById(opts.id); extend(this.settings,opts);//深拷贝配置参数拷贝默认参数，解决参数顺序问题 this.obj.onmousedown = function(ev) { var ev = ev || window.event; This.FnDown(ev); This.settings.toDown(); document.onmousemove = function(ev) { var ev = ev || window.event; This.FnMove(ev); }; document.onmouseup = function (){ This.FnUp(); This.settings.toUp(); }; return false; } }; Drag.prototype.FnDown = function(ev) { this.disX = ev.clientX - this.obj.offsetLeft; this.disY = ev.clientY - this.obj.offsetTop; }; Drag.prototype.FnMove = function(ev) { var L = ev.clientX - this.disX; var T = ev.clientY - this.disY; if (L < 0) { L = 0; } else if (L > document.documentElement.clientWidth - this.obj.offsetWidth) { L = document.documentElement.clientWidth - this.obj.offsetWidth; } if (T < 0) { T = 0; } else if (T > document.documentElement.clientHeight - this.obj.offsetHeight) { T = document.documentElement.clientHeight - this.obj.offsetHeight; } this.obj.style.left = L+ "px"; this.obj.style.top = T+ "px"; }; Drag.prototype.FnUp = function() { document.onmousemove = null; document.onmouseup = null; }; function extend(obj1,obj2) { for (var attr in obj2 ) { obj1[attr] = obj2[attr]; } } //初始化： var d1 = new Drag(); d1.init({ //配置参数,主要配置不同的参数 id : "drag1" }); var d2 = new Drag(); d1.init({ //配置参数,主要配置不同的参数 id : "drag2" }); var d3 = new Drag(); d1.init({ //配置参数,主要配置不同的参数 id : "drag3" }); var d4 = new Drag(); d1.init({ //配置参数,主要配置不同的参数 id : "drag4" });
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>