자바스크립트의 클래스화

31일차: 자바스크립트의 클래스화

Ajax 2009/08/12 09:48



*자바에서 클래스 정의

class 클래스 이름{

변수들

메서드들(){ }

}




*자바스크립트에서 클래스 정의

클래스 이름 = function(){

변수;

}




//함수 정의(클래스에 함수 추가시켜주기)

클래스이름.prototype.함수이름 = function(){

함수 내용;

}




Member = function(id, name){

this.id = id;

this.name = name;

}







Member.prototype.setValue(newId,newName){

this.id = newId;

this.name = newName;

}




==> var mem = new Member("elvo", "이정석");

==> mem.setValue("abc","홍길동");







*JSON 기법




클래스 이름 = function(){

변수;

}




클래스이름.prototype ={

함수명1: function(){

함수내용;

}, <- 함수사이에 쉼표 꼭 해줘야함 

함수명2: function(){

함수내용;

}

}







*자바스크립트에서 패키지 정의하기




package ajax.xhr;

class aaa{}




var ajax = new Object();

ajax.Request = function(){}




var ajax = new Object();

ajax.xhr = new Object();

ajax.xhr.Request = function(){}




=>

var ajax = {};

ajax.xhr={};

ajax.xhr.Request = function(){}










* httpRequest.js를 패키지, 클래스화 하여 ajax.js로 바꾸기






httpRequest.js

function getXMLHttpRequest(){ //XHR객체를 리턴해주는 함수 만들기
if(window.ActiveXObject){//IE 6.0 이라면..
try{
return new ActiveXObject("Msxml2.XMLHTTP");
}catch (e) {
try {//IE의 옛날 버전 이라면..
return new ActiveXObject("Microsoft.XMLHTTP");
} catch (e1) {
return null;
}
}
}else if(window.XMLHttpRequest){ //다른 모든 기타 브라우저들 이라면 (IE 7.0이후 포함)
return new XMLHttpRequest();
}else{
return null;
}
}

var httpRequest = null;

function sendRequest(url, params, callback, method) {
httpRequest = getXMLHttpRequest();//XMLHttpRequest객체 구하기
var httpMethod = method ? method : 'GET'; //메소드값이 없으면 겟방식으로..


if(httpMethod != 'GET' && httpMethod != 'POST'){
httpMethod = 'GET';
}

var httpParams = (params == null || params == '')? null : params;

var httpUrl = url;

if(httpMethod == 'GET' && httpParams != null){
httpUrl = httpUrl + "?" + httpParams;
}

httpRequest.open(httpMethod, httpUrl, true);
httpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

httpRequest.onreadystatechange = callback;
httpRequest.send(httpMethod == 'POST' ? httpParams : null);

}




ajax.js

var ajax = {};
ajax.xhr = {};

ajax.xhr.Request = function(url,params,callback, method){
this.url = url;
this.params = params;
this.callback = callback;
this.method = method;
this.send();
}

ajax.xhr.Request.prototype = {
getXMLHttpRequest: function(){ //XHR객체를 리턴해주는 함수 만들기
if(window.ActiveXObject){//IE 6.0 이라면..
try{
return new ActiveXObject("Msxml2.XMLHTTP");
}catch (e) {
try {//IE의 옛날 버전 이라면..
return new ActiveXObject("Microsoft.XMLHTTP");
} catch (e1) {
return null;
}
}
}else if(window.XMLHttpRequest){ //다른 모든 기타 브라우저들 이라면 (IE 7.0이후 포함)
return new XMLHttpRequest();
}else{
return null;
}
},

send: function() {
this.req = this.getXMLHttpRequest();//XMLHttpRequest객체 구해서 req라는 멤버변수를 만들어 거기에 넣어줌
var httpMethod = this.method ? this.method : 'GET'; //메소드값이 없으면 겟방식으로..

if(httpMethod != 'GET' && httpMethod != 'POST'){
httpMethod = 'GET';
}

var httpParams = (this.params == null || this.params == '')? null : this.params;

var httpUrl = this.url;

if(httpMethod == 'GET' && httpParams != null){
httpUrl = httpUrl + "?" + httpParams;
}

this.req.open(httpMethod, httpUrl, true);
this.req.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

var request = this;
this.req.onreadystatechange = function(){
request.onStateChange.call(request);
}

this.req.send(httpMethod == 'POST' ? httpParams : null);

},
onStateChange: function(){
this.callback(this.req);
}
}