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个例子,重点看整个组件的大体结构 用组件的方式做拖拽窗口,你可以狠狠的点击这里进行 ...
随机推荐
- GPU Command Buffer
For Developers > Design Documents > GPU Command Buffer This are mostly just notes on the ...
- Centos7（阿里云服务器）安装Anaconda的详细步骤与心得
在本地安装Anaconda的各个版本的文章已经很多,但是感觉不是很详细,因此,在此发发自己在Centos7(阿里云服务器)安装Anaconda的心得和步骤: 注:需要注意的地方会用不同颜色区别. 1. ...
- ArcGIS api for javascript——创建地图
描述 这个示例显示ArcGIS Server的一个地图.ArcGIS Server地图是缓存的,意味着它有服务器管理员建来提升性能的一组预先渲染的切片.由于这个原因地图通过ArcGISTiledMap ...
- crm使用soap删除字段
//C# 代码: //DeleteAttributeRequest request = new DeleteAttributeRequest(); //request.EntityLogicalNam ...
- windows linux 双系统默认启动windows 的几种方法
装了双系统后,在开机时总会有想让一个系统默认启动的时候,一般安装完Ubuntu和XP双系统后,开机时默认的是启动Ubuntu系统,可是当想让XP作为默认启动的系统时怎么办呢? 在早期的Ubuntu系统 ...
- Qt中事件分发源码剖析
Qt中事件分发源码剖析 Qt中事件传递顺序: 在一个应该程序中,会进入一个事件循环,接受系统产生的事件,而且进行分发,这些都是在exec中进行的. 以下举例说明: 1)首先看看以下一段演示样例代码: ...
- Consolas 字体
Consolas是一套等宽字体的字型,属无衬线字体,由Lucas de Groot设计. 概述 这套字型使用了微软的ClearType 字型平滑技术,并随同Windows Vista.Office 2 ...
- Android 5.0(Lollipop)中的SurfaceTexture，TextureView, SurfaceView和GLSurfaceView
SurfaceView, GLSurfaceView, SurfaceTexture以及TextureView是Android当中名字比较绕,关系又比较密切的几个类.本文基于Android 5.0(L ...
- POJ 1191 记忆化搜索
(我是不会告诉你我是抄的http://www.cnblogs.com/scau20110726/archive/2013/02/27/2936050.html这个人的) 一开始没有想到要化一下方差的式 ...
- BZOJ1189: [HNOI2007]紧急疏散evacuate(二分答案，最大流)
Description 发生了火警,所有人员需要紧急疏散!假设每个房间是一个N M的矩形区域.每个格子如果是'.',那么表示这是一 块空地:如果是'X',那么表示这是一面墙,如果是'D',那么表示这是 ...