JavaScript 学习笔记 Black.Caffeine 09.11.28


Posted in Javascript onNovember 30, 2009

1. 之前写的一直都是分散的函数,用到什么功能,就写什么函数,觉得不够整洁,所以这次写的是封装的类,用起来还不错,但是传递参数的时候遇到了不少问题,所以,查阅了很多资料,总结如下:
1)动态绑定事件问题:
需要将onclick事件绑定到对象上,比如列表项。需要用到addEventListener或者attachEvent,用于吧函数操作添加到事件中去,而不是覆盖,但是,attachEvent不支持FF,FF只能用addEventListener。so,就需要一个函数,把它们俩给综合起来,于是乎,这个函数诞生了:

function addEventHandler(oTarget, sEventType, fnHandler) 
{ 
    if(oTarget.addEventListener) 
    {oTarget.addEventListener(sEventType, fnHandler, false);} 
    else if(oTarget.attachEvent) 
    {oTarget.attachEvent('on' + sEventType, fnHandler);} 
    else{oTarget['on' + sEventType] = fnHandler;} 
}

2)传递this参数问题:
由于我吧函数和属性都封装到了一个类里面,所以在绑定onclick之类的事件是,就会产生一个问题,比如,addEventHandler(this.elems[i],"click",this.Move);,这样就出错了,因为在onclick事件发生的时候,调用的this就不是指向这个封装的类了,于是乎,就需要用到apply()了~——应用某一对象的一个方法,用另一个对象替换当前对象。具体格式我就不用说了,网上一大堆~函数:
var Bind = function(object,func){ 
        var args = Array.prototype.slice.call(arguments).slice(2); 
        return function(){ 
            return func.apply(object,args); 
        } 
    }

调用:
this._fnMove=Bind(this,this.move,i);//this.move是我定义的一个成员函数,封装在类中
//this.elems[i].onclick=this._fnMove;//吧上面那句话换成这句话也是可以的,只不过,onclick事件就被替换为this._fnMove,而不是添加this._fnMove进去
addEventHandler(this.elems[i],"click",this._fnMove);
这样就OK了~
PS.call()也是基本相同的功能,但具体参数不一样
2.setInterval问题
1)与setTimeout的区别
在一般情况下,setTimeout仅执行一次,(当然,如果在一个函数里反复调用setTimeout,就可以重复执行了)而 setInterval是可以重复执行的,直到clearIntercal()
2)在IE下不兼容问题
这个问题折磨了我50%的时间,哦买噶,以后是不是要半生都浪费在跟IE干仗上了。。。
本来,在chrome,ff,safari上都运行的很好,我相当激动,以至于遗忘了IE。。。后来在IE上一试,结果,完了,修改,google(此处为动词,嘿嘿),基本上花了大半天时间吧,终于搞定。 之前,语句是这样的:this.timer=setInterval(this.unfold,5,this.divs[index],this);结果在IE下完全不好使。最后,在某位大侠的文章里面看到如下描述:在IE下,setTimeout和setInterval是不支持参数传递的.问题很快就解决掉了,果然是我太菜了~
解决问题的函数如下:
var mySetInterval = setInterval; 
window.setInterval = function(callback, interval) 
{ 
var args = Array.prototype.slice.call(arguments, 2); 
function callFn(){callback.apply(null, args);} 
return mySetInterval(callFn, interval); 
} var mySetTimeOut = setTimeout; //修改setInterval 
window.setTimeout = function(callback, timeout) 
{ 
var args = Array.prototype.slice.call(arguments, 2); 
function callFn(){callback.apply(null, args);}

然后使用window.setTimeout或window.setInterval调用就可以了~
我的语句修改如下:
this.timer=window.setInterval(this.unfold,5,this.divs[index],this); //其中,this.divs[index],this是传递的两个参数
再次谢谢那位大侠,虽然他不认识我~
目前,在IE中还有点排版的小问题,继续学习~全力兔子!
Javascript 相关文章推荐
javascript 简练的几个函数
Aug 29 Javascript
Laydate时间组件在火狐浏览器下有多时间输入框时只能给第一个输入框赋值的解决方法
Aug 18 Javascript
简单实现jQuery级联菜单
Jan 09 Javascript
canvas实现爱心和彩虹雨效果
Mar 09 Javascript
深入学习 JavaScript中的函数调用
Mar 23 Javascript
JS实现前端缓存的方法
Sep 21 Javascript
javaScript 连接打印机,打印小票的实例
Dec 29 Javascript
ES6 迭代器(Iterator)和 for.of循环使用方法学习(总结)
Feb 08 Javascript
深入理解Vue nextTick 机制
Apr 28 Javascript
vue-router history模式下的微信分享小结
Jul 05 Javascript
iview同时验证多个表单问题总结
Sep 29 Javascript
Layui实现数据表格中鼠标悬浮图片放大效果,离开时恢复原图的方法
Sep 11 Javascript
Ruffy javascript 学习笔记
Nov 30 #Javascript
jquery 分页控件实现代码
Nov 30 #Javascript
JS 动态获取节点代码innerHTML分析 [IE,FF]
Nov 30 #Javascript
Aptana调试javascript图解教程
Nov 30 #Javascript
jQuery chili图片远处放大插件
Nov 30 #Javascript
document.body.scrollTop 值总为0的解决方法 比较常见的标准问题
Nov 30 #Javascript
javascript 设置某DIV区域内的checkbox复选框
Nov 30 #Javascript
You might like
php中根据变量的类型 选择echo或dump
2012/07/05 PHP
php读取csv文件后,uft8 bom导致在页面上显示出现问题的解决方法
2013/08/10 PHP
php将日期格式转换成xx天前的格式
2015/04/16 PHP
php文件缓存方法总结
2016/03/16 PHP
php ci 获取表单中多个同名input元素值的代码
2016/03/25 PHP
Jquery增加鼠标中间功能mousewheel的实例代码
2013/09/05 Javascript
当前流行的JavaScript代码风格指南
2014/09/10 Javascript
node.js中的url.format方法使用说明
2014/12/10 Javascript
jQuery网页版打砖块小游戏源码分享
2015/08/20 Javascript
jQuery 1.9.1源码分析系列(十)事件系统之绑定事件
2015/11/19 Javascript
jQuery Easyui datagrid连续发送两次请求问题
2016/12/13 Javascript
详解JavaScript中js对象与JSON格式字符串的相互转换
2017/02/14 Javascript
JS数组去重(4种方法)
2017/03/27 Javascript
Vue中v-show添加表达式的问题(判断是否显示)
2018/03/26 Javascript
js Element Traversal规范中的元素遍历方法
2018/04/19 Javascript
详解JavaScript实现动态的轮播图效果
2019/04/29 Javascript
vue实现表单录入小案例
2019/09/27 Javascript
vue.js+ElementUI实现进度条提示密码强度效果
2020/01/18 Javascript
微信小程序地图实现展示线路
2020/07/29 Javascript
解决Vue中的生命周期beforeDestory不触发的问题
2020/07/21 Javascript
vue实现顶部菜单栏
2020/11/08 Javascript
jQuery实现查看图片功能
2020/12/01 jQuery
Vue+scss白天和夜间模式切换功能的实现方法
2021/01/05 Vue.js
[01:04:14]OG vs Winstrike 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
python下载微信公众号相关文章
2019/02/26 Python
用Python实现将一张图片分成9宫格的示例
2019/07/05 Python
python实现PCA降维的示例详解
2020/02/24 Python
Python 中由 yield 实现异步操作
2020/05/04 Python
Python xml、字典、json、类四种数据类型如何实现互相转换
2020/05/27 Python
怎样在 Applet 中建立自己的菜单(MenuBar/Menu)?
2012/06/20 面试题
党支部遵守党的政治纪律情况对照检查材料
2014/09/26 职场文书
法人单位授权委托书范文
2014/10/06 职场文书
三严三实心得体会范文
2014/10/13 职场文书
离婚起诉书怎么写
2015/05/19 职场文书
寻衅滋事罪辩护词
2015/05/21 职场文书
2016参观监狱警示教育活动心得体会
2016/01/15 职场文书