Tag Archives: prototype

Prototype Javascript Framework – Object

이번엔 Object에 대해 알아보겠습니다. 대부분 객체의 타입을 알아보는 류의 메서드가 대거 포진해 있습니다.

Object의 하위 메서드들은 Prototype의 name space를 사용하여야 합니다. 이것은 곧 메서드를 사용할때 Object.로 시작해야 함을 뜻합니다. 일반적인 개발자들은 inspect()와 clone() 메서드를 많이 이용할 것입니다.

Object Methods —————————————————————————————————

clone : 객체를 얕은(shallow) 복사합니다. 기존의 객체가 가지고 있던 모든 프로퍼티를 복사합니다.
[code]Object.clone(obj) -> Object[/code]

예제)
[code]var o = { name: ‘Prototype’, version: 1.5, authors: [‘sam’, ‘contributors’] };
var o2 = Object.clone(o); o2.version = ‘1.5 weird’;


o2.authors.pop();


o.version
// -> 1.5
o2.version
// -> ‘1.5 weird’
o.authors
// -> [‘sam’]
// 얕은 복사가 되었음[/code]

extend : 소스 객체의 모든 프로퍼티를 복사합니다.
[code]Object.extend(dest, src) -> alteredDest[/code]
Prototype의 Javascript에서의 OOP 개발을 가능하게 하기 위한 메서드입니다. Object.extendClass.create 메서드등이 있습니다.

inspect : 디버깅을 위한 객체의 내용을 보여줍니다.
[code]Object.inspect(obj) -> String[/code]
객체의 값을 문자열로 보여줍니다. undefined와 null값을 구별하여 반환합니다.

예제)
[code]Object.inspect();
// -> ‘undefined’


Object.inspect(null);
// -> ‘null’


Object.inspect(false);
// -> ‘false’


Object.inspect([1, 2, 3]);
// -> ‘[1, 2, 3]’


Object.inspect(‘hello’);
// -> “‘hello'”[/code]

isArray : 객체가 배열인지 확인합니다.
[code]isArray(obj) -> Boolean[/code]

예제)
[code]Object.isArray([]);
//-> true


Object.isArray($w());
//-> true


Object.isArray({ });
//-> false[/code]

isElement : nodeType이 1인 엘리먼트인지 확인합니다.
[code]isElement(obj) -> Boolean[/code]

예제)
[code]Object.isElement(new Element(‘div’));
//-> true


Object.isElement(document.createElement(‘div’));
//-> true


Object.isElement($(‘id_of_an_exiting_element’));
//-> true


Object.isElement(document.createTextNode(‘foo’));
//-> false[/code]

isFunction : 객체가 함수(메서드)인지 확인합니다.
[code]isFunction(obj) -> Boolean[/code]

예제)
[code]Object.isFunction($);
//-> true


Object.isFunction(123);
//-> false[/code]

isHash : 객체가 Hash 클래스의 인스턴스인지 확인합니다.
[code]isHash(obj) -> Boolean[/code]

예제)
[code]Object.isHash(new Hash({ }));
//-> true


Object.isHash($H({ }));
//-> true


Object.isHash({ });
//-> false[/code]

isNumber : 객체가 소수점을 포함한 숫자형인지 확인합니다.
[code]isNumber(obj) -> Boolean[/code]

예제)
[code]Object.isNumber(0);
//-> true


Object.isNumber(1.2);
//-> true


Object.isNumber(“foo”);
//-> false[/code]

isString : 객체가 문자형인지 확인합니다.
[code]isString(obj) -> Boolean[/code]

예제)
[code]Object.isString(“foo”);
//-> true


Object.isString(“”);
//-> true


Object.isString(123);
//-> false[/code]

isUndefined : 객체가 undefined 인지 확인합니다.
[code]isUndefined(obj) -> Boolean[/code]

예제)
[code]Object.isUndefined();
//-> true


Object.isUndefined(undefined);
//-> true


Object.isUndefined(null);
//-> false


Object.isUndefined(0);
//-> false


Object.isUndefined(“”);
//-> false[/code]

keys : Hash타입의 객체의 전체 프로퍼티 네임을 가져옵니다.
[code]Object.keys(obj) -> [String…][/code]

예제)
[code]Object.keys();
// -> []


Object.keys({ name: ‘Prototype’, version: 1.5 }).sort();
// -> [‘name’, ‘version’][/code]

toHTML : 객체에 toHTML 메서드가 있으면 해당 메서드를 수행하고 없을 경우 String.interpret를 수행합니다.
[code]toHTML(obj) -> String[/code]

예제)
[code]var Bookmark = Class.create({
  initialize: function(name, url) {
    this.name = name;
    this.url = url;
  },
  toHTML: function() {
    return ‘<a href=”#{url}”>#{name}</a>’.interpolate(this);
  }
});


var api = new Bookmark(‘Prototype API’, ‘http://prototypejs.org/api’);


Object.toHTML(api);
//-> ‘<a href=”

toQueryString : URL인코딩이 된 query 문자열을 반환합니다.
[code]toQueryString(obj) -> String[/code]

예제)
[code]Object.toQueryString({ action: ‘ship’, order_id: 123, fees: [‘f1’, ‘f2’], ‘label’: ‘a demo’ })
// -> ‘action=ship&order_id=123&fees=f1&fees=f2&label=a%20demo'[/code]

value : Hash타입의 객체의 값들을 반환합니다.
[code]Object.values(obj) -> Array[/code]

예제)
[code]Object.values();
// -> []


Object.values({ name: ‘Prototype’, version: 1.5 }).sort();
// -> [1.5, ‘Prototype’][/code]

Prototype Javascript Framework – Template

이번엔 Prototype에서 제공하는 많은 분들이 있는지 없는지도 모르시는 유명한 녀석 Template에 대해 알아보도록 할까요.
저도 사실 Prototype에서 제공하는 기능들을 나름 대충 거의다 접해봤다지만 이녀석 만큼은 전혀 사용해본 적이 없습니다;
이번에 다시 한번 공부를 하면서 천천히 보니 이녀석을 잘 쓰면 정말 괜찮겠다는 생각이 드는군요.
같은 형식을 계속해서 찍어낸다거나 어떤 틀이 필요한 작업을 할때 매우 유용하게 사용될 수 있을것 같습니다.

Template 사용하기 ————————————————————————————————-
Prototype에서 제공하는 Template 클래스는 Ruby의 템플릿과 매우 유사한 문법을 사용하고 있습니다.
Template에는 #{필드명} 형식의 심볼을 가진 문자열을 포함하게 되며 evaluate라는 메서드를 통해 템플릿이 사용되게 될때 해당 필드명에 해당하는 다른 객체의 값으로 대체되게 됩니다.

예제)
[code]// 계산을 위한 템플릿
var myTemplate = new Template(‘The TV show #{title} was created by #{author}.’);


// 템플릿에 사용될 데이터
var show = {title: ‘The Simpsons’, author: ‘Matt Groening’, network: ‘FOX’ };


// 데이터를 적용하여 템플릿 사용
myTemplate.evaluate(show);
// -> The TV show The Simpsons was created by Matt Groening.[/code]

Template의 재사용성 ———————————————————————————————–
위의 예제를 통해 Template의 사용법을 알게 되었습니다. 위를 통해 알 수 있듯이 Template은 정적인 데이터를 사용하기 위핸 클래스가 아닙니다. 정적인 부분을 유지하며 매우 동적인 데이터 처리를 할 수 있습니다.
이는 결과적으로 데이터의 재사용성을 뜻합니다.

예제)
[code]// 데이터로 사용할 객체 생성
var conversion1 = {from: ‘meters’, to: ‘feet’, factor: 3.28};
var conversion2 = {from: ‘kilojoules’, to: ‘BTUs’, factor: 0.9478};
var conversion3 = {from: ‘megabytes’, to: ‘gigabytes’, factor: 1024};


// 템플릿 생성
var templ = new Template(‘Multiply by #{factor} to convert from #{from} to #{to}.’);


// 각 객체별 템플릿 포맷 적용
[conversion1, conversion2, conversion3].each( function(conv){
  templ.evaluate(conv);
});
// -> Multiply by 3.28 to convert from meters to feet.
// -> Multiply by 0.9478 to convert from kilojoules to BTUs.
// -> Multiply by 1024 to convert from megabytes to gigabytes.[/code]

Escape 처리 ——————————————————————————————————-
객체의 데이터 바인딩 없이 문자열로 표시하고 싶을 경우에는 어떻게 해야 할까요? 다른 언어와 동일합니다.

예제)
[code]// 자바스크립트에서 Escape처리를 하기위해서는 \를 두개 사용해야 함
var t = new Template(‘in #{lang} we also use the \\#{variable} syntax for templates.’);
var data = {lang:’Ruby’, variable: ‘(not used)’};
t.evaluate(data);
// -> in Ruby we also use the #{variable} syntax for templates. [/code]

Custom Syntaxes ————————————————————————————————–
Template 클래스의 기본 Syntax는 #{필드명}을 따르고 있습니다. 하지만 개인적으로 다른 형식으로도 얼마든지 사용할 수 있습니다. 하지만 정규식을 좀 알아야 할 필요가 있겠군요.

<%=필드명%>형식을 사용할 때 예제)
[code]var syntax = /(^|.|\r|\n)(\<%=\s*(\w+)\s*%\>)/;
// ‘<%= field %>’ 형식에 매칭되는 Syntax


var t = new Template(‘<div>Name: <b><%= name %></b>, Age: <b><%=age%></b></div>’, syntax);
t.evaluate( {name: ‘John Smith’, age: 26} );
// -> <div>Name: <b>John Smith</b>, Age: <b>26</b></div>[/code]

Template Methods ————————————————————————————————

evaluate : 데이터가 담겨있는 객체를 이용하여 템플릿의 포매팅 결과값을 반환합니다.
[code]evaluate(object) -> String[/code]

예제)
[code]var hrefTemplate = new Template(‘/dir/showAll?lang=#{language}&categ=#{category}&lv=#{levels}’);
var selection = {category: ‘books’ , language: ‘en-US’};


hrefTemplate.evaluate(selection);
// -> ‘/dir/showAll?lang=en-US&categ=books&lv=’


hrefTemplate.evaluate({language: ‘jp’, levels: 3, created: ’10/12/2005′});
// -> ‘/dir/showAll?lang=jp&categ=&lv=3’


hrefTemplate.evaluate({});
// -> ‘/dir/showAll?lang=&categ=&lv=’


hrefTemplate.evaluate(null);
// -> error ![/code]