javascript가 extjs 이벤트를 구현하는 방법에 대한 기본 예제에 대한 자세한 설명

Extjs가 상속을 구현하는 함수는 매우 핵심적인 함수인 Ext.extend입니다. 확장 메소드에는 두 개의 재구성된 버전이 있습니다. 첫 번째는 두 개의 매개변수를 허용하며, 첫 번째는 확장(Function superclass, Object overrides)이고 두 번째는 확장입니다. (함수 하위 클래스, 함수 상위 클래스, 개체 재정의): 함수, 두 번째 버전은 하위 클래스를 기반으로 합니다. Superclass는 슈퍼클래스의 생성자이고 overrides는 객체이며 내부 속성은 상위 클래스의 속성을 재정의하기 위한 것입니다. 상위 클래스를 상속하는 하위 클래스에는 상위 클래스의 프로토타입에 있는 모든 메서드가 포함됩니다. 그리고 하위 클래스는 상위 클래스의 메서드를 재정의(override)할 수 있습니다. 또한 하위 클래스의 각 객체도 상위 클래스의 메서드를 재정의할 수 있습니다. 사실 이 함수는 프로토타입을 수정하는 것과 같은 효과가 있다고 생각합니다. 물론 extjs의 목적은 프로토타입의 마법적인 것을 완전히 보호하여 프로그래머가 다른 언어처럼 Javascript를 처리할 수 있도록 하는 것입니다. 물론, 그럼에도 불구하고 상속은 여전히 ​​일반적인 상속과 다소 다릅니다. 먼저 예를 살펴보고 Person 클래스를 준비하겠습니다.

Person = function(name) { 
this.name = name; 
this.fn = function() { alert('I am a person') }; 
} 
Person.prototype.print=function(){ alert('I am a person');} 
Person.prototype.showAge = function() { alert('I am older than 0'); } 
Person.prototype.showName = function() { alert('Show Name:'+this.name) }; 
var per = new Person('Tom'); 
per.showName();子类：Student = function(id) { 
this.id = id; 
} 
Student.prototype.showID = function() { alert(this.id); } //子类的方法

Inheritance:
Ext.extend(Student, Person); ) ; !!결과가 없습니다! stu에는 이름 stu.fn();에 대한 정의가 없습니다. !!결과가 없습니다. stu.showID(); 여전히 결과가 없습니다. 이 시점에서 우리는 몇 가지 차이점을 발견했습니다. 상위 클래스의 생성자에 있는 내용은 상속되지 않습니다. . 을 사용하면 상위 클래스의 생성자가 호출되지 않으며 프로토타입에 있는 하위 클래스의 기존 메서드도 손실됩니다. 계속해서 읽고 Ext.extend 아래의 코드를 다음으로 바꾸세요.

var stu = new Student('01'); 
Student.override({ print: function() { alert('I am a student'); } }); 
stu.override({ print: function() { alert('I am a bad student,but I won\'t affect others'); } }); 
stu.print(); 
stu.showAge(); 
var stu2 = new Student(); 
stu2.print();

여기의 함수는 모두 예상대로 출력될 수 있습니다. showAge는 실행되는 상위 클래스의 메서드이고 stu.print는 stu.override에 지정된 메서드입니다. 실행되고 stu2는 Student.override에 지정된 메서드를 실행합니다. 이 시점에서 우리는 확장이 어떻게 구현되는지 대략적으로 추측할 수 있습니다. 실제 소스 코드를 살펴보겠습니다. 이 메소드는 Ext.js에 있습니다. 코드와 설명은 다음과 같습니다. 인라인 오버라이드를 사용하면 이것은 수정된 프로토타입입니다:override:

// inline overrides 
var io = function(o){ //注意这个方法的this，仅看这里并不知道这个this是什么，下面这个io会被赋值给sbp.override，也就是子类的prototype 
for(var m in o){ //从而每个子类的对象的override都会指向这个方法，如果子类对象调用了override，那么这个this就是子类的对象了。也就是 
this[m] = o[m]; //上面的例子中stu.override表现出来的效果，仅对当前对象有效。从这里可以看出，override不仅仅是传统意义上的覆盖，完全也可以 
} //用来添加新方法。 
}; 
var oc = Object.prototype.constructor; 
return function(sb, sp, overrides){ 
if(Ext.isObject(sp)){ //是在检测当前使用的是哪个版本的重构函数。如果sp实际上是overrides，就做些替换工作，让变量的实际意义和名称相符合。 
overrides = sp; 
sp = sb; 
sb = overrides.constructor != oc ? overrides.constructor : function(){sp.apply(this, arguments);}; //这个没看懂…… 
} 
var F = function(){}, 
sbp, 
spp = sp.prototype; 
F.prototype = spp; //F是父类的一个“干净”拷贝，所谓干净，是指它不会把父类中在构造函数内部定义的属性带过来。 //例如 Person=function() // {this.privateFn=new function{ some code goes here}} //那么这个privateFn对子类是不可见的，所以在构造函数中利用this定义的属性都相当于是类的私有变量。 
sbp = sb.prototype = new F(); //将子类的prototype设置为父类的prototype，继承的核心步骤。 sbp.constructor=sb; //设置正确的构造函数指向，见 JavaScript继承详解 
sb.superclass=spp; //设置父类 
if(spp.constructor == oc){ //没看懂……,这个是干嘛用的？望高人指点 
spp.constructor=sp; 
} 
sb.override = function(o){ //子类的重写方法，这个重写方法是函数的重写方法。它修改的是prototype。 
Ext.override(sb, o); //见最后。 
}; 
sbp.superclass = sbp.supr = (function(){ //设置原型的父类 
return spp; 
}); 
sbp.override = io; //给子类的prototype提供override方法，这样单个实体也可以覆盖，它修改的是实体对象。注意和上面的sb的override区分。 
Ext.override(sb, overrides); //重写 
sb.extend = function(o){return Ext.extend(sb, o);}; //给子类提供extend方法，以实现多重继承 
return sb; //返回子类。 
}; 
}();

이제 공식적으로 Extjs의 이벤트 모델을 소개할 수 있습니다. 다른 언어의 이벤트와 마찬가지로 먼저 클래스에 대한 이벤트를 정의해야 합니다. 다른 언어(예: C#)의 이벤트에는 일반적으로 이벤트 유형이 실제로 대리자의 배열로 간주될 수 있습니다. , 대리자는 실제로 함수입니다. Add 시간 리스너(리스너)는 대리자 배열에 대리자(함수)를 추가하려고 합니다. 소위 트리거 이벤트는 배열의 모든 함수를 실행하는 것입니다. Javascript는 유사하지만 Javascript의 기능은 해당 언어보다 훨씬 강력하고 유연하므로 이벤트 유형이 필요하지 않습니다. Javascript 이벤트는 문자열처럼 보입니다(내부적으로 배열도 유지해야 함). Observale.addEvents 메서드를 통해 이벤트를 추가하고, Observale.fireEvent를 통해 이벤트를 트리거하고, Observale.addListner를 통해 이벤트 리스너를 추가할 수 있습니다. 다음은 거의 의미가 없지만 문제를 보여주는 예입니다.

function(origclass, overrides){ 
if(overrides){ 
var p = origclass.prototype; 
Ext.apply(p, overrides); 
if(Ext.isIE && overrides.hasOwnProperty('toString')){ // 这个是什么？IE的特殊点？ 
p.toString = overrides.toString; 
} 
} 
}

Odder는 생성자를 통해 범위를 전달한 다음 이 범위에서 모든 홀수를 찾고 홀수를 찾을 때마다 이벤트를 트리거하는 클래스입니다. 발견된 홀수에 대해 경고하기 위해 이벤트 핸들러를 추가합니다. 여기서 이벤트 핸들러의 매개변수는 프로그래머에 의해서만 일관성을 유지할 수 있다는 점에 유의해야 합니다. 이는 대리자만큼 강력하게 형식화되지 않습니다.

위 내용은 javascript가 extjs 이벤트를 구현하는 방법에 대한 기본 예제에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!