graft()

DOM을 사용하여 html을 생성해내는 코드를 작성할 때 부딪치는 가장 큰 문제가 상당히 많은 양의 코딩이 필요하다는 점입니다. 코드가 많아질 수록 당연히 Bug가 생길 가능성도 증가하게 되겠죠. 이를 해결하기 위해서 나온 방법이 html구조를 쉽게 표현하는 구조와 이를 파싱하여 DOM으로 자동 생성해주는 코드를 만드는 방법입니다.

생성할 html 코드

Graft function이 이러한 해결책을 위해서 나온 function인데요.
동작원리는 간단합니다. Array로 구성된 Html구조를 파싱하면서 recursive하게 DOM객체를 생성하거나 attribute를 설정해주는 코드입니다.

Grant로 파싱할 대상인 html array

사용방법은 간단합니다. []로 태그를 감싸는데요. Array의 처음은 태그의 이름이 두번째는 태그에 들어갈 text나 속성(Hash Object인 {})이 들어갑니다. 동일한 html을 생성하는 DOM 생성 코드와 비교하면 상당히 많은 줄의 차이를 갖습니다.

DOM 생성 코드

대략 25줄대 2~3줄 정도의 차이니까, 코딩양으로 본다면 엄청난 양을 줄일 수 있는 장점이 있습니다.
Grant의 실제 코드를 보면 다음과 같습니다.

graft의 경우에는 release된 version이 없습니다. function만 올려진 상태구요. 댓글 달린 것과 경험상 봤을 때 setAttribute를 사용하여 Class설정하는 코드는 IE에서 동작하지 않을겁니다. className으로 설정하도록 수정이 필요하구요.

검증이 100% 안된코드로 보시고 작업하셔야 될 걸로 생각되네요..
그래도, 이런게 어딥니까 ^^

출처 :

Ajaxian의 Garft: Making JavaScript DOM a Piece of Cake
Making Javascript DOM a Piece of Cake with the graft() Function

P.S. 1:
graft란 단어는 '접목하다', '이식하다'라는 의미를 가진 단어입니다. (사전 찾아봤습니다. ^^;;)

P.S. 2:
Ajaxian에 최근에 올라왔던 DOMTool(html을 코드를 읽어들인 다음 동일한 html을 생성해내는 DOM 생성 코드를 만들어내는 툴입니다.)에 대한 기사를 읽다가 Graft가 생각나서 정리해봤습니다.

P.S. 3:
Graft()는 Sean Burke씨와 그의 책, Higher Order JavaScript에 나와있는 코드를 기반으로 하여 만들어졌습니다. [얼핏 기억으로는 Perl로 만들었다는 글을 본 것 같기도 합니다. 미확인 정보 --;;]