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 相关文章推荐
extjs render 用法介绍
Sep 11 Javascript
js实现选中复选框文字变色的方法
Aug 14 Javascript
你有必要知道的25个JavaScript面试题
Dec 29 Javascript
由浅入深剖析Angular表单验证
Jul 14 Javascript
Angular中使用ui router实现系统权限控制及开发遇到问题
Sep 23 Javascript
Node.js包管理器Yarn的入门介绍与安装
Oct 17 Javascript
javascript获取以及设置光标位置
Feb 16 Javascript
AngularJS中$http的交互问题
Mar 29 Javascript
angular第三方包开发整理(小结)
Apr 19 Javascript
原生JS实现的跳一跳小游戏完整实例
Jan 27 Javascript
vue中使用element ui的弹窗与echarts之间的问题详解
Oct 25 Javascript
JavaScript中this的学习笔记及用法整理
Feb 17 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 不同编码下的字符串长度区分
2009/09/26 PHP
PHP 字符串正则替换函数preg_replace使用说明
2011/07/15 PHP
php中邮箱地址正则表达式实现与详解
2012/04/24 PHP
PHP实现动态获取函数参数的方法示例
2018/04/02 PHP
php curl批处理实现可控并发异步操作示例
2018/05/09 PHP
JQUERY 浏览器判断实现函数
2009/08/20 Javascript
JQuery中getJSON的使用方法
2010/12/13 Javascript
用Javascript实现Windows任务管理器的代码
2012/03/27 Javascript
Jquery 数据选择插件Pickerbox使用介绍
2012/08/24 Javascript
JQuery中的html()、text()、val()区别示例介绍
2014/09/01 Javascript
node.js中的http.get方法使用说明
2014/12/14 Javascript
理解JavaScript的变量的入门教程
2015/07/07 Javascript
javascript检测flash插件是否被禁用的方法
2016/01/14 Javascript
vue项目中的webpack-dev-sever配置方法
2017/12/14 Javascript
使用flow来规范javascript的变量类型
2019/09/12 Javascript
Nuxt的动态路由和参数校验操作
2020/11/09 Javascript
Python警察与小偷的实现之一客户端与服务端通信实例
2014/10/09 Python
Python数据结构之栈、队列的实现代码分享
2017/12/04 Python
pyhton列表转换为数组的实例
2018/04/04 Python
Python 编码规范(Google Python Style Guide)
2018/05/05 Python
对python中的iter()函数与next()函数详解
2018/10/18 Python
Tkinter中复选菜单是否被选中的判断与设置方式
2020/03/04 Python
Maison Lab荷兰:名牌Outlet购物
2018/08/10 全球购物
英国玛莎百货澳大利亚:Marks & Spencer Australia
2019/08/30 全球购物
EJB发布WEB服务一般步骤
2012/10/31 面试题
项目考察欢迎辞
2014/01/17 职场文书
小学岗位竞聘方案
2014/01/22 职场文书
上课说话检讨书大全
2014/01/22 职场文书
一年级家长会邀请函
2014/01/25 职场文书
信息技术毕业生自荐信范文
2014/03/13 职场文书
法制宣传日活动总结
2014/04/29 职场文书
就业导师推荐信范文
2015/03/27 职场文书
本科毕业论文致谢词
2015/05/14 职场文书
会计试用期工作总结2015
2015/05/28 职场文书
Pycharm连接远程服务器并远程调试的全过程
2021/06/24 Python
Python OpenGL基本配置方式
2022/05/20 Python