[javascript] 실용적인 자바 스크립트 객체 지향 디자인 패턴의 예

계승

저는 ExtJS 3 기반의 상속에 대한 표기법을 사용하는데 , Java에서 고전적인 상속을 에뮬레이트하는 것과 매우 유사합니다. 기본적으로 다음과 같이 실행됩니다.

// Create an 'Animal' class by extending
// the 'Object' class with our magic method
var Animal = Object.extend(Object, {
    move : function() {alert('moving...');}
});

// Create a 'Dog' class that extends 'Animal'
var Dog = Object.extend(Animal, {
    bark : function() {alert('woof');}
});

// Instantiate Lassie
var lassie = new Dog();

// She can move and bark!
lassie.move();
lassie.bark();

네임 스페이스

또한 Eric Miraglia가 네임 스페이스를 고수하는 데 동의하므로 위의 코드는 창 개체 외부의 자체 컨텍스트 내에서 실행되어야합니다. 이는 코드가 브라우저 창에서 실행되는 여러 동시 프레임 워크 / 라이브러리 중 하나로 실행되도록하려는 경우 중요합니다.

즉, 창 개체에 대한 유일한 방법은 고유 한 네임 스페이스 / 모듈 개체를 사용하는 것입니다.

// Create a namespace / module for your project
window.MyModule = {};

// Commence scope to prevent littering 
// the window object with unwanted variables
(function() {

    var Animal = window.MyModule.Animal = Object.extend(Object, {
         move: function() {alert('moving...');}
    });

    // .. more code

})();

인터페이스

또한 인터페이스와 같은 고급 OOP 구성을 사용하여 애플리케이션 디자인을 향상시킬 수도 있습니다. 이것에 대한 나의 접근 방식 은 Function.prototype다음 줄을 따라 표기법을 얻기 위해를 향상시키는 것 입니다.

var Dog = Object.extend(Animal, {
     bark: function() {
         alert('woof');
     }
     // more methods ..
}).implement(Mammal, Carnivore);

OO 패턴

Java 의미의 ‘패턴’에 관해서 는 사용자가 버튼을 클릭 할 때 일부 작업을 할당하는 것과 같은 이벤트 기반 기능 에 대해 Singleton 패턴 (캐싱에 적합)과 Observer 패턴 만 사용 했습니다.

관찰자 패턴을 사용하는 예는 다음과 같습니다.

// Instantiate object
var lassie = new Animal('Lassie');

// Register listener
lassie.on('eat', function(food) {
   this.food += food;
});

// Feed lassie by triggering listener
$('#feeding-button').click(function() {
    var food = prompt('How many food units should we give lassie?');
    lassie.trigger('eat', [food]);
    alert('Lassie has already eaten ' + lassie.food + ' units');
});

그리고 그것은 내 OO JS 가방에있는 몇 가지 트릭 일뿐입니다. 유용하기를 바랍니다.

이 길을 가고 싶다면 Douglas Crockfords Javascript : the Good Parts 를 읽는 것이 좋습니다 . 이것에 대한 훌륭한 책입니다.