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个例子,重点看整个组件的大体结构 用组件的方式做拖拽窗口,你可以狠狠的点击这里进行 ...
随机推荐
- Ubuntu14.04下tensorflow安装
自己电脑没装双系统,于是决定在虚拟机里装个tensorflow,以下是安装过程: 1.安装anaconda2 for Linux 官网下的话很慢,去清华的镜像网站下吧,我上一篇文章有网址 安装:bas ...
- <<大学>>原文
大学之道,在明明德,在亲民,在止于至善.知止而后有定,定而后能静,静而后能安,安而后能虑,虑而后能得.物有本末,事有终始,知所先后,则近道矣. 古之欲明明德于天下者,先治其国,欲治其国者,先齐其家:欲 ...
- Studio3T 破解，无需命令计划任务
最近项目中使用到了MongoDB,苦于命令行不好操作,所以就寻觅了一下MongDB的GUI管理工具,最终找到了Studio3T,功能非常强大,但是苦于只有评估版本30天,最可气的是一时手贱,修改了系统 ...
- 关于thinkphp 命令行
很多人做多年开发只懂得PHP能在浏览器下运行或者只能结合APACHE等WEB服务器运行,却不晓得,PHP也能用命令行执行,或许是由于大多人在WINDOWS平台做开发部署运行,比较少接触LINUX. T ...
- 第四讲 Yang-Mills方程与Maxwell方程
一.变分原理 变分原理始于17世纪的速降问题,也就是连接两点的曲线在有重力的情况下,让初速度为0的一小球最快地通过? 这个问题由伯努力给出解答,他的方法非常巧妙,而最后开创了一个学科——变分学.他假设 ...
- 洛谷 P1898 缘分计算
P1898 缘分计算 题目描述 缘分是一个外国人难以理解的中文名词.大致说来,缘分是一种冥冥中将两人(通常是情人)结合的力量.仅管这是种迷信,很多人——特别是女生——喜欢去计算它. 不幸的是,644 ...
- [React Native] Use the SafeAreaView Component in React Native for iPhone X Compatibility
In this lesson, you will learn how to use the SafeAreaView component to avoid the sensor cluster (th ...
- POJ 3670 Eating Together（LIS)
Description The cows are so very silly about their dinner partners. They have organized themselves i ...
- ios 文件上传， post数据
转自:http://www.maxiaoguo.com/clothes/267.html 一.文件下载 获取资源文件大小有两张方式 1. HTTP HEAD方法 NSMutableURLRequest ...
- iOS Code Sign error: Provisioning profile can't be found 解决方式
出现error的过程:在执行另外一个xcode项目重置了code sign.回到原来的项目的时候出现这个error 修复方法: targe-build settings-code signing id ...