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 不间断的图片滚动并可点击
Jan 15 Javascript
js 实现复制到粘贴板的功能代码
May 13 Javascript
为原生js Array增加each方法
Apr 07 Javascript
jquery实现点击TreeView文本父节点展开/折叠子节点
Jan 10 Javascript
jQuery页面图片伴随滚动条逐渐显示的小例子
Mar 21 Javascript
jQuery循环滚动新闻列表示例代码
Jun 17 Javascript
Javascript中匿名函数的调用与写法实例详解(多种)
Jan 26 Javascript
实例解析jQuery中proxy()函数的用法
May 24 Javascript
jquery插件开发之选项卡制作详解
Aug 30 jQuery
微信小程序中使用Async-await方法异步请求变为同步请求方法
Mar 28 Javascript
jquery实现的分页显示功能示例
Aug 23 jQuery
javascript 内存模型实例详解
Apr 18 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实现mysql数据库操作类分享
2014/02/14 PHP
smarty模板引擎从配置文件中获取数据的方法
2015/01/22 PHP
PHP类相关知识点实例总结
2016/09/28 PHP
/etc/php-fpm.d/www.conf 配置注意事项
2017/02/04 PHP
Laravel实现表单提交
2017/05/07 PHP
浅谈PHP发送HTTP请求的几种方式
2017/07/25 PHP
Javascript实例教程(19) 使用HoTMetal(5)
2006/12/23 Javascript
json 定义
2008/06/10 Javascript
爆炸式的JS圆形浮动菜单特效代码
2010/03/03 Javascript
使用正则表达式的格式化与高亮显示json字符串
2014/12/03 Javascript
基于JavaScript短信验证码如何实现
2016/01/24 Javascript
jQuery实现鼠标选中文字后弹出提示窗口效果【附demo源码】
2016/09/05 Javascript
Vue自定义指令介绍(2)
2016/12/08 Javascript
浅析vue数据绑定
2017/01/17 Javascript
node学习记录之搭建web服务器教程
2017/02/16 Javascript
安装Node.js并启动本地服务的操作教程
2018/05/12 Javascript
JS将网址url转化为JSON格式的方法
2018/07/02 Javascript
使用jquery的cookie实现登录页记住用户名和密码的方法
2019/03/13 jQuery
深入浅析ng-bootstrap 组件集中 tabset 组件的实现分析
2019/07/19 Javascript
Vue3 中的数据侦测的实现
2019/10/09 Javascript
在vue项目中利用popstate处理页面返回的操作介绍
2020/08/06 Javascript
pandas 对每一列数据进行标准化的方法
2018/06/09 Python
在Python中定义一个常量的方法
2018/11/10 Python
Python OpenCV实现视频分帧
2019/06/01 Python
python3 requests库文件上传与下载实现详解
2019/08/22 Python
Spark处理数据排序问题如何避免OOM
2020/05/21 Python
Python gevent协程切换实现详解
2020/09/14 Python
在线服装零售商:SheIn
2016/07/22 全球购物
皇马官方商城:Real Madrid Store
2016/09/02 全球购物
采购部部长岗位职责
2014/02/06 职场文书
领导班子党的群众路线对照检查材料
2014/09/25 职场文书
2015年基层党组织公开承诺书
2015/01/21 职场文书
MySQL快速插入一亿测试数据
2021/06/23 MySQL
详解Spring Boot使用系统参数表提升系统的灵活性
2021/06/30 Java/Android
el-form每行显示两列底部按钮居中效果的实现
2022/08/05 HTML / CSS
TypeScript 内置高级类型编程示例
2022/09/23 Javascript