組件的開發：多組對象之間想兄弟關系一樣，代碼復用的形式。
問題：
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>