티스토리 뷰

Programming Lecture/Javascript Library

[자바스크립트 라이브러리 만들기] 2. 시작 - 사전조사 및 설계

Unikys 2012. 10. 4. 16:29

[Building a Javascript Library] 2. The beginning - state-of-art and basic designing

 

2012/10/04 - [Programming Lecture/Javascript Library] - [자바스크립트 라이브러리 만들기] 1. 개요

 

: 구글 검색 결과 - 일단 '트리를 그리는 자바스크립트 라이브러리'를 시작하기 전에, 다른 유사한 라이브러리들은 어떻게 동작하는지 보고 설계를 생각해보는 것도 좋은 방법일 것이다. 구글 검색 결과 트리를 그리는 라이브러리는 아주 '많다'. 상업적 목적이 무료인 라이브러리는 적겠지만, 개인 사용이라면 굳이 구현할 필요는 없을 것이다. 하지만 지금의 목적은 공부를 하기 위한 것이니 그냥 참고만 하자.

 

 

 

* dhtmlx.com - 개인 사용은 무료, 상업적 이용은 유료. 디자인도 깔끔하다.

 

: 사용 방법 - 정적인 데이터에 대해서만 사용 가능하다.

 

var tree = new dhtmlXTreeObject("treeBox","100%","100%",0);

tree.loadJSON(json);

tree.loadJSArrayFile(file,function(){ ... }); 

 

또는

 

<div class="dhtmlxTree"> ...

 

 

* blueshoes.org - 깔끔한 디자인, 다양한 기능, 개인 사용 무료, 상업적 이용은 유료.

 

: 사용방법 - 사용 방법이 깔끔하고 마음에 든다.

 

var tree = new Bs_Tree(); 

tree.initByArray(a);

tree.drawInto('treeDiv1'); 

someElement.addChildByArray(elementData);

 

 

: webxplorer.org - 오픈소스 트리, 사용법 불편함

 

- 사용방법 - 복잡하고 불편하다.

 

var jst_container = "document.getElementById('container')";

var jst_image_folder_user = "test_images/";

var arrNodes = [ ... ];

 

<body onload="renderTree()"> ... </body>

 

 

: 일단 이정도 살펴봤는데, 이 라이브러리들 이외에서 엄청 많다. 일단 2번째 방법을 최대한 따라가는 방향으로 하도록 하자. 3번째 오픈 소스 트리는 무료라는 점이 매우 좋지만, 라이브러리를 만드는 방법이 잘못되어있는 것 같다. 따라서, 어떻게 만들어야할지 조금 감이 잡힐 것이다.

 

* 설계

 

: utree 라는 오브젝트를 메인으로 한다.

: node라는 오브젝트도 만들어서 데이터구조를 이루도록 한다.

: node는 child로 node 목록을 가지게 될 것이고 동적으로 추가 또는 제거 가능하다. 

: 자식을 추가/제거한다면 트리를 그리는 container의 그래픽에도 바로 영향을 미쳐야한다.

: 초기 데이터구조는 root하나만 보유하도록 한다.

: 배열을 이용한 로드는 나중에 구현하도록 자식 추가 함수를 구현해 놓는다.

: utree는 render함수를 가지고 있으며, 해당 container의 id를 보유하고 있다.

: 해당 container에 트리를 그리면서 클릭 이벤트도 같이 bind한다.

 

* 사용 예

 

var tree = utree("treeDiv");

var root = tree.getRootNode(); 

root.addNode("nodeName" , isExpandable);

tree.addNode(root , new Node("nodeName" , isExpandable);

root.removeNode("nodeName");

tree.removeNode(node); 

 

* namespace - utree

: 오브젝트 - tree , node

 

 

일단 이정도로 생각하고 진행해보자.

 

 

저작자표시 비영리 동일조건
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2024/12   »
일 월 화 수 목 금 토
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31
글 보관함