As a successful open source framework for JavaScript, it encapsulates many useful functions. Although the official does not provide any documents, I searched on Google and found many related documents. However, I still encountered some problems during the learning and use process. I hope that familiar friends can give more guidance. I pay attention to these points for learning, and at the same time, I will talk about the results of learning and the problems encountered in each point. ^_^
1. Class creation
It has been packaged, this is very simple.
var Person=();
This creates a Person class, which must provide an implementation of the initialize method:
={
initialize:function(){
}
};
Compared with java, it is equivalent to (), and initialize is equivalent to a constructor. Like java constructors, it can be customized as a parameter property.
It can be seen that after defining class in this way, it has a clear distinction from JavaScript's original function method to define a class. In this case, we can use it to define a class and directly define functions.
Classes usually also involve definitions of static members (static nature) and instance members (need to be instantiated before they can be called).
This is also very easy in javascript:
Static members:
var Person={
name:'person',
getName:function(){return 'person'}
};
Instance members:
={
childname:'child',
eat:function()
}
The above can be called directly, but the eat method needs to be called by var person=new Person();();.
2. Inheritance of Classes
Class inheritance is actually supported by JavaScript itself, but prototype provides an alternative method.
According to the implementation supported by javascript:
var Student=();
=new Person();
This enables Student inheritance to Person.
This can be implemented in the case of using prototype:
var Student=();
(,);
You can use it when adding methods to subclasses
=function(){};
or
(,{
study:function(){}
});
3. Event mechanism (listening and observation of class method execution)
I encountered some doubts in the event mechanism. As an event mechanism, I mainly need to provide the definition of events, listening to events and observing events.
In JavaScript, events need to start with on, that is, as events, they need to use a similar naming like onclick:
Add an external event to the Student above, such as:
=function(){
();
}
=function(){};
This onstudy is handed over to the corresponding instance to implement, for example, the instance adopts this method:
function studyThis(){
alert("study this");
}
var student=new Student();
=studyThis();
For events, we usually want to listen and observe. We try this based on bindAsEventListener and Observe provided by prototype:
=(this);
function watchStudy(event){
alert("watch study");
}
According to the event mechanism, you should see two prompts for study this and watch study when executing study, but after the final execution, you can only see the prompt for watch study. Why is this? According to the concept of listener, the original method should not be overwritten, but I looked at the source code and according to the above writing method, it will indeed be overwritten.
Observe tried this:
(study,'study',watchStudy,false);
According to the observation mechanism, you should see two prompts when executing study, but after the final execution, this line does not play any role at all.
Why is this?
1. Class creation
It has been packaged, this is very simple.
var Person=();
This creates a Person class, which must provide an implementation of the initialize method:
={
initialize:function(){
}
};
Compared with java, it is equivalent to (), and initialize is equivalent to a constructor. Like java constructors, it can be customized as a parameter property.
It can be seen that after defining class in this way, it has a clear distinction from JavaScript's original function method to define a class. In this case, we can use it to define a class and directly define functions.
Classes usually also involve definitions of static members (static nature) and instance members (need to be instantiated before they can be called).
This is also very easy in javascript:
Static members:
var Person={
name:'person',
getName:function(){return 'person'}
};
Instance members:
={
childname:'child',
eat:function()
}
The above can be called directly, but the eat method needs to be called by var person=new Person();();.
2. Inheritance of Classes
Class inheritance is actually supported by JavaScript itself, but prototype provides an alternative method.
According to the implementation supported by javascript:
var Student=();
=new Person();
This enables Student inheritance to Person.
This can be implemented in the case of using prototype:
var Student=();
(,);
You can use it when adding methods to subclasses
=function(){};
or
(,{
study:function(){}
});
3. Event mechanism (listening and observation of class method execution)
I encountered some doubts in the event mechanism. As an event mechanism, I mainly need to provide the definition of events, listening to events and observing events.
In JavaScript, events need to start with on, that is, as events, they need to use a similar naming like onclick:
Add an external event to the Student above, such as:
=function(){
();
}
=function(){};
This onstudy is handed over to the corresponding instance to implement, for example, the instance adopts this method:
function studyThis(){
alert("study this");
}
var student=new Student();
=studyThis();
For events, we usually want to listen and observe. We try this based on bindAsEventListener and Observe provided by prototype:
=(this);
function watchStudy(event){
alert("watch study");
}
According to the event mechanism, you should see two prompts for study this and watch study when executing study, but after the final execution, you can only see the prompt for watch study. Why is this? According to the concept of listener, the original method should not be overwritten, but I looked at the source code and according to the above writing method, it will indeed be overwritten.
Observe tried this:
(study,'study',watchStudy,false);
According to the observation mechanism, you should see two prompts when executing study, but after the final execution, this line does not play any role at all.
Why is this?