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个例子,重点看整个组件的大体结构 用组件的方式做拖拽窗口,你可以狠狠的点击这里进行 ...
随机推荐
- Bayes++ Library入门学习之熟悉UKF相关类
UKF-SLAM是一种比较流行SLAM方案.相比EKF-SLAM,UKF利用unscented transform代替了EKF的线性化趋近,因而具有更高的精度.Bayes++库中的unsFlt.hpp ...
- 【Git 四】一款不错的 Git 客户端
平常做开发使用 git bash 进行代码提交,一直没有使用过 git 相关的客户端. 直到有次同一分支下两个日志进行代码比较时,bash 返回的结果可视化理解起来比较差. 如果更改的部分比较多,问题 ...
- centos通过yum安装jdk
安装之前先检查一下系统有没有自带open-jdk 命令: rpm -qa |grep java rpm -qa |grep jdk rpm -qa |grep gcj 如果没有输入信息表示没有安装. ...
- 对比学习:《深度学习之Pytorch》《PyTorch深度学习实战》+代码
PyTorch是一个基于Python的深度学习平台,该平台简单易用上手快,从计算机视觉.自然语言处理再到强化学习,PyTorch的功能强大,支持PyTorch的工具包有用于自然语言处理的Allen N ...
- Configure Tomcat 7 to run Python CGI scripts in windows(Win7系统配置tomcat服务器，使用python进行cgi编程)
Pre-installation requirements1. Java2. Python steps1. Download latest version of Tomcat (Tomcat 7) f ...
- [CQOI2013]新Nim游戏（线性基）
P4301 [CQOI2013]新Nim游戏 题目描述 传统的Nim游戏是这样的:有一些火柴堆,每堆都有若干根火柴(不同堆的火柴数量可以不同).两个游戏者轮流操作,每次可以选一个火柴堆拿走若干根火柴. ...
- script指定src后内部代码无效
/********** 无效 ***************/ <script type="text/javascript" src=""> fun ...
- 在Mac OS X上安装使用lazarus 1.6.4
一直觉得delphi的OO做得比C++还完善, 但如今日落西真是让人感到唏嘘, 这并不意味着delphi比C++差, 它的创始人被微软挖墙脚后创造了C#系列开发工具, 设计理念大部分与Delphi相 ...
- JSP编程技术5-购物车的实现-session会话对象
首先十分感谢大家对我的文章的支持,我是个刚刚才找到自己方向的在校大学生,当然我的知识和能力有限,眼下正在努力恶补学习中.当我看到自己首次发表到CSDN首页的文章才几个小时阅读量就超过了100时,对我来 ...
- webpack03
index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...