프로토타입 요소 연구 노트(1부)_prototype

먼저 DOM 확장에 대한 Element의 기술적 아이디어에 대해 이야기하겠습니다. 또한 하루 동안 코드를 읽은 후 몇 가지 통찰력을 얻었습니다.
프로토타입을 사용할 때 가장 일반적으로 사용되는 코드는 $('div1')입니다. 확장된 요소 객체를 얻으려면 다음과 같은 다양한 확장 메서드를 사용할 수 있습니다.
$('div1').addClassName('loading').show()> 따라서 이를 다음과 같이 사용해야 합니다. Element의 확장을 연구하기 위한 진입점입니다.
function $(element) {
if (arguments.length > 1) {
for (var i = 0, elements = [], length =args.length; i elements.push($(arguments[i])); return elements;
}
if (Object.isString(element))
element = document.getElementById(element); >return Element.extend(element);
}
이 함수는 한 번의 영리한 재귀로 여러 매개변수를 처리할 수 있다는 점이 정말 인상 깊었습니다. 코드의 핵심은 다음과 같습니다: Element.extend(element) 확장하기 전의 요소는 확장된 후에는 확장된 것입니다.
Element.extend(element)이므로 당연히 Extension만 공부할 수는 없습니다. 먼저 Element가 무엇인지 이해해야 합니다.
(function() {
var element = this.Element;
this.Element = function(tagName, attribute) {
attribute = attribute || { };
tagName = tagName. toLowerCase();
var 캐시 = Element.cache;
if (Prototype.Browser.IE && attribute.name) {
tagName = '
'; 🎜>　　　 return Element.writeAttribute(document.createElement(tagName), 속성);
　　 } 　　 if (!cache[tagName]) 캐시[tagName] = Element.extend(document.createElement(tagName)); 🎜> Return Element.writeAttribute(cache[tagName].cloneNode(false), attribute);
}
Object.extend(this.Element, element ||
}); (window);
이런 종류의 코드는 더 개인화되어 있습니다. 기본 구조는 다음과 같습니다. (function(){...}).call(window); 따라서 이 구조를 보면 이것이 나타납니다. 줄임표 부분에서는 창을 가리킵니다.
var element=this.Element; 이 줄은 이해하기 어렵지 않지만 중요한 점은 this.Element가 아직 정의되지 않았다는 것입니다. 다음 단계는 tagName, attribute라는 두 개의 매개변수가 있는 window.Element 클래스를 정의하는 것입니다. 그 기능은 요소를 생성하고 지정된 순수 태그에 해당하는 DOM 객체를 캐시에 넣는 것입니다. 요소가 생성된 후 지정된 속성 값이 기록됩니다. 다음은 알림입니다.
writeAttribute와 readAttribute의 두 함수는 분명히 속성을 읽고 쓰는 기능을 가지고 있습니다. 그러나 해당 코드의 복잡성은 주로 다른 브라우저에서 속성을 읽고 쓰는 데서 발생합니다. 다른.
이것은 Element 클래스의 생성자에 대한 정의이며, Element.cache = { } 캐시, 어떤 종류의 캐시인지 설명하기 쉽지 않습니다. 다양한 태그의 DOM 요소 개체의 순수 버전 캐시입니다. ? 이 말은 너무 역겹습니다. 바로 다음은 Element.Methods={......}입니다. 여기서는 거의 모든 확장 메서드가 정의됩니다. 여기의 확장 메서드에는 모두 하나의 기능이 있지만 코드에서는 모두 이 기능을 사용하지 않습니다. 이렇게 정의한 데는 이유가 있다. 나중에 말씀 드리겠습니다.
Element에 대해 간략하게 이야기했으니 이제 Element.extend에 대해 이야기해야 합니다.
Element.extend = (function() {
　　 if (Prototype.BrowserFeatures.SpecificElementExtensions)
　　　　 return Prototype.K;
　　var Methods = { }, ByTag = Element.Methods.ByTag;
　　var 확장 = Object.extend(function(element) {
　　　　 if (!element || element._extendedByPrototype ||
　　　　 element.nodeType != 1 || element == window) return element;
　　　　var method = Object.clone(Methods),
　　　　 tagName = element.tagName, property, value;
　　　　// 특정 태그에 대한 메서드 확장
　　　　 if (ByTag[tagName]) Object.extend(methods, ByTag[ tagName]);
　　　　for (메소드의 속성) {
　　　　　　 value = method[property];
　　　　　　 if (Object.isFunction(value) && !(요소의 속성))
　　　　　　　　 요소[속성] = value.methodize();
　　　　 }
　　　　element._extendedByPrototype = Prototype.emptyFunction;
　　　　 return element;　　 새로고침: function() {
　　　　　　 // 메소드 확장 모든 태그에 대해 (Safari에는 이것이 필요하지 않습니다)
　　　　　　 if (!Prototype.BrowserFeatures.ElementExtensions) {
　　　　　　　　 Object.extend(Methods, Element.Methods);
　　　　　　　　 Object.extend(메소드, 요소.메소드.시뮬레이트);
　　　　　　 }
　　　　 }
　　 });
　　extend.refresh();
　　 반품 연장;
})(); extend内，第一个函数数是从XXXX.Methods中获取方法，并复到本element中。就得从양식. 메서드 사용 방법
2, 元素如果是表单内的可输入元素, 就得从Form.Element중간 방법
3, 所有元素도应当从Element.Methods中取得통용방법(后면적 참조) sh所考虑的).
也就是说，这儿要考虑多种情况，本来应当是个if语句的事，但是，这儿巧妙地设计了一个Element.Methods.ByTag。从而解决了这个问题。
if ( Object.isFunction(value) && !(요소의 속성))
element[property] = value.methodize();
Methods中 的成员不是函数或者函数에서element中已存在, 则不会覆盖.效了，methodize 작업을 수행하기 전에 사용하는 사람이 사용하는 방법은 다음과 같습니다.
obj.methodname=functionname.methodize();
这样，调用时，obj对象就会作为第一个参数传入functionsname这个函数。
到此为止，这个extend函数中的大概思路应当清晰了，现在还有一个问题没有清楚：根据元素의 tagName来获得应当从哪个Methods获得扩 Exhibition ，那么，我们有必要了解一下ByTag的详情，查找一下，找到了>Object.extend (Element.Methods.By : 태그, {
"양식": Object.clone(Form.Methods),
"INPUT": Object.clone(Form.Element.Methods),
"SELECT": Object.clone(Form.Element.Methods),
"TEXTAREA ": Object.clone(Form.Element.Methods)
});
그렇습니다.