prototype.js를 사용하여 클래스를 만드는 방법

Question

prototype.js를 사용하여 클래스를 만드는 예제와 그 작동 방식을 보여줄 수 있습니까? 누구든지 공식 사이트가 아닌 prototype.js에 대한 좋은 예와 자습서를 제공 할 수 있습니까?

Answer 1

PrototypeJS 클래스 만들기는 일반적인 OOP 언어로 클래스를 만드는 것과 매우 유사합니다. 지금, 방법과 그것을 채우는 당신이 방법을 넣으면 initialize PrototypeJS 생성자

var myClass = Class.create(
{ 
    initialize : function() 
    { 
     this.options = 0; 
    } 
}); 

으로 그 화재합니다 -

먼저이 빈 클래스를 생성합니다

var myClass = Class.create({ }); 

클래스 이름으로 시작

initialize() 메서드에서 원하는 값을 기본값으로 설정하거나 클래스의 속성을 초기화하기 만하면됩니다. 다른 메소드를 추가하고 클래스를 인스턴스화하는 방법을 보여줍니다.

var myClass = Class.create(
{ 
    initialize : function() 
    { 
     this.options = 0; 
    }, 

    testme : function() 
    { 
     this.options++; 
    }, 

    showme : function() 
    { 
     alert(this.options); 
     return this.options; 
    } 
}); 

var theClass = new myClass(); 

메소드 내에서 다른 메소드를 호출하고 옵션을 생성자에 전달할 수 있습니다.

var myClass = Class.create(
{ 
    initialize : function(option) 
    { 
     this.options = (option ? option : 0); 

     this.testme(); 
    }, 

    testme : function() 
    { 
     this.options++; 
    }, 

    showme : function() 
    { 
     alert(this.options); 
     return this.options; 
    } 
}); 

var theClass = new myClass(200); 
theClass.showme(); 

//will alert 201 and return 201 

이것은 멋지지만 모두 클래스 상속은 어떨까요? 그것은 OOP에서 큰 것입니다. 우리는 자식 클래스 인 별도의 클래스가 myClass이라고 말할 수 있습니다. 당신이 하위 클래스에서 재정의되는 모든 방법을 위해 당신은 $super으로 첫 번째 변수를 전달할 수 있으며, 그 같은 이름의 부모의 방법을 참조합니다 -이 희망

var myChildClass = Class.create(myClass, 
{ 
    initialize : function($super,option) 
    { 
     $super(option); 

     // the child class needs option's default value at 150 or whatever is 
     // passed so run the parent initialize first and then redefine the 
     // option property 
     this.option = (option ? option : 150); 

     // you can still run methods in the parent that are not overridden in 
     // the child 
     this.testme(); 
    } 
}); 

var child = new myChildClass(); 
child.showme(); 

//will alert() 151 and return 151 

이 도움이됩니다 범위 해상도와 유사 당신. 여기

는

https://github.com/jwestbrook/Prototype.Growler

https://github.com/jwestbrook/Prototype.Watermark

https://github.com/jwestbrook/bootstrap-prototype