ExtJS 의 구조적 이해를 하고자 정리해 봅니다.

사용자 삽입 이미지


신고
Posted by Rhio.kim
사용자 삽입 이미지

javascript oop - class diagram


Javascript OOP 개발을 해오면서 과연 이 것이 OOP 일까? 아닐까?
라는 생각을 많이 했습니다.

OOP like 에서 OOP로 많이 탈바뀜 해가는 것은 확실합니다.
사실 부족한 부분도 많이 있을 것입니다.

위의 다이어 그램은 여러번의 시행착오로 javascript OOP 개발을 위해서 가장 효율적은 소스관리
OOP 개발방법, 유지보수의 간소화 등 다양한 목적을 담아서 도식화 하였습니다.

실제 MVC 개념도 포함되어 있습니다.

이는 Prototype.js 라는 오픈 프레임 워크 덕분에 실제로 OOP에 너무나도 가까운 개발을 할 수 있게
되었고 Prototype.js 가 아니였다면 위의 다이어그램에 있는 것을 포함한 다양한 클래스들이
더 많이 생성되어야 합니다.

Prototype.js 외에도 다양한 형태의 다양한 목적을 갖는 프레임워크들이 많이 있습니다.
Web2.0 방식의 개발방법을 채택하면서 웹 페이지가 아닌 실제 웹 어플리케이션을 제공할 수 있게 됩니다.

이에 javascript OOP 개발은 점점 더 절실해 집니다.

위의 다이어 그램을 간단히 설명하면.

최초 HTML document 가 요청되고 onload 가 되면 Controller 이 작동합니다.
새로운 인스턴스에 controller 가 생성되고 (이하 컨트롤러) 컨트롤러는 실제 어플리케이션을 구동시키기 위한

초기화를 담당하는  (TInitialize)에 의해서 Web Application을 구동하기 위한 준비를 합니다.

사용자 인터페이스 (TUserInterface), 사용자의 이벤트를 관리하는 이벤트 메니저 (TEventManager)가 있으며

사용자 이벤트가 발생하거나 실제로 UI에 서버의 데이터를 보여줄 UI에 뿌려주고 사용자의

이벤트가 발생하였을때 (TImplementation)는 그에 반응, 응답으로 결과를 표현한다.

이처럼 사용자의 이벤트를 캡쳐하고 그 이벤트에 해당하는 처리(서버 데이타 요청, UI의 변경, 사용자 요청에 응답) 를 대응합니다.

TModel은 각 모듈별 공동 사용 모듈을 캡슐화, 구체화, 확장하여 사용할 수 있도록 하여

확장을 통해 재 사용할 수 있고

마지막으로 TDestory에 의해서 생성된 인스턴스며 사용되지 않는 자원에 대한 리소스 반환자

역활을 담당합니다.

아시다시피 IE나 FF나 모든 브라우저에서는 리소스(이벤트, DOM오브젝트 등)관리를 소홀히 했다가는

메모리 누수에 헤어나올 수가 없어집니다.

좀더 좋은 내용을 포스팅 하고 싶었는데 아직 배워가는 상태라 부족함이 많습니다.

글 가운데 오탈자나 잘못된 내용이 있으면 알려주세요...
신고
Posted by Rhio.kim
  1. Class.def = function(definition) {
  2.   var klass = Class.create();
  3.   if(definition.__extend__)
  4.     Class.inherit(klass, definition.__extend__);
  5.   if(definition.__static__)
  6.     Object.extend(klass, definition.__static__);
  7.   if(definition.__include__) {
  8.     if(definition.__include__.constructor != Array)
  9.       definition.__include__ = [definition.__include__];
  10.     definition.__include__.each(function(include){
  11.       Object.extend(klass.prototype, include);
  12.     });
  13.   }
  14.   ["__static__","__extend__","__include__"].each(function(n){delete definition[n];}
  15.   Object.extend(klass.prototype, definition);
  16.   return klass;
  17. }   
  18.  
  19. Class.inherit = function(child, parent) {
  20.   Object.extend(child, parent);
  21.   child.__super__ = parent.prototype;
  22.   var dummy = function(){};
  23.   dummy.prototype = parent.prototype;
  24.   child.prototype = new dummy();
  25.   child.prototype.constructor = child;
  26.   return child;
  27. }


     for Example
    1. var IncludedClass = Class.def({
    2.   __static__ : {
    3.     includedMethod : function() {
    4.       return "includedMethod:"+this.value;
    5.     }
    6.   }
    7. });   
    8.  
    9. var AClass = Class.def({__include__ : IncludedClass,
    10.   __static__ : {
    11.     A : "A static"
    12.   },
    13.  
    14.   initialize : function(val) {
    15.     if(!val) throw "error";
    16.     this.val = val;
    17.     this.klass = "AClass";
    18.   },
    19.  
    20.   inspect : function() {
    21.     return "<"+this.klass+" : "+this.val+">";
    22.   }
    23. });
    24.  
    25. var BClass = Class.def({ __extend__ : AClass,
    26.   __static__ : {
    27.     B : "B static"
    28.   },
    29.  
    30.   initialize : function(val) {
    31.     BClass.__super__.initialize.call(this, val);
    32.     this.klass = "BClass";
    33.   }
    34. });
    35.  
    36. var CClass = Class.def({ __extend__ : BClass,
    37.   __static__ : {
    38.     C : "C static"
    39.   },
    40.  
    41.     initialize : function(val) {
    42.       CClass.__super__.initialize.call(this, val);
    43.       this.klass = "CClass";
    44.     }
    45. });
    46.  
    47. var a = new AClass("aaaaaaa");
    48. var b = new BClass("bbbbbbb");
    49. var c = new CClass("ccccccc");
    50. alert("a inspect:"+a.inspect()); //=> a inspect:
    51. alert("b inspect:"+b.inspect()); //=> b inspect:
    52. alert("c inspect:"+c.inspect()); //=> c inspect:
    53. alert("includedMethod:"+a.includedMethod()); //=> includedMethod:included aaaaaa
    54. alert("CClass.A:"+CClass.A); //=> CClass.A:A static
    55. alert("CClass.B:"+CClass.B); //=> CClass.B:B static
    56. alert("CClass.C:"+CClass.C); //=> CClass.C:C static
    57. alert("b.constructor = a.constructor:"+(b.constructor == a.constructor).toString()); //=>b.constructor = a.constructor:false
    58. alert("b instanceof BClass:"+(b instanceof BClass).toString()); //=>b instanceof BClass:true
    59. alert("b instanceof AClass:"+(b instanceof AClass).toString()); //=>b instanceof AClass:true
    60. alert("c instanceof BClass:"+(c instanceof BClass).toString()); //=>c instanceof BClass:true
    61. alert("c instanceof AClass:"+(c instanceof AClass).toString()); //=>c instanceof AClass:true
신고
Posted by Rhio.kim