javascript函数绑定
来源:互联网 发布:samplitude for mac 编辑:程序博客网 时间:2024/05/29 11:19
Perface
如果让你实现这个页面和一些操作的,比如点击1、2、3等就在那个input text中显示,还有删除功能,拨打我们先不要管它,只是模拟而已。要是我刚开始做的话,我会这样做:
- 用css、HTML布局那个界面
- 用javascript的事件委托监听那个按钮的父节点的点击事件
Description
ContactTelPanel =Ext.extend(Ext.Panel, {//构造方法constructor : function(config) {Ext.apply(this, config);//直接把config对象的属性全复制到this对象中Parent = this.parent;var me = this;ContactTelPanel.superclass.constructor.call(this, {//用ContactTelPanel的父类也就是Ext.Panel的构造函数autoScroll : true,title : "拨打电话",//设置title,跟这篇文章的主体没关系,不要管他id : "contacttelpanel",bodyStyle : "padding: 30px 300px;",defaults : {//可以为该对象(ContactTelPanel)包含的组件(也就是在items配置选项)设置一些相同属性layout : "column",defaults : {xtype : "button",width : 50,height : 25,style : "margin:4px 15px",handler : this.press //为每个按钮都添加一个click的事件},bodyBorder : false},items : [ {//textfield组件height : 30,width : 250,xtype : "textfield",id : "tf",style : "margin-bottom:10px"}, {// 没有xtype就是默认为panel,下面也是,不然就不要纠结了,直接在这里想象成第一行按钮1、按钮2、按钮3items : [ {text : "1"}, {text : "2"}, {text : "3"} ]}, {// 这里是按钮4、按钮5、按钮6items : [ {text : "4"}, {text : "5"}, {text : "6"} ]}, {// 这里是按钮7、按钮8、按钮9 下同items : [ {text : "7"}, {text : "8"}, {text : "9"} ]}, {items : [ {text : "*"}, {text : "0"}, {text : "#"} ]}, {items : [ {text : "拨打",}, {text : "删除",} ]} ]});},press : function() {var text = this.text, textfield = Ext.getDom("tf");if (/[0-9*#]/.test(text)) {//在textfield中显示所点击按钮的数字textfield.value += text;} else if (this.text == "删除") {//删除功能textfield.value = textfield.value.slice(0, -1);} else if (this.text == "拨打") {//这个先不要管他Tel.telcall(textfield.value);}}});
注:其实从上面可以知道ContactTelPanel是继承Ext.Panel,然后这个面板中有很多个键,每个键都监听click事件。确实在这里觉得自己敲得不是很好,应该是用事件委托来实现,因为你每个按钮都监听了click事件,太影响效率了。用事件委托我们可以指监听它的父节点的click事件就行了,然后根据事件流来判断目的对象并操作。本文重点还是监听事件里面handler : this.press这段代码中 。我遇见的问题就是如果我在press函数要用到这个类ContactTelPanel的一些属性,怎么办?
Idea
我在想,我要在press函数中用到这个类的属性,我直接在press用this对象来获取不就行了,但是我错了,比如你在press函数中console.dir(this),看chrome控制台出现的是什么?不幸的是它出现的是Button对象,它的this指针改了。确实有点麻烦,然后我就想了三个方法,如下:
Solution
- 1 在每个监听事件的函数中传参
- 代码:handler : this.press(this),然后在press函数体中写alert(arguments[0])
- 出现的情况:确实在这个页面加载的时候就弹出窗口是ContactTelPanel,但是你点击那些按钮的时候它没出现了
- 原因:this.press(this),这样子写javascript解析器会当作调用press函数,然后在你加载页面就执行了
- 2 在这个ContactTelPanel类中设置全局变量
- 代码:比如在第五行设置me = this,然后在press函数体中写alert(me)
- 出现的情况:确实可以在点击按钮的时候弹出窗口,成功了
- 缺点:污染全局变量,容易被别人无意篡改。比如我在引入这个页面的js后面再引用其他js的时候,在后面的js中设置var me = "monkindey",那么你再点击那个页面的按钮的时候它会弹出123,为不是ContactTelPanel对象
- 3 简单运用了闭包
- 代码:handler : function(){me.press(me)} 注:me就是ContactTelPanel对象,因为在function中this指针已经是button对象了,所以应该在function外面用me(或者其他变量名)保存this对象,即var me = this
- 出现的情况:这个当然是成功
- 4 用call来实现函数绑定
- 代码:handler : function(){ me.press.call(this,me);}
- 个人觉得:这个应该才是最好用的
1 0
- JavaScript函数绑定
- javascript函数绑定
- javascript中的函数绑定
- JavaScript函数绑定
- es6 javascript 函数绑定
- Javascript函数绑定
- Javascript-bind绑定函数
- JavaScript-bind()与函数绑定
- javascript动态绑定带参数的函数
- 动态绑定javascript函数的共用方法
- javascript使用bind()函数绑定this
- JavaScript之函数绑定与函数柯里化(高级函数)
- JavaScript函数绑定Demo以及函数Currying柯里化
- javascript中动态绑定带参数的函数
- javascript 动态绑定函数的参数传递例子
- JavaScript跨浏览器的添加删除事件绑定函数
- JavaScript跨浏览器的添加删除事件绑定函数
- JavaScript中为事件句柄绑定监听函数
- Agent,为何要使用代理
- hdu 3326 Another kind of Fibonacci (矩阵构造)
- R语言个人笔记
- js动态添加表格,全选和删除
- html与css的学习总结
- javascript函数绑定
- CSU OJ 1120 病毒(湖南省第八届大学生计算机程序设计竞赛)
- linux下php配置问题
- 01_android入门_adb命令的使用
- VS2008中MFC界面编程Caption中文全是乱码的解决办法
- Android中心渐变动画XML
- TCP三次握手协议解析
- 我理解的华为成功的秘籍
- C语言如何在两个文件中访问同一个全局变量