스크립트 기초 모듈 구성(삼각형 그리기 테스트)

어떻게 하다보니 먼저 javascript 모듈을 정리하기 시작하게 되었습니다.
조금씩 정리해 갈 생각입니다.

모듈화를 생각하다, 사용자와 상호작용하기 위한 부분이 필요해서 일단 기본적인 내용을
구성해 보고 있습니다.

canvas 없이 (html5 이전) 그리기 기능을 정리하는 중입니다.

다음은 간략한 코드 입니다.( 나중에 다시 정리할 예정 입니다.)

(function(winObj,baseObj) {
var window = winObj;
var document = window.document;
var ksbee = {};
if ( window.ksbee ){
alert("duplicated....");
return;
} else {
window.ksbee = ksbee;
}

ksbee.ui = {};
ksbee.ui.dom = {
createDomObject : function(tagName,clsName,attMap,styleMap) {
var tagObj = document.createElement(tagName);
if ( tagObj ) {
if ( clsName ) {
tagObj.className = clsName;
}

if ( attMap && attMap instanceof ksbee.ui.data.Map ) {
for ( var i = 0,size=attMap.size(); i < size; i++ ) {
tagObj.setAttribute(attMap.getIndexKey(i),attMap.getIndexValue(i));
}
}

if ( styleMap && styleMap instanceof ksbee.ui.data.Map ) {
for ( var i = 0,size=styleMap.size(); i < size; i++ ) {
// alert ( styleMap.getIndexKey(i) );
tagObj.style[styleMap.getIndexKey(i)] = styleMap.getIndexValue(i);
}
//tagObj.style[width] = "200px";
//tagObj.style["height"] ="300px";
}

}
return tagObj;
}
};
ksbee.ui.data = {
Map : function() {
var storage = [];
var isUnique = function(key) {
if ( key == null || key === 'undefined' ){
return false;
}
for ( var i = 0,size=storage.length; i < size; i++ ) {
if ( storage[i][0] === key ) {
return false;
}
}
return true;
};
this.put = function(key,value) {
if ( isUnique(key) ){
storage.push( [key,value] );
}
};
this.get = function(key) {
if ( key == null || key === 'undefined' ){
return null;
}
for ( var i = 0,size=storage.length; i < size; i++ ) {
if ( storage[i][0] === key ) {
return storage[i][1];
}
}
return null;
};
this.getIndexKey = function(index) {
var size = storage.length;
if ( index < 0 || index >= size ) {
return null;
}
return storage[index][0];
};
this.getIndexValue = function(index) {
var size = storage.length;
if ( index < 0 || index >= size ) {
return null;
}
return storage[index][1];
};

this.size = function() {
return storage.length;
};
this.remove = function(key) {
if ( key == null || key === 'undefined' ){
return null;
}
for ( var i = 0,size=storage.length; i < size; i++ ) {
if ( storage[i][0] === key ) {
return storage.splice(i,1);
}
}
return null;
};

this.removeIndex = function(index) {
var size = storage.length;
if ( index < 0 || index >= size ) {
return null;
}
return storage.splice(index,1);
};
this.keySet = function() {
var arr = [];
for ( var i = 0,size = storage.length; i < size; i++ ) {
arr.push(storage[i][0]);
}
return arr;
};
}
};

ksbee.ui.drawings = {
Graphics : function() {
var pointMap = new ksbee.ui.data.Map();
var init = function() {
pointMap.put("position","absolute");
pointMap.put("margin","0px");
pointMap.put("padding","0px");
pointMap.put("border","0px");
};

this.drawPoint = function(ownerObj,x,y,w,h,colStr) {
var pObj = ksbee.ui.dom.createDomObject("DIV",null,null,pointMap);
if ( !colStr ){
colStr = "#000080;";
}
pObj.style.backgroundColor = colStr;
pObj.style.top = y + "px";
pObj.style.left = x + "px";
pObj.style.width = w+"px";
pObj.style.height = h+"px";
if ( ownerObj ) {
ownerObj.appendChild(pObj);
}
return pObj;
};

this.drawLine = function(ownerObj,x1,y1,x2,y2,thick,colStr) {
var a = (x1==x2) ? 0 : (y2-y1)/(x2-x1);
var b = y1 - a*x1;

var minX = x1 <= x2 ? x1 : x2;
var maxX = x1 > x2 ? x1 : x2;

var minY = y1 <= y2 ? y1 : y2;
var maxY = y1 > y2 ? y1 : y2;

var xGap = maxX-minX;
var yGap = maxY-minY;
var pointsArray = [];
if ( xGap >= yGap ) {
var pPos = null;
var duration = 1;
var stPos = minX;
for ( var i = minX; i <= maxX; i++ ) {
var cPos = Math.round(a*i+b);
if ( pPos == null ) {
pPos = cPos;
continue;
}
if ( pPos == cPos ) {
duration++;
continue;
}
pointsArray.push(this.drawPoint(ownerObj,stPos,pPos,duration,thick,colStr));
duration = 1;
stPos = i;
pPos = cPos;
}
pointsArray.push(this.drawPoint(ownerObj,stPos,pPos,duration,thick,colStr));
} else {
var pPos = null;
var duration = 1;
var stPos = minY;
for ( var i = minY; i <= maxY; i++ ) {
var cPos = (a == 0 ? x1 : Math.round((i-b)/a));
if ( pPos == null ) {
pPos = cPos;
continue;
}
if ( pPos == cPos ) {
duration++;
continue;
}
pointsArray.push(this.drawPoint(ownerObj,pPos,stPos,thick,duration,colStr));
duration = 1;
stPos = i;
pPos = cPos;
}
pointsArray.push(this.drawPoint(ownerObj,pPos,stPos,thick,duration,colStr));
}
};

init();
}
};

ksbee.fn = {};
ksbee.fn.util = {

};
})(window,undefined);

window.onload = function() {
var graphicObj = new ksbee.ui.drawings.Graphics();
//alert ( graphicObj);
graphicObj.drawLine(document.body,300,100,400,400,5,"#FF0000");
graphicObj.drawLine(document.body,300,100,100,300,5,"#00FF00");
graphicObj.drawLine(document.body,100,300,400,400,5,"#0000FF");
}


스크립트가 가장 직관적이라서요 ...
아직 검토도 않한 게시물입니다. (다시 정리할 예정입니다.. 언젠가는 ... )
오류가 있을수 있습니다. ( 혹시 우연찮게 조회하실 분들에게 미리 말씀드리는 겁니다. )