Ext 의 향원 모드 (flyweight)

오늘 Ext 의 sample 을 보면 다음 단락 을 모 르 겠 습 니 다.

  Ext.fly(node.ui.elNode).ghost('l', {
                callback: node.remove, scope: node, duration: .4
            });

 주로 Ext. fly 에 대해 잘 모 르 기 때문에 찾 아 보 니 수확 이 적지 않 아 여러분 과 공유 하고 있 습 니 다.
Ext. fly 는 Ext. Element. flyweight 의 약자 로 Ext 의 Element 류 에서 향 원 모드 에 대한 응용 이다. Element 류 의 방법 은 모두 DOM 대상 에 대한 조작 이 고 DOM 작업 은 Ext 의 핵심 이기 때문에 너무 자주 DOM 노드 를 만 들 면 성능 이 떨 어 지기 때문에 향 원 모드 를 사용한다.향 원 모델 은 공유 하 는 방식 으로 대량의 입자 대상 을 효율적으로 지원 하고 향 원 모델 에 관 한 상세 한 자 료 는 참고 할 수 있다.http://fengzl.iteye.com/blog/117129라 는 블 로그 글 을 올 렸 다.
Ext 위 키 에 서 는 Flyweight 에 대해 'Use sharing to support large numbers of fine - grained objects efficiently' 라 는 짧 은 설명 이 있 습 니 다.  ’，어떤 형 제 는 모 르 고 포럼 에 올 라 가 질문 을 했 습 니 다. 다음은 Ext 의 핵심 developer 의 대답 입 니 다.
 
Ext.Element wraps a lot of functionality around DOM element/node, for example functions like hide, show, all animation stuff, dimensions getting and setting function and a lot more.Ext.Element keeps reference to DOM element it is wrapped around in dom property. Once you have an Ext.Element (e.g. you call Ext.get('some-id') it is an instance of Element class and you can work with it as such.Now, imagine that you need to hide 1000 DOM nodes, you call 1000 times Ext.get('some-one-of-1000-id').hide() so you create 1000 instances of Element just to call one function: hide.Ext.fly is one instance of Ext.Element with "replaceable" DOM node it is wrapped around. If you call 1000 times Ext.fly('some-one-of-1000-id').hide() you 1000 times replace dom property of one instance of Ext.Element. Result: higher performance, lower memory usage. You only need to keep in mind that you cannot keep Element returned by Ext.fly for later use as it's dom will sooner or later gets replaced by another one.
 
다음은 그 실현 (Ext. Element) 을 살 펴 보 겠 습 니 다.

Ext.fly = El.fly;
/**
 * Gets the globally shared flyweight Element, with the passed node as the active element. Do not store a reference to this element -
 * the dom node can be overwritten by other code.
 * @param {String/HTMLElement} el The dom node or id
 * @param {String} named (optional) Allows for creation of named reusable flyweights to
 *                                  prevent conflicts (e.g. internally Ext uses "_internal")
 * @static
 * @return {Element} The shared Element object (or null if no matching element was found)
 */
El.fly = function(el, named){
    named = named || '_global';
    el = Ext.getDom(el);
    if(!el){
        return null;
    }
    if(!El._flyweights[named]){
        El._flyweights[named] = new El.Flyweight();
    }
    El._flyweights[named].dom = el;
    return El._flyweights[named];
};

  EI._flyweight     ？ 

El._flyweights = {};
var flyFn = function(){};
flyFn.prototype = El.prototype;
var _cls = new flyFn();

// dom is optional
El.Flyweight = function(dom){
    this.dom = dom;
};

El.Flyweight.prototype = _cls;
El.Flyweight.prototype.isFlyweight = true;

이렇게 해서 Ext. fly 가 무엇 인지 기본적으로 알 겠 지? 동시에 Ext. fly 와 Ext. get 의 차이 도 알 겠 지?