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 相关文章推荐
ext for eclipse插件安装方法
Apr 27 Javascript
jQuery代码优化之基本事件
Nov 01 Javascript
js 得到文件后缀(通过正则实现)
Jul 08 Javascript
js实现的常用的左侧导航效果
Oct 17 Javascript
jquery取消选择select下拉框示例代码
Feb 22 Javascript
javascript 模拟坦克大战游戏(html5版)附源码下载
Apr 08 Javascript
详细解读JavaScript编程中的Promise使用
Jul 27 Javascript
jqGrid用法汇总(全经典)
Jun 28 Javascript
浅谈AngularJS中ng-class的使用方法
Nov 11 Javascript
JS FormData上传文件的设置方法
Jul 05 Javascript
微信小程序实现form表单本地储存数据
Jun 27 Javascript
详解Vue 的异常处理机制
Nov 30 Vue.js
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操作sqlserver关于时间日期读取的小小见解
2009/11/29 PHP
一个PHP实现的轻量级简单爬虫
2015/07/08 PHP
基于php数组中的索引数组和关联数组详解
2018/03/12 PHP
php数值计算num类简单操作示例
2020/05/15 PHP
phpmyadmin在宝塔面板里进不去的解决方案
2020/07/06 PHP
让FireFox支持innerText的实现代码
2009/12/01 Javascript
javascript动态的改变IFrame的高度实现自动伸展
2013/10/12 Javascript
Extjs4中Form的使用之本地hiddenfield
2013/11/26 Javascript
JS实现匀速运动的代码实例
2013/11/29 Javascript
jquery实现点击弹出层效果的简单实例
2014/03/03 Javascript
JS版的date函数(和PHP的date函数一样)
2014/05/12 Javascript
完美兼容各大浏览器获取HTTP_REFERER方法总结
2014/06/24 Javascript
js数组的基本操作(很全自己整理的)
2014/10/16 Javascript
JS判断字符串字节数并截取长度的方法
2016/03/05 Javascript
Bootstrap Fileinput文件上传组件用法详解
2016/05/10 Javascript
AngularJs $parse、$eval和$observe、$watch详解
2016/09/21 Javascript
微信小程序使用第三方库Immutable.js实例详解
2016/09/27 Javascript
vue Render中slots的使用的实例代码
2017/07/19 Javascript
「中高级前端面试」JavaScript手写代码无敌秘籍(推荐)
2019/04/08 Javascript
mpvue实现左侧导航与右侧内容的联动
2019/10/21 Javascript
JS实现百度搜索框关键字推荐
2020/02/17 Javascript
Python使用一行代码获取上个月是几月
2018/08/30 Python
Python实现统计英文文章词频的方法分析
2019/01/28 Python
Python2与Python3的区别实例分析
2019/04/11 Python
python绘图模块matplotlib示例详解
2019/07/26 Python
flask框架配置mysql数据库操作详解
2019/11/29 Python
使用Python制作新型冠状病毒实时疫情图
2020/01/28 Python
python中JWT用户认证的实现
2020/05/18 Python
Python如何安装第三方模块
2020/05/28 Python
Django模型验证器介绍与源码分析
2020/09/08 Python
5分钟快速掌握Python定时任务框架的实现
2021/01/26 Python
体育教师工作总结的自我评价
2013/10/10 职场文书
一年级班主任工作总结2014
2014/11/08 职场文书
医院病假条范文
2015/08/17 职场文书
使用 MybatisPlus 连接 SqlServer 数据库解决 OFFSET 分页问题
2022/04/22 SQL Server
Android存储中最基本的文件存储方式
2022/04/30 Java/Android