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个例子,重点看整个组件的大体结构 用组件的方式做拖拽窗口,你可以狠狠的点击这里进行 ...
随机推荐
- iview2.0 父组件访问子组件 方法
//从父组件中访问子组件 可以给子组件定义标识 通过ref="chead" 定义 通过父组件就可以访问了
- js控制分页打印、打印分页示例
1 打印分页 需要添加一段代码 <div style="page-break-before:always;"><br /></div> 2 & ...
- Blink Coordinate Spaces
Blink Coordinate Spaces Blink Coordinate Spaces Types of Zoom There are two types of zoom in Chromiu ...
- 欧拉函数 euler
O - 找新朋友 1.欧拉函数 euler() 在数论,对正整数n,欧拉函数是 少于或等于n的数中与n 互质 的数的数目. 互质:公约数只有 1 的两个整数,称为互质整数.即 最大的公约数也就是 ...
- 洛谷 P1542 包裹快递
P1542 包裹快递 题目描述 小K成功地破解了密文.但是乘车到X国的时候,发现钱包被偷了,于是无奈之下只好作快递员来攒足路费去Orz教主…… 一个快递公司要将n个包裹分别送到n个地方,并分配给邮递员 ...
- [Python] Histograms for analysis Daily return
A histogram is an accurate representation of the distribution of numerical data. Y axis is the occur ...
- [React] Pass a function to setState in React
In React, when you want to set the state which calculation depends on the current state, using an ob ...
- Android中集成ffmpeg(一)：编译ffmpeg
方案选择 Android中集成ffmpeg的codec功能无非两种方式: JNI直接调用,主要用于App开发(无权限修改系统底层),如EXOPlayer,JPlayer等. 集成ffmpeg到OMX, ...
- android动画-拖动
先上图看效果 实质上说是动画有点不妥,确切的说应该是手势的处理,废话不多说看代码 SimpleDragSample.java public class SimpleDragSample extends ...
- 优化数据页面（20）——1:n的数据关系
设计要点:优化数据页面.界面设计.美化exce 阿金:那一对多的关系-- 秀秀:不是:n结构么? 阿金:嗯,这俺知道.俺特别喜欢这样的格式,那样显得非常上档次! 秀秀:俺也喜欢. 由于页面上有空白,认 ...