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 id="mask"></div> -->
26 </body>
27 <script>
28
29 </script>
30 </html>
js--基于面向对象的组件开发及案例的更多相关文章
- 原生js使用面向对象的方法开发选项卡实例教程
本教程通过js面向对象的方法来封装一个选项卡的实例,在实例中讲解js的面向对象如何实现功能. 一般封装好的选项卡程序,只需要一个div元素即可.其它元素都是通过json数据来生成,所以封装好的选项卡实 ...
- React组件开发经典案例--todolist
点开查看代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <me ...
- 基于VUE,VUX组件开发的网易新闻页面搭建过程
根据妙味课堂上的一个教程练习总结,供自己复习用 一.功能介绍 一个网易新闻客户端的浏览页面,通过网易新闻的api接口实时获取新闻数据,用vux搭建样式框架,以轮播图,文字滚动,图文列表等形式把内容展示 ...
- Ext.js入门：常用组件与综合案例（七）
一:datefield简单示例 二:timefield简单示例 三:numberfield简单示例 四:FormPanel提交 datefield简单示例: <html xmlns=&quo ...
- JS 基于面向对象的 轮播图1
---恢复内容开始--- 1 'use strict' 2 function Tab(id){ 3 if(!id)return; 4 this.oBox = document.getElementBy ...
- JS 基于面向对象的 轮播图2
<script> // 函数不能重名, --> 子函数 // is defined function --> 函数名是否写错了 function AutoTab(id) { T ...
- 基于Lumisoft.NET组件的SMTP账号登陆检测
在邮件处理的方面,Lumisoft.NET可以说是非常不错的一个选择,我在前面几篇文章中都介绍过这个组件. 基于Lumisoft.NET组件开发碰到乱码等一些问题的解决 基于Lumisoft.NET组 ...
- 基于Lumisoft.NET组件，使用IMAP协议收取邮件
在早期一直使用Lumisoft.NET组件来进行邮件的处理查找,对于邮件的处理非常方便,之前在随笔<基于Lumisoft.NET组件的POP3邮件接收和删除操作>中也介绍过基于POP3和S ...
- js面向对象（三）---组件开发
一.对象的多种表现形式 1.提高对象的复用性 2.如何配置参数和默认参数 不知道该怎么描述,就直接上代码吧,下面做了2个例子,重点看整个组件的大体结构 用组件的方式做拖拽窗口,你可以狠狠的点击这里进行 ...
随机推荐
- tf.cast(ndarray,dtype)
转化为指定的类型,一般是将bool类型转化为其他的数据类型,例如:tf.float32
- 利用中间件 mysql_proxy 完成 mysql 的负载均衡和读写分离
安装 mysql_proxy cd /usr/local/src wget http://mysql.cdpa.nsysu.edu.tw.Downloads/MySQL - ...
- 移动端(手机端)页面自适应解决方案—rem布局篇
移动端(手机端)页面自适应解决方案-rem布局 假设设计妹妹给我们的设计稿尺寸为750 * 1340.结合网易.淘宝移动端首页html元素上的动态font-size属性.设计稿尺寸.前端与设计之间协作 ...
- 公路通行税Ceoi99（BFS+图的直径）
公路通行税(Ceoi99) 版权声明:本篇随笔版权归作者YJSheep(www.cnblogs.com/yangyaojia)所有,转载请保留原地址! 在PALMIA国家内,有N个城市由公路相连(每条 ...
- Spring Cloud学习笔记【七】服务网关 Zuul（路由）
Spring Cloud Zuul 路由是微服务架构的不可或缺的一部分,提供动态路由.监控.弹性.安全等的边缘服务.Zuul 是 Netflix 出品的一个基于 JVM 路由和服务端的负载均衡器. 准 ...
- ImageLoader的简单分析(二)
在<ImageLoader的简单分析>这篇博客中对IImageLoader三大组件的创建过程以及三者之间的关系做了说明.同一时候文章的最后也简单的说明了一下ImageLoader是怎么通过 ...
- openssl之BIO系列之6---BIO的IO操作函数
BIO的IO操作函数 ---依据openssl doc/crypto/bio/bio_read.pod翻译和自己的理解写成 (作者:DragonKing Mail:wzhah ...
- OpenCASCADE Incremental Mesh
OpenCASCADE Incremental Mesh eryar@163.com Abstract. OpenCASCADE IncrementalMesh is used to build th ...
- Windows 7: Update is not applicable to your computer
https://www.sevenforums.com/windows-updates-activation/119088-update-not-applicable-your-computer.ht ...
- .Net中字典的使用
/// <summary> /// 获取用户市信息 /// </summary> /// <param name="CustomerId">&l ...