3. 재사용 가능한 코드 작성하기

3.1 객체지향 코드의 표준화

  • 재사용 코드를 작성할 때 가장 중요한 첫 단계는 전체 애플리케이션에 걸쳐 코드를 일관된 방식으로 작성하는 일이다.

프로토타입 상속

  • 자바스크립트는 프로토타입 상속(prototypal inheritance)이라는 독특한 방식으로 객체 생성과 상속을 지원한다.
  • 프로토타입 상속에서는 객체 생성자는 새로운 객체를 생성하는 데 사용하는 프로토타입(prototype) 객체를 만들면서 다른 객체의 메서드를 상속받는다.
  • 프로토타입 상속은 다중 상속이 아닌 단일 상속을 위해 설계되었다.

3.1 프로토타입 상속 예

  
<script type="text/javascript">

    function Person(name){
	    this.name = name;
    }

    Person.prototype.getName = function(){
        return this.name;
    };

    function User(name, password){
        this.name = name;
        this.password = password;
    }

    //User 객체가 Person 객체의 모든 메서드를 상속한다.
    //가장 중요하다.
    User.prototype = new Person();
    
    //User 객체에 새 메서드를 하나 추가한다. 
    User.prototype.getPassword = function(){
        return this.password;
    };

    //new User()를 실행할 때 마다 User 객체는 new Person()을 실행했을 때
    //Person 객체가 갖는 모든 메서드를 갖는다. 
    var user1 = new User("scott","tiger");
    alert(user1.getName());     //scott
    alert(user1.getPassword()); //tiger
    
</script>

클래스 상속

  • 클래스 상속(classical inheritance)은 대부분의 개발자에게 익숙한 상속방식이다
  • 아래는 더글락스 크록포드의 클래스 상속 예이다.

3.3 더글러스 크록포드가 만든 클래스 상속 스타일 자바스크립트 함수를 사용하는 예

  
<script type="text/javascript">

	function Person(name){
	    this.name = name;
	}

	//Person 객체에 새로운 메서드를 추가한다. 
	Person.method('getName', function(){
	    return this.name;
	});
	
	function User(name, password){
	    this.name = name;
	    this.password = password;
	}

	//Person 객체의 모든 메서드를 상속받는다. 
	User.inherits(Person);

	//새 메서드를 User 객체에 추가한다 
	User.method('getPassword', function(){
        return this.password;
    });

    User.method('getName', function(){
        return "My name is "+this.uber('getName');
    });
</script>

Base 라이브러리

  • Base 라이브러리는 자바스크립트 객체 생성과 상속에 관련해서 딘 에드워즈가 만든 라이브러리다.
  • 이라이브러리는 객체의 기능을 확장하는 방법과 직관적인 객체상속 기능을 제공한다
  • http://dean.edwards.name/base

Prototype 라이브러리

3.2 패키징

네임스페이스 만들기

  • namespacing은 코드를 깔끔하고 단순하게 만드는 간단하면서도 중요한 개념이다.
  • 자바스크립트는 아직까지 네임스페이스 만들기(namespacing)를 지원하지 않는다.
  • 자바스크립트의 모든 객체는 프로퍼티를 가지고, 프로퍼티는 다시 다른 객체를 담을 수 있다는 사실을 기반으로,
    다른 언어에서 네임스페이스를 만들 듯 아주 비슷한 모습으로 작동하는 무엇인가 만들 수 있다.

3.8 자바스크립트에서 네임스페이스 만들기와 그 구현 방법

  

//기본 전역 네임스페이스를 만든다. 
var YAHOO = {};

//객체를 사용해 자식 네임스페이스 만들기를 준비한다. 
YAHOO.util = {};

//함수 프로퍼티를 담는 마지막 네임스페이스를 만든다. 
YAHOO.util.Event = {
    addEventListener : function () { ... }
};

//특정 네임스페이스 안에 있는 함수를 호출한다. 
YAHOO.util.Event.addEventListener( ... ) 

Dojo

YUI

코드정리

변수선언

  • JSLine의 요구사항 중 하나는 모든 프로그램에서 변수를 사용하기 전에 반드시 선언해야 한다는 것이다.
  • 변수를 선언하지 않고 사용하면 유효범위가 혼란스러울 수 있다.
  • 변수를 false 값과 비교할 때 !=, == 대신 !==, ===를 사용하라.

블록과 중괄호

  • 한 줄짜리 블록에서도 중괄호를 사용해라

if (dog == cat){
  if (cat == mouse){
    mouse = "cheese";
  }

} 
 

세미콜론

  • 문장 끝에 항상 세미콜론을 입력해야 한다.

압축

  • 네트워크 사용량을 줄이기 위해 코드 압축기를 사용해 코드를 압축하는 일은 자바스크립트 라이브러리를 배포할 때 중요하다.
  • 이곳에서는 JSMin과 Packer라는 두가지 라이브러리를 살펴 본다.

JSMin

  • http://www.crockford.com/javascript/jsmin.html
  • JSMin은 자바스크립트 코드를 한 블록씩 들여다보면서 어떤 기능을 수행하는 코드만 남기고 다른 불필요한 문자는 모두 제거한다.
  • 공백과 주석등을 제거된다.
  • 가장 간단한 자바스크립트 압축기이며 최종 코드를 압축하려고 할 때 좋은 출발점이 될 수 있다.

Packer