이 글은 주로 자바스크립트 함수 바인딩의 사용법을 소개하고, 자바스크립트 함수 바인딩의 원리, 구현 방법, 관련 운영 기술을 예제 형식으로 분석하여 도움이 필요한 친구들에게 도움이 되었으면 좋겠습니다.
Perface
이 페이지와 1, 2, 3 등을 클릭하는 등의 일부 작업을 구현하라는 메시지가 표시되면 입력 텍스트에 표시되며 기능 삭제는 그냥 시뮬레이션일 뿐이니 전화로 문의해 주세요. 방금 시작했다면 다음과 같이 할 것입니다.
1. CSS와 HTML을 사용하여 인터페이스 배치
2. 자바스크립트 이벤트 위임을 사용하여 버튼의 상위 노드 클릭 이벤트 모니터링
객체 지향 사고를 사용하고 싶습니까? 저는 Ext에서 이 작업을 수행했기 때문에 캡슐화에 많은 도움이 되었다고 말하고 싶습니다. Ext를 한번도 사용해본 적이 없는 분들은 제가 아래에 게시한 코드를 잘 이해하지 못할 수도 있지만, 최선을 다해 명확하게 설명하겠습니다!
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、按钮3 items : [ { text : "1" }, { text : "2" }, { text : "3" } ] }, {// 这里是按钮4、按钮5、按钮6 items : [ { 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을 상속하고 이 패널에 많은 키가 있고 각 키가 클릭 이벤트를 수신한다는 것을 알 수 있습니다. 각 버튼이 효율성에 너무 많은 영향을 미치는 클릭 이벤트를 수신하므로 이벤트 위임을 사용하여 구현해야 합니다. 이벤트 위임을 사용하면 상위 노드의 클릭 이벤트를 수신한 다음 대상 객체를 결정하고 이벤트 흐름에 따라 작동할 수 있습니다. 이 글의 초점은 여전히 청취 이벤트의 handler: this.press
코드에 있습니다. 내가 직면한 문제는 프레스 기능에서 이 ContactTelPanel 클래스의 일부 속성을 사용해야 하는 경우 어떻게 됩니까? 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);}
Idea
프레스 기능에서 이 클래스의 속성을 사용하려면 이 개체를 사용하여 프레스에서 직접 가져올 수 있다고 생각했습니다. 하지만 예를 들어, 제가 틀렸습니다.console.dir(this)
누르기 기능을 사용합니다. Chrome 콘솔에 무엇이 나타나는지 확인하세요. 불행하게도 Button 객체가 나타나는데 this 포인터가 변경되었습니다. 사실 조금 번거로웠는데, 다음과 같은 세 가지 방법을 생각했습니다.
1 이벤트를 수신하는 각 함수에 매개변수를 전달합니다.
Code: handler: this. press( this)
를 누른 다음 press 함수 본문에 alert(arguments[0])
를 작성하세요.
this.press(this)
, 이렇게 자바스크립트 파서를 작성하면 함수를 누른 다음 페이지를 로드할 때 실행합니다. 🎜🎜2 이 ContactTelPanel 클래스에 전역 변수를 설정합니다. 🎜🎜🎜Code🎜: 예를 들어 다섯 번째 줄에 me = this를 설정하고 alert(me)를 씁니다.
가 press 함수 본문에 🎜🎜🎜 가 나타나는 상황 🎜 : 실제로 버튼을 눌렀을 때 창이 뜨는 것이 가능하고, 성공 🎜🎜🎜단점 🎜 : 전역 변수가 오염되어 다른 사람이 쉽게 조작할 수 있음 의도치 않게. 예를 들어 이 페이지의 js를 소개하고 다른 js를 참조하면 다음 js에서 var me = "monkindey"를 설정한 다음 해당 페이지의 버튼을 클릭하면 123이 팝업됩니다. ContactTelPanel object🎜🎜 3 closure🎜🎜🎜Code🎜의 간단한 사용: handler: function(){me.press(me)}
참고: me는 ContactTelPanel 개체입니다. 함수의 this 포인터 때문입니다. 은 이미 버튼 객체이므로 이 객체는 함수 외부에 me(또는 다른 변수 이름)와 함께 저장되어야 합니다. 즉, var me = this🎜🎜🎜무슨 일이 일어나는지🎜: 이것은 물론 성공입니다🎜🎜4 호출을 사용하여 함수 바인딩 구현🎜🎜🎜Code🎜 :handler: function(){ me.press.call(this,me);}
🎜🎜🎜개인적으로 생각해보면🎜: 이것이 가장 유용할 것 같습니다🎜🎜또 다른 것 : 이전 기사에서 JavaScript에 대한 자세한 설명을 참조하세요. 함수 바인딩은 순수 js를 기반으로 한 함수 바인딩 기술을 소개합니다. 관심 있는 독자는 둘 사이의 유사점과 차이점을 비교할 수 있습니다. 🎜🎜관련 추천: 🎜🎜🎜자바스크립트 상호작용을 위한 함수 바인딩 코드 사용 방법에 대한 자세한 설명🎜🎜🎜🎜js는 함수 바인딩 기술을 사용하여 이벤트 핸들러의 범위를 변경합니다_자바스크립트 기술🎜🎜🎜🎜자바스크립트 함수 바인딩에 대한 자세한 설명_기본 지식🎜 🎜위 내용은 JavaScript 함수 바인딩 사용법을 설명하는 예의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!