组件的开发：多组对象之间想兄弟关系一样，代码复用的形式。
问题：
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--基于面向对象的组件开发及案例
原文地址：http://www.cnblogs.com/intelwisd/p/7682614.html