--prototype.js-------------------------------------------------------------------------

var $A = Array.from = function(iterable) {
  if (!iterable) return [];
  if (iterable.toArray) {
    return iterable.toArray();
  } else {
    var results = [];
    for (var i = 0, length = iterable.length; i < length; i++)
      results.push(iterable[i]);
    return results;
  }
}

---------------------------------------------------------------------------------------

Utility Methods 에는 편리한 Method이 아주 많이 정의 되어있습니다.  

실제로 DHTML 컨트롤을 위하여 유용한 '$'  쉽게 $('ID of Element') 하게되면 HtmlElement 가 반환됩니다.

function foo(element) {     
	element = $(element);     /* rest of the function... */ 
} 
'$' 기능은 Element.extend를 가지고 반환된 모든 엘리먼트를 확장할 수 있어서 Prototype의 DOM 확장을 
이용할 수 있다.

아래의 소스를 보면 두 줄이 있는데 비슷하지만 두번째 것이 좀더 객체지향적인 느낌을 준다.

// Note quite OOP-like... 
Element.hide('itemId'); 
// A cleaner feel, thanks to guaranted extension 
$('itemId').hide(); 

그러나 반복 실행이나 레버레이징을 이용할때 '$' 기능은 좀더 우와하고 좀더 간결하고 또한 좀더 효율적인 
코드는 아니다.

['item1', 'item2', 'item3'].each(Element.hide); 
// The better way: 
$('item1', 'item2', 'item3').invoke('hide'); 


단 주의해야할 것은 많은 엘리먼트에 동일 ID를 할당하면 문제를 발생한다는 것. (당근 빠따 ^-^*)


그리고 '$$' Utility 

$$('div'); 
// -> all DIVs in the document. Same as document.getElementsByTagName('div')! 
$$('#contents'); 
// -> same as $('contents'), only it returns an array anyway. 
$$('li.faux'); 
// -> all LI elements with class 'faux'  

이 유틸은 document 전체를 검색합니다.  document의 좀더 정확하고 빠르게 섹션을 찾기위해 내부적으로 
Element.getElementsBySelector를 이용한다.

또한 CSS 구문까지 지원을 한답니다. 브라우저 내부적인 CSS 파싱 처리능력에 의존하지(그렇지 않고는, 
크로스브라우저 문제 갖는다) 않으므로 일관된 선별자('$$' 기능내의 Method)들이 모든 브라우저도 
제공되어진다.

$$('#contents a[rel]'); 
// -> 모든 a태그를  "contents" 라는 아이디를 갖는 엘리먼트 with a rel attribute 
$$('a[href="#"]'); 
// -> all links with a href attribute of value "#" (eyeew!) 
$$('#navbar a', '#sidebar a'); 
// -> all links within the elements of ID "navbar" or "sidebar"
		

$A(iterable) -> actualArray

$A()의 주요 기능은 배열로 만들 수 있는 오브젝트화된 무엇이든 실제 배열로 얻기 위한 것이다.

var paras = $A(document.getElementsByTagName('p')); 
//paras 에 document에 있는 p 태그를 배열 오브젝트로 담습니다.
paras.each(Element.hide); 
//paras.each(이터레이터) 즉 paras의 배열 오브젝트 즉 배열에 담긴 엘리먼트들 중에서 display가 
//none 다시 말해서 표시되지 않고 있는 엘리먼트가 있는지 체크하고
$(paras.last()).show(); 
//paras에 담겨있는 엘리먼트중 마지막 엘리먼트를 표시합니다.

여기에서 paras.each(Element.hide)를 한 이유는 $A() 로 얻어진 배열 오브젝트의 각 엘리먼트들은 
확장된 엘리먼트가 아닙니다.
쉽게 순수한 엘리먼트 오브젝트들만 담겨 있어.. 3번째 수행문인 paras.last() 의 last() 메서드나 , 
show() 메서드를 수행할 수는 없습니다. 하지만 each 함수가 수행되면서 확장되기 때문에 그냥 사용할 수 
있게된다.

$F(element) -> value

$F() 함수는 아규먼트로한 지정한 엘리먼트에 입력한 값을 추출하는 축약함수


$H([obj]) -> Hash

$H() 함수는 아규먼트에 지정한 오브젝트로 Hash 오브젝트를 생성한다.  만약 Object 속성이 Hash이면
받은 파라미터를 반환하고 종료한다.

--prototype.js------------------------------------------------------------------------
var Hash = function(object) {
  if (object instanceof Hash) this.merge(object);
  else Object.extend(this, object || {});
};

function $H(object) {
  if (object instanceof Hash) return object;
  return new Hash(object);
};
--------------------------------------------------------------------------------------
		

$R(start, end[, exclusive = false]) -> ObjectRange

$R() 메서드는 ObjectRange 인스턴스는 연속되는 값의 범위를 표현한다. 숫자형, 문자형 혹은 의미적인 
값의 범위가 있는 다른 타입도 제공합니다. 예를 들어 한글도 지원한다는 좀더 자세히 알려면 타입형의 
문서를 보고 여러분만의 오브젝트가 제공할 수 있는 값의 범위를 발견해볼 것

$R 기능은 ObjectRange을 생성해서 바로 리턴하는 역활을 합니다. 아규먼트로 start, end, exclusive
를 받는데 이 값들은 ObjectRange Class 에 전달되면서 Enumerable를 상속(확장) 

삼천포 : Prototype.js 에서는 도대체 상속과 확장의 개념이 잘 정리가 안됩니다. 상속은 부모 클래스에서 
자식 클래스로 무언가 상속받다는 개념이 되야하는데 Javascript 자체는 OOP가 아니고 OOP like이고 또한 
ObjectRang와 Enumerable 어느것이 부모 Class가 아니기 때문에 상속이란 개념보다는 ObjectRang의 
기능을 확장 즉 Object가 Extend가 되는게 맞는데 또 누구는 상속이라 하기도 합니다. 암튼 그렇고 다시 ..

ObjectRang은 Enumerable의 기능을 

--prototype.js---------------------------------------------------------------------------ObjectRange = Class.create();
Object.extend(ObjectRange.prototype, Enumerable);
Object.extend(ObjectRange.prototype, {
  initialize: function(start, end, exclusive) {
    this.start = start;
    this.end = end;
    this.exclusive = exclusive;
  },

  _each: function(iterator) {
    var value = this.start;
    while (this.include(value)) {
      iterator(value);
      value = value.succ();
    }
  },

  include: function(value) {
    if (value < this.start)
      return false;
    if (this.exclusive)
      return value < this.end;
    return value <= this.end;
  }
});

var $R = function(start, end, exclusive) {
  return new ObjectRange(start, end, exclusive);
}
----------------------------------------------------------------------------------------

--example-------------------------------------------------------------------------------
$R(0, 10).include(10) 
// -> true 
$A($R(0, 5)).join(', ') 
// -> '0, 1, 2, 3, 4, 5' 
$A($R('aa', 'ah')).join(', ') 
// -> 'aa, ab, ac, ad, ae, af, ag, ah' 
$R(0, 10, true).include(10) 
// -> false 
$A($R('가','갸'))
// -> 가,각,갂,갃,간,갅,갆,갇,갈,갉,갊,갋,갌,갍,갎,갏,감,갑,값,갓,갔,강,갖,갗,갘,같,갚,
갛,개,객,갞,갟,갠,갡,갢,갣,갤,갥,갦,갧,갨,갩,갪,갫,갬,갭,갮,갯,갰,갱,갲,갳,갴,갵,갶,갷,갸
$R(0, 10, true).each(function(value) {   
// invoked 10 times for value = 0 to 9 
}); 
----------------------------------------------------------------------------------------
	
신고
Posted by Rhio.kim