Prototype element Learning notes (Part One) _prototype

First of all, the element of the DOM extension of the technical thinking, I also read the code of the day, this has a point of view.
The most common use of prototype is the code such as $ (' Div1 '). To get the extended element object, we can then use its various extended methods, such as:
$ (' Div1 '). Addclassname (' loading '). Show ();
So, our research on the extension of the element is supposed to be the entrance.
function $ (Element) {
if (Arguments.length > 1) {
for (var i = 0, elements = [], length = Arguments.length i < length; i++)
Elements.push ($ (arguments[i]));
return elements;
}
if (object.isstring (Element))
element = document.getElementById (element);
Return Element.extend (Element);
}
This function is a clever recursion can handle a number of parameters, I really admire AH. The key in the code is: element.extend (Element), before extend, element is only a normal DOM object, extend is expanded after, visible, the secret is in extend.
Since it is element.extend (element), then, of course, we can not alone to study extend, or must first understand what element is.
(function () {
var element = this. Element;
This. Element = function (tagName, attributes) {
attributes = Attributes | | { };
TagName = Tagname.tolowercase ();
var cache = Element.cache;
if (Prototype.Browser.IE && attributes.name) {
TagName = ' < ' + tagName + ' name= ' + attributes.name + ' > ';
Delete Attributes.name;
Return Element.writeattribute (Document.createelement (tagName), attributes);
}
if (!cache[tagname]) cache[tagname] = Element.extend (document.createelement (tagName));
Return Element.writeattribute (Cache[tagname].clonenode (FALSE), attributes);
};
Object.extend (this. Element, Element | | { });
). Call (window);
This code is more personalized, and the basic structure is: (function () {...}). Call (window); So, when you see this structure, you know that this is all pointing to window in the ellipsis section.
var element=this. Element; This line is not difficult to understand, but the key is this. element is not yet defined at this time. The following is the definition of a class: window. Element class, which has two parameters: TagName, attributes. Its function is to create an element, and put a pure specified label corresponding to the DOM object into the cache. After the element is created, and the specified property value is written. Here to remind:
WriteAttribute, Readattribute These two function functions obviously, read and write properties, but its code is not simple Ah, its complexity mainly from different browsers, read and write properties of the different methods.
This is the definition of the constructor of the element class, after which the Element.cache = {}; cache, what cache, what is not good description, the various tags of the pure version DOM element object cache? That's disgusting. Followed by is a: element.methods={...}, where almost all extension methods are defined. The extension method here has a feature that does not have a single element reference in the code that uses this. This is a foreshadowing, why to be defined as this, there is a reason. and later confessed.
Now the element probably said a bit, had to talk about Element.extend.
Element.extend = (function () {
if (Prototype.BrowserFeatures.SpecificElementExtensions)
return PROTOTYPE.K;
var Methods = {}, Bytag = Element.Methods.ByTag;
var extend = object.extend (function (Element) {
if (!element | | element._extendedbyprototype | |
Element.nodetype!= 1 | | element = = window) return element;
var methods = Object.clone (Methods),
TagName = Element.tagname, property, value;
Extend methods for specific tags
if (Bytag[tagname]) Object.extend (methods, Bytag[tagname));
For (property in methods) {
Value = Methods[property];
if (object.isfunction (value) &&! ( property in Element)
Element[property] = Value.methodize ();
}
Element._extendedbyprototype = prototype.emptyfunction;
return element;
}, {
Refresh:function () {
Extend methods for all tags (Safari doesn ' t need this)
if (! Prototype.BrowserFeatures.ElementExtensions) {
Object.extend (Methods, element.methods);
Object.extend (Methods, Element.Methods.Simulated);
}
}
});
Extend.refresh ();
return extend;
})();
The first line of the principle I am not sure, do not say, the following code seems complex, to me to draw out its approximate structure to:
var extend=object.extend (function (Element) {...},{refresh:function () {...}});
In extend, the first function is to get the method from the Xxxx.methods and copy it into this element. This is mainly based on the considerations:
One, the element if is a form, must take the method from the Form.methods
If the element is an INPUT element within the form, the method must be taken from the Form.element
All elements should obtain a common method from the Element.methods (the following refresh takes into account).
That is, there are a number of things to consider here, which should have been an if statement, but a ELEMENT.METHODS.BYTAG has been cleverly designed here. Thus solving the problem.
if (object.isfunction (value) &&! ( property in Element)
Element[property] = Value.methodize ();
If the member in the methods is not a function or the function already exists in the element, it is not overwritten. Here is the key, that Value.methodize (), at this point, the foreshadowing of the previous entry into force, the role of Methodize is to pass the current caller into the method. and passed in as the first parameter. It is generally used in the following ways:
Obj.methodname=functionname.methodize ();
This way, when called, the Obj object passes in the Functionsname function as the first argument.
So far, the general idea of this extend function should be clear, and there is still a question not clear: according to the tagname of the element to obtain the extension from which methods, then we need to know the details of Bytag, look up, found:
Object.extend (Element.Methods.ByTag, {
"FORM": Object.clone (Form.methods),
"INPUT": Object.clone (Form.Element.Methods),
"Select": Object.clone (Form.Element.Methods),
"TEXTAREA": Object.clone (Form.Element.Methods)
});
OK, that's pretty much it.