javascript 객체지향프로그래밍 03 - namespace

|

javascript 객체지향프로그래밍03

윤지수님의 웹 프론트엔드 강의
네임스페이스를 이용해 실제 웹서비스 코드를 만드는 형태를 알아본다.

  • namespace : 전역을 피하는 자바스크립트 코딩 기법

    객체 소유권과 밀접히 관련된 이론으로, 전역 변수나 함수 사용을 가능한 한 피해야 한다. 이는 스크립트가 실행되는 환경을 항상 일정하게, 관리하기 쉽게 만드는 일이다. 전역 변수는 단 하나만 생성하고 그 안에 다른 객체와 함수가 존재하도록 해야 한다.

  • JS로 웹서비스 코드를 만드는 형태를 말들때는 여러가지 형태를 사용할 수 있다.
  • 서비스의 형태, 규칙을 갖고 개발할지 정해야한다.
  • 네임스페이스를 통해서 전역 공간에 있는 것들을 하나로 만들 수 있다. (자바의 패키지와 유사)
  • Yahoo의 예시
    • 전역 객체 YAHOO가 컨테이너이며 이 안에 다른 객체가 정의된다. 이런 식으로 단순히 기능을 한데 묶기 위해 사용하는 객체를 네임스페이스 라고 한다. ```
  • YAHOO.util.Dom - DOM을 조작하는 메서드이다.
  • YAHOO.util.Event - 이벤트를 다루는 메서드이다.
  • YAHOO.lang - 저수준 언어 기능과 관련된 메서드이다. ```
var MBC = {};
MBC.manager = {
	_init : function(){
		console.log('프로그램 시작!');
	},
	_attachEvents : function(){
		document.body.addEventListener('click', function(){
			console.log('body clicked!');
		},false);
	}
};
MBC.Viewer = (function(){
		function View(name){
		this.name = 'new viewer';
    }
		View.prototype.printName = function(){
			console.log(this.name);
    }
		return { View : View } // 즉시실행 함수 반환 값  
})(); // 즉시 실행 함수

MBC.Utility = {};

var myobj = MBC.Viewr; // Object{View: function}
var myinstance = new myobj.View(); // = new MBC.Viewer.View();
myinstance.printName() // new viewer 리턴
  • 이렇게 만들 때 주의사항은 네임 규칙을 계층적으로 설정해야 한다.
  • 네임스페이스 객체를 사용했을 때 장점
    • 계층적으로 의미에 맞춰서 기능들을 그룹화 할 수 있다.
    • 해당 기능을 어디서 호출하는지 혼란스럽지 않다.유지보수에 용이하다.
    • 전역변수를 획기적으로 줄일 수 있다.
  • 네임스페이스 객체 이름은 유니크하게 정하는게 좋다. (중복을 체크하고 이름을 생성해주는 네임스페이스 라이브러리 존재)
  • 네임스페이스 안에는 어떠한 코드 패턴도 사용 가능 (프로토타입 기반의 생성자 패턴, 모듈 패턴 등)