Object Class는 Object를 추상화하여 해당 Object에 clone(복제), extend(확장), inspect(검사), keys(키), toJSON(JSON), values(값) 의 Method를 지원합니다.

이는 추상화된 Object를 복제하고 Method, Property를 추가 확장이 가능하며, 다양한 Type을 찾는데 사용되고 이하 다양한 기능을 제공합니다.

1. undefined and null are represented as such.
   : undefined 와 null 은 비슷한것으로 표현되어짐
2. Other types are looked up for a inspect method: if there is one, it is used, otherwise, it reverts to the toString method
   : 다른 타입들도 inspect method에 의해서 찾아짐 : 만약 그것이 한번이라도 사용되었다면 toString method로 돌아갑니다.

  
Object의 확장기능은 내장객체인 String, Number, Array, Function, Date 등에 추가적으로 Method를 확장할 수 있게 됩니다.

예를 들어 String 내장 Object에 stripTag, replace, trim 함수가 없지만 Object.extend(String.prototype, {추가될 함수의 정의}); 하게되면 추가될 함수의 정의가 String Object의 Method가 되게 됩니다.

다양한 예제를 통해서 살펴 보도록 하겠습니다.

Hash는 key와 그 key에 할당된 value의 배열 구조를 일컬러 부르고 있는데

Prototype은 기본적으로 코딩은 JSON 포맷을 따라가며 이는 Hash구조와 거의 유사합니다.

Prototype.js의 Object Class뿐만아니라 대부분이 Hash구조 key와 value로 이루어져 있고 Value에는 number, string, object, function, boolean 등 다양한 value를 갖을 수 있습니다.


var PANTV = Class.create();PANTV.prototype = { global_values: '', initialize: null, global_function: function(parm1, parm2) { ... }, private_function: function(parm1) { ... }, public_function: function(parm2) { ... } }oPANTV = new PANTV(); var PANTV2 = Class.create();PANTV2.prototype = { private_values: '', initialize: function() { Object.extend(oPANTV.prototype, { extend_value:'', showMessage: function() { alert('Object.extend used function'); }, exit: function() {} }); } }oPANTV2 = new PANTV2();


위에서 생성한 PANTV Class 내부를 살펴보면 global_value는  key값 ''는 value값으로 되어있습니다.
value로 function도 갖을 수 있습니다. global_function은 key이고 function(parm1, parm2) {...}은 value를 갖습니다.

JSON포맷을 숙지하고 있다면 더 이해가 빠르리라 생각듭니다..

keys Method는 Object의 key를 string으로 반환합니다. 위의 소스 코드를 예로 Object.keys(oPANTV)를 실행하게 되면 반환되는 결과는 string Type의 -> ['global_values', 'initialize', 'global_function', 'private_function', 'public_function']가 될것입니다.

위의 메소드를 이용하지 않더라도 가능합니다.

for(var property in oPANTV) { alert(property) }   이렇게 수행하면 oPANTV가 갖고 있는 property명을 모두 alert로 띄우게 됩니다.
다시 말하면 oPANTV의 property와 hash구조의 key는 같다는 의미입니다.

위 소스는 참고로 알고 계시면 되구요.

toJSON Method는 AJAX Class를 이용한 Request를 이용할때나 오브젝트를 String화할때 즉 Eval의 반대함수라고 생각해도 될것 같습니다.
쉽게 기존 개발 방법은 parameter를 하나 하나 추가하는 방식이였지만 서버와 JSON으로 통신이 이뤄질때에는 Class내에서 JSON 오브젝트로 이용하다가 이를 바로 서버로 전송하게 될 경우에 JSON 타입의 string화 할때 이용하면 유용합니다.

values Method는 Object의 value값을 배열로 반환합니다. keys Method와는 다르게 배열로 반환하는 이유는 value에는 다양한 type가 반환되기 때문입니다.

clone Method는 굳이 설명하지 않더라도

위에서도 살짝 언급했지만 가장 유용하게 사용될 Method중의 하나 입니다.
Object.extend Method
인데요 이 기능만 잘 사용한다면 Method 자체의 사전적 의미는 '확장' 입니다.
하지만 사용에 따라서는 상속이 될 수도 있구요.

위에서 String 내장 Object에 여러가지 Method를 추가하여 Extend의 개념을 갖게 되었구요.

위의 소스를 보면 oPANTV Class와 oPANTV2 Class 2가지가 있습니다.

oPANTV2가 Object화 되면서 initialize가 수행되고 Object.extend(oPANTV.prototype, {...}); 가 수행됩니다.

이로 PANTV2에 oPANTV class에 있는 Method들이 PANTV2의 Method가 됩니다


신고
Posted by Rhio.kim
우선 모든 강좌는 간단하고 Core만 다루도록 하겠습니다.
Prototype 이라는 Open Framework 이기 때문에 찾아서 혹은 직접 해보면서 다양한 기능을 다룰 수 있을것 입니다.

또한 객체 지향적인 개발 방법으로만 다루겠습니다.
Framework을 이용하는 이유 역시 간단한 함수 호출을 위해서 만든 오픈 라이브러리가 아니기 때문입니다.

var UI = Class.create();
UI.prototype = {
  AX : null,
  initialize : null,
  getHTML : function() {
  },
  recv : function() {
  },
}

var oUI = new UI();

간단한 UI 객체의 구조입니다.

UI class를 만들었습니다. 그러면 getHTML(ajax를 통해 HTML 소스 즉 서버측에 요구하는 값을 받아오는 Method)와 recv (ajax를 통해 결과를 받아 파싱하는 Method)를 보겠습니다.

getHTML : function() {
  var url = '/ajax.php';

  this.AX = new Ajax(url, {
    method : 'get',  // basic set is POST
    parameters : { 'file' : 'index.htm' },
    onSuccess : function(result) {
       this.recv(result);
    }.bind(this),
    onFailure : function() {
       alert('HTML을 받아오지 못했습니다.');
    }
  })
}

위의 getHTML Method를 보면 new Ajax가 생성되고 url과 JSON이 파라메터로 넘어갑니다.
url, { method : 'get' , parameters : { 'file' : 'index.htm' }, onSuccess : '' , onFailure : '' }
이렇게 두가지의 파라미터가 넘어갑니다.

ajax는 이 JSON을 받아서 내부적으로 처리합니다. 그 결과에 따라 성공하면 onSuccess에 처리문을 수행합니다.

여기엔 다양한 Method가 있습니다. 기본적으로 onComplete, onSuccess, onFailure 등이 있습니다.

위에서
onSuccess : function(result) {
  this.recv(result);
}.
bind(this),

이 부분은 성공시에 처리되는 것이며 function() {}.bind(this) 에서 bind(this)
anonymous function 을 호출시에 발생하는 this 객체 즉 anonymous function를 호출한 객체 를 익명함수 내부에서도 사용할 수 있도록 bind(Oject instance name) 를 사용함으로 Object instance name 을 익명함 수 내에서도 사용할 수 있게 됩니다.

onSuccess는 Ajax객체의 내무 Method이므로 Ajax 객체 내에서 사용하는 this.recv(result)는 .bind() 가 없을 경우 this.recv(result)의 this는 Ajax를 가리키게 되지만 .bind함수는 이를 해결하기 위한 Prototype의 기능입니다.


만약 Ajax객체가 성공적으로 수행하여 결과가 정상적으로 리턴되었다면 this.recv(result)는 실행될 것이며 UI 객체에 있는 recv Method가 수행될것입니다.

  recv : function(XHR) {
     alert(XHR.responseText);
  },

는 실제 XMLHTTPRequest에 의해 return된 오브젝트이며 프로퍼티중 responseText 에 결과가 담겨져 있습니다.
XHR.responseText를 alert으로 출력해보면 결과에 맞는 내용이 string으로 뿌려지게 됩니다.

아주 간단한 prototype을 이용한 ajax통신을 보았구요. 예제를 통한 설명이 이쯤에서 끝냅니다.

Prototype내의 Ajax Object를 살펴 보시면 다양한 Method와 하위 Object들 볼 수 있습니다.
Ajax부분에 고급화된 Object와 Method를 제공하고 있고 위에서 보여드린 부분은 아주 간단한 Ajax를 이용한
호출과 결과값을 보여주는 부분입니다.

강좌는 계속 이어지구요. 질문 사항은 이곳 게시판이나 메일로 보내주시면..
서로 공부해서 ^^
설명중 Class, 오브젝트, 객체는 모두 같은 의미를 갖으며 설명중 중복이 싫어서 자꾸 바뀌는 경향이 있으니
이점 생각하시고 보세요.
신고
Posted by Rhio.kim