js--基于面向对象的组件开发及案例

组件的开发：多组对象之间想兄弟关系一样，代码复用的形式。

问题：
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 >
26 </body>
27 <script>
28 
29 </script>
30 </html>

js--基于面向对象的组件开发及案例

相关推荐