Home  >  Article  >  Web Front-end  >  prototype 1.5 & scriptaculous 1.6.1 study notes_prototype

prototype 1.5 & scriptaculous 1.6.1 study notes_prototype

WBOY
WBOYOriginal
2016-05-16 19:26:291243browse

I recently started working on otalk, which was based on prototype 1.4 at first. Later, because I added scriptaculous 1.6.1, she requested that the prototype version be 1.5, so I upgraded to 1.5. I learned how to use scriptaculous by watching the demo.
The usage will be sorted out later, because I was not satisfied with the results many times during the use. I wanted to see the code but couldn't understand it. After a torture, I made up my mind to understand the code of scriptaculous and prototype!

Here are my study notes, there may not be any order and logic. After the study is completed, I will finally sort it out

The first is to define the class. After looking at some introductions from Teacher Xiaoxiao, I saw that when I experimented, there were often many I understand things after looking at them, but they are actually quite different

var Class = {
create: function() {
return function() {
this.initialize.apply(this, arguments);
}
}
}

defines a class function as a template or prototype for creating a class
Using method
var llinzzi= Class.create( );
llinzzi.prototype = {
initialize:function(){
document.write('Instance created');
},
fun1:function(){document.write ('Method is called by instance');}
}

var linChild = new llinzzi();
Run, output 'Instance is created' indicating that initialize is called when creating an instance
Looking back at the Class code
return function() {
this.initialize.apply(this, arguments);
}
It can be seen that when the create method is executed, the call starts.
linChild.fun1();
Output 'Method called by instance', fun1 method was successfully called
That is, when the prototype's Class.create(); method is used to create an object, initialize is used as a special method. Executed when creating an instance for initialization.

Continuation
Object.extend = function(destination, source) {
for (var property in source) {
destination[ property] = source[property];
}
return destination;
}

Usage
Object.extend(destination, source);
What makes me feel strange is A piece of code in scriptaculous
var options = Object.extend({
greedy: true,
hoverclass: null,
tree: false
}, arguments[1] || {}) ;
Since we are defining an options, why do we need to use the Object.extend method
directly
var options ={
Greedy: true,
hoverclass: null,
tree: false
}
Isn’t that enough? Wait, there is a problem. There are arguments[1] || {}, which should be the goal. The goal is the parameter of the function. Analyze and get the parameter. If there is no such parameter When it is {}, it is afraid. If there is one, it is also in the format of {hoverclass:'xx'}. Oh, it turns out that defining options is not that simple. First check whether there are parameters. Regardless of whether there are any, use Object The .extend method appends or overwrites the object in the parameter to the previous { Greedy: true, hoverclass: null, tree: false}. If the parameter is none, it is quite simple as the above var options = {}; but, What if there is {hoverclass:'abc'} in the parameter? At this time, the original hoverclass value null is overwritten, and then the return value of the Object.extend method is the entire value after the first parameter is overwritten
I have to admire it , defined paragraph by paragraph, with default values ​​set.
The more you read, the more interesting it becomes, keep reading.

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn