JS难点--组件开发
js组件
把一个效果或者功能用面向对象的方法封装起来,只提供给用户一些相关的方法或者数据接口
1、特点
易扩展,易维护。相互之间不会有影响
2、组件的组成
①配置参数
放在初始化函数里,这是一段关于拖拽的代码
初始化函数
Drag.prototype.init=function(opt){
this.settings={
downFn:opt.downFn||function(){},
moveFn:opt.moveFn||function(){},
upFn:opt.upFn||function(){}
};
};
默认参数
//这是默认参数,下面的程序都要用这里的参数
this.settings={
id:'', //这个属性是必传的
downFn:function(){},
moveFn:function(){},
upFn:function(){}
};
要拿用户传的参数,去覆盖默认参数,用for in方法
//初始化函数
Drag.prototype.init=function(opt){
//在初始化函数里面,拿用户传进来的参数去覆盖默认的参数,并且这个代码要放在init函数的最上面
for(var attr in opt){
if(this.settings.hasOwnProperty(attr)){
//如果默认参数里有这个属性的话,才拿用户传入的参数去覆盖
this.settings[attr]=opt[attr];
}
} this.obj=document.getElementById(this.settings.id); var This=this;
this.obj.onmousedown=function(ev){
This.down(ev);
};
};
②方法
放在原型里的函数
Drag.prototype.down=function(ev){
this.settings.downFn.call(this); this.disX=ev.clientX-this.obj.offsetLeft;
this.disY=ev.clientY-this.obj.offsetTop; var This=this; document.onmousemove=function(ev){
This.move(ev);
};
document.onmouseup=function(){
This.up();
};
};
③自定义事件
除了系统以外的事件
需要用到事件绑定器、事件触发器
自己定义的事件,除了系统提供以外的事件。有利于多人协作开发,可扩展js原有事件
自定义事件其实就是调用函数,在指定的环境下让这个函数触发,就相当于事件了
(1)自定义事件三要素
对象、事件名、事件处理函数
1、可以利用对象数据结构里的key:value的形式把事件名字与事件处理函数对应起来
2、把多个函数放到一个数组里,循环去执行数组里每个函数,就可以做到让所有函数都执行
(2)定义事件
obj.events={
'事件名1':[fn1,fn2],
'事件名2':[fn3,fn4,fn5],
}
//添加自定义事件
function customEvent(obj,eventName,fn){
obj.events=obj.events||{}; //如果obj身上已经有个这属性,就用自己的
obj.events[eventName]=obj.events[eventName]||[]; //如果events里面有内容了,就用自己的
obj.events[eventName].push(fn); //把事件用push的方法添加到数组里
}
(3)调用事件(循环去调)
obj.events['事件名1'].fn1();
obj.events['事件名1'].fn2();
//触发自定义事件
function trigger(obj,eventName){
//触发的时候要去看一下对象身上有没有这个事件,事件是放在对象身上的events下
if(obj.events[eventName]){
for(var i=0;i<obj.events[eventName].length;i++){
obj.events[eventName][i].call(obj);
}
}
};
调用事件
customEvent(box,'点击',function(){
console.log('box点击了');
});
JS难点--组件开发的更多相关文章
- 【2015上半年总结】js开源组件开发系列索引
js开源组件开发系列一索引 2015.8 by 田想兵 个人网站 从3月份进入新公司以来,时经五个月,我以平均每周1个小组件的速度,已经完成的js组件有22个之余了,已基本上全部用到实际项目中,这些小 ...
- [js开源组件开发]network异步请求ajax的扩展
network异步请求ajax的扩展 在日常的应用中,你可能直接调用$.ajax是会有些问题的,比如说用户的重复点击,比如说我只希望它成功提交一次后就不能再提交,比如说我希望有个正在提交的loadin ...
- [js开源组件开发]数字或金额千分位格式化组件
数字或金额千分位格式化组件 这次距离上一个组件<[js开源组件开发]table表格组件>时隔了一个月,由于最近的项目比较坑,刚挖完坑,所以来总结性提出来几个组件弥补这次的空缺,首先是金额和 ...
- [js开源组件开发]query组件,获取url参数和form表单json格式
query组件,获取url参数和form表单json格式 距离上次的组件[js开源组件开发]ajax分页组件一转眼过去了近二十天,或许我一周一组件的承诺有了质疑声,但其实我一直在做,只是没人看到……, ...
- [js开源组件开发]localStorage-cache本地存储的缓存管理
localStorage-cache本地存储的缓存管理 距离上次的组件开发有近三个月的时间了,最近一直在做一些杂事,无法静下心来写写代码,也是在学习emberjs,在emberjs中有一个很重要的东西 ...
- [js开源组件开发]js手机端浮层控件,并有多种弹出小提示,兼容pc端浏览器
js dialog组件,包含alert和confirm的实现 本组件所有的资源均在github上可以查看源代码 GitHub 本dialog的组件的例子请在这里查看 demo dialog js di ...
- [js开源组件开发]tip提示组件
tip提示组件 常见的应用场景中,总是难免会遇到提示信息,比如显示不完全时需要鼠标移上去显示title,比如验证时的错误提示,比如操作按钮的辅助说明等,所以我独立出来了一个小的js组件,tip提示组件 ...
- [js开源组件开发]loading加载效果
loading加载效果 由于程序和网络的原因,常常我们需要在交互的时候,给用户一个正在加载中的动画,于是,loading组件横空出世.不需要复杂的代码,也能完成大多数业务,这就是我做组件的原则. 效果 ...
- [js开源组件开发]table表格组件
table表格组件 表格的渲染组件,demo请点击http://lovewebgames.com/jsmodule/table.html,git源码请点击https://github.com/tian ...
随机推荐
- 201521123059 《Java程序设计》第十二周学习总结
1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多流与文件相关内容. 2. 书面作业 将Student对象(属性:int id, String name,int age,doubl ...
- 201521123057 《Java程序设计》第11周学习总结
1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多线程相关内容. 2. 书面作业 本次PTA作业题集多线程 1.互斥访问与同步访问 完成题集4-4(互斥访问)与4-5(同步访问) ...
- 201521123106 《Java程序设计》第10周学习总结
1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结异常与多线程相关内容. 2. 书面作业 本次PTA作业题集异常.多线程 finally 题目4-2 1.1 截图你的提交结果(出现学 ...
- 201521123115《Java程序设计》第14周学习总结
1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多数据库相关内容. 2. 书面作业 1. MySQL数据库基本操作 建立数据库,将自己的姓名.学号作为一条记录插入.(截图,需出现自 ...
- Javascript-正则表达式-开发中的使用.
-- "(-1~99)之间 -1表示无限次!" pattern="^((-1)|([0-9]{0,2}))$" -- "(0~99.99)之间 的金额 ...
- RobotFramework自动化测试框架-移动手机自动化测试Clear Text关键字的使用
Clear Text关键字用来清除输入框的数据,该关键字接收一个参数[ locator ],这里的locator指的就是界面元素的定位方式. 示例1:Clear Text清除输入框数据时,采用reso ...
- 嵌入式Llinux学习路线图
版本 日期 作者 说明 V1 2016.07.29 韦东山 第1版本,Android部分未写 我是1999年上的大学,物理专业.在大一时,我们班里普遍弥漫着对未来的不安,不知道学习了物理后出去能做什么 ...
- PostgreSQL使用MyBatis,insert时返回主键
MyBatis中普通的insert语句是这样的: <insert id="insert" parameterType="com.xxx.xxx.xxDo" ...
- PYTHON 函数局部变量和全局变量
有这样一段PYTHON代码,从事C语言开发的人都知道,如果定义了全局变量,而函数内没有定义同名的函数变量的话,那么在函数内对该变量的赋值就是对全局变量空间数值的修改, 然后在PYTHON中却不尽相同, ...
- Java中的对象和引用
<Java编程思想>中有一段关于对象的说法: "按照通俗的说法,每个对象都是某个类(class)的一个实例(instance),这里,'类'就是'类型'的同义词." 简 ...