자바스크립트로 구조적인 프로그래밍을 하려면??

제가 현재 웹프로그래머이긴 하나 html이나 script 코딩 능력이 너무 부족하여 언제나 주먹구구식 코딩을 하거나 server에서 처리해버리지요.

비록 javascript 고수는 아닙니다만 아래에 제가 사용하는 코드들의 일부를 보여드리겠습니다.
어렵지 않으리라 생각되는데 클래스화, 오버라이딩과 유사한 기존 클래스에 메서드 추가, 사용자 정의 예외클래스등의 예제입니다.
소스를 이해하시면 아이디어를 떠올리는데 도움이 될 것 같습니다.
그리고 미리 밝혀드리지만 거의 대부분 남의 소스를 참고한 것들입니다.

명료한 해답은 아니겠지만,, 솔직히 괜찮은 javascript 소스나 예제는 서로 공유했으면 하는 바램에 이 글을 썼습니다. :)

// 클래스화 예제
// Class
function cgiRequest(EXECUTE_CGI_URL)
{
    // set some default variables
    this.parms = new Array();
    this.parmsIndex = 0;

    // set the server url
    this.server = EXECUTE_CGI_URL;

    // methods
    this.execute = cgiRequestExecute;
    this.add = cgiRequestAdd;
	this.addById = cgiRequestAddById;
}

// method
function cgiRequestAdd(name, value)
{
    // add a new pair object to the params
    this.parms[this.parmsIndex] = new Pair(name, value);
    this.parmsIndex++;
}

function cgiRequestAddById(id)
{
	this.parms[this.parmsIndex] = new PairById(id);
	this.parmsIndex++;
}

function cgiRequestExecute()
{
	// set the server to a local variable
    var targetURL = this.server;

    // try to create our XMLHttpRequest Object
    try
    {
        //var httpRequest = new XMLHttpRequest();
		var httpRequest = new ActiveXObject("MSXML2.XMLHTTP.3.0");
    }
    catch(e)
    {
        alert("Error creating the connection!\n\n" + e.description);
		return false;
    }

    // make the connection and send our data
    try
    {
        var txt = "";

        for(var i in this.parms)
        {
		/*
            if(txt.length)
            {
                txt = txt + '&';
            }
         
            txt = txt + this.parms[i].name + '=' + this.parms[i].value;
		*/
			if(i == 0)
			{
				txt += this.parms[i].name + "=" + this.parms[i].value;
			}
			else
			{
				txt += "&" + this.parms[i].name + "=" + this.parms[i].value;
			}
		/*	} */
        }

        // GET
//        alert(targetURL + '?' + txt);
		httpRequest.open("GET", targetURL + '?' + txt, false, null, null);
        httpRequest.send('');

        // POST
//        httpRequest.open("POST", targetURL, false, null, null);
//				httpRequest.setRequestHeader("Accept-Language","ko");
//        httpRequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
//        httpRequest.setRequestHeader("Content-Type", "text/html; charset=euc-kr");
//        httpRequest.setRequestHeader("Content-Length", txt.length);
//        httpRequest.send(txt);
    }
    catch(e)
    {
        alert("An error has occured calling the external site: " + e);
        return false;
    }

    // make sure we received a valid response
    switch(httpRequest.readyState)
    {
        case 1,2,3:
            alert("Bad ready state: " + httpRequest.status);
            return false;
            break;

        case 4:
            if(httpRequest.status != 200)
            {
                alert("The server respond with a bad status code: " + httpRequest.status);
                return false;
            }
            else
            {
                var response = httpRequest.responseText;
                
				/*
                try
				{
					var s = new XMLSerializer();
					var response = httpRequest.responseXML;
					var str = s.serializeToString(response);
                }
				catch(e)
				{
					alert(e); return;
				}
                alert(str);
				*/
            }
            break;

		default:
			alert("Unknown error.");
			break;
    }

    return response;
	//return str;
}

// utility Pair class
function Pair(name, value)
{
    this.name = name;
    this.value = value;

	//alert("name: " + this.name + "\n\nvalue: <" + this.value + ">");
}

function PairById(id)
{
	this.name = id;
	//alert(id);
//
	this.value = document.getElementById(id).value;
	if(document.getElementById(id).value)
		this.value = document.getElementById(id).value;
	else
		this.value = " ";
//
	//alert("name: " + this.name + "\n\nvalue: <" + this.value + ">");
}

// 기존 클래스에 메서드 추가
String.prototype.trim = function() {
	// Use a regular expression to replace leading and trailing
	// spaces with the empty string
	return this.replace(/(^\s*)|(\s*$)/g, "");
}

// 사용자 정의 예외클래스
function createException(msgNum, msgText)
{
	this.messageNumber = msgNum;
	this.messageText = msgText;
}

// 사용예
function fpIsValidDateRpt(spr, src, col)
{
	var desc = spr.GetValue(spr.ActiveRow, col);

	var yymm = src.replace(/-/g, "").substring(0, 6);
	var yymm1 = desc.replace(/-/g, "").substring(0, 6);	

	if(yymm != yymm1)
	{
		fpInvalidCol(spr, 1, col);
		throw new createException(1, "입력하신 날짜는 보고기간에 포함되지 않습니다. 보고기간내 일자를 입력하십시오.");
	}

	fpInvalidCol(spr, 0, col);
}

// 위 함수의 사용예

try
{
    fpfpIsValidDateRpt(...);
}
catch(e)
{
    alert(e.messaageNumber + ':' + e.messageText);
}
finally
{
    ...
}

function 내에서 바로 메소드를 선언하면 메모리 낭비가 많다고 하더군요.
그래서 이렇게 쓰는게 나을 것 같습니다.

function Counter(count) {
  this.count = count;
}

Counter.prototype.increase = function () {
  this.count++;
}
Counter.prototype.decrease = function () {
  this.count--;
}
Counter.prototype.getCount = function () {
  return this.count;
}

counter = new Counter(10);
counter.increase();
counter.increase();
counter.increase();
counter.decrease();

window.alert(counter.getCount()); // 12

프로토타입 기반 언어의 특성을 활용하면 좋은 설계의 코드가 가능합니다.

http://www.crockford.com/javascript/javascript.html
http://en.wikipedia.org/wiki/Prototype-oriented

http://kangcom.com/sub/view.asp?topid=1&sku=200809180003
이 책이 도움이 되실것 같습니다.

----
웹페이지 : http://bzpalm.net/