Javascript로 객체지향을 표현하는게 한계가 있기는 하지만 캡슐화가 가지는 득이 상당하므로 가능한 클래스를 만들어 사용함도 나쁘지 않을듯 합니다. 첨부한 예제에는 private, public, static 을 어떻게 표현해야할지 잘 나와 있습니다.
[ js/MyClass.class.js ]
/**
* 나만의 클래스 구조를 만들어본다
*
* [참고]내부 변수는 앞에 _ 를 붙여주는 것이 좋다
*/
var MyClass = (function() {
// 생성자
var Class = function(initValue) {
// #################### 생성자 ####################
(function initialize() {
increaseCount();
})();
// #################### 변수 선언 ####################
// public 변수
this.id = null;
// private 변수
var _name = null;
var _initValue = initValue;
// #################### 메쏘드 선언 ####################
// private 메쏘드
var myPrivate = function() {
// private business code here
};
// public 메쏘드
this.getId = function() {
return this.id;
};
this.getName = function() {
return _name;
};
this.setName = function(name) {
_name = name;
};
this.getInitValue = function() {
return _initValue;
};
};
// #################### static 변수 및 메쏘드 ####################
// private static 변수
var totalCount = 0;
// public static 변수
Class.MAX_COUNT = 10;
// private static 메쏘드
var increaseCount = function() {
totalCount++;
};
// public static 메쏘드
Class.getTotalCount = function() {
return totalCount;
};
// #################### 참고사항 ####################
// [참고] prototype을 사용한 public 메쏘드 선언(객체간 공유하는 메쏘드)
Class.prototype = {
getMessage : function() {
return ("My id is " + this.getId() + "!!");
}
};
return Class;
})();
[ MyClassTest.html ]
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>MyClass.class.js 테스트</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="js/MyClass.class.js"></script>
<script type="text/javascript">
function test() {
var obj1 = new MyClass();
obj1.id = "user1";
obj1.setName("사용자1");
alert("obj1 : " +
"id=" + obj1.getId() + "\n" +
"name=" + obj1.getName() + "\n" +
"count=" + MyClass.getTotalCount() + "\n" +
"message=" + obj1.getMessage() + "\n" +
"");
var obj2 = new MyClass('initValue');
obj2.id = "user2";
obj2.setName("사용자2");
alert("obj2 : " +
"obj2.getId()=" + obj2.getId() + "\n" +
"obj2.id=" + obj2.id + "\n" +
"obj2.getName()=" + obj2.getName() + "\n" +
"obj2.name=" + obj2.name + "\n" +
"MyClass.getTotalCount()=" + MyClass.getTotalCount() + "\n" +
"MyClass.totalCount=" + MyClass.totalCount + "\n" +
"obj2.totalCount=" + obj2.totalCount + "\n" +
"MyClass.MAX_COUNT=" + MyClass.MAX_COUNT + "\n" +
"obj2.MAX_COUNT=" + obj2.MAX_COUNT + "\n" +
"obj2.getMessage()=" + obj2.getMessage() + "\n" +
"obj2.getInitValue()=" + obj2.getInitValue() + "\n" +
"");
}
</script>
</head>
<body>
<input type="button" value="test" onclick="test()"/>
</body>
</html>
자자.. 위와 같은 방법으로 자신만의 라이브러리를 구축한다면 관리하기도 편하고 충돌도 피할 수 있겠죠?
저도 시간 될때마다 유용한 클래스를 하나씩 만들어봐야겠습니다.
'Web Client > JavaScript' 카테고리의 다른 글
| javascript 로 만든 Map - JMap (0) | 2011.12.28 |
|---|
JMap.js
