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

Question 1

애플리케이션의 자바 스크립트에서 어떤 객체 지향 디자인 패턴을 사용하며 그 이유는 무엇입니까?

공식적인 디자인 패턴이 첨부되어 있지 않더라도 코드를 게시 할 수 있습니다.

나는 많은 자바 스크립트를 작성했지만 내가하는 일에 많은 객체 지향 패턴을 적용하지 않았으며 많은 것을 놓치고 있다고 확신합니다.

Question 2

다음은 세 가지 인기있는 JavaScript 패턴입니다. 클로저로 인해 쉽게 구현할 수 있습니다 .

모듈 패턴 -Eric Miraglia의 예 (및 인기를 얻음)
메모 화-Oliver Steele의 예
Currying- 예 : Dustin Diaz

다음 사항도 확인해보십시오.

프로 자바 스크립트 디자인 패턴 에 의해 로스 메즈 와 더스틴 디아즈

다음은 Diaz가 발표 한 2008 년 Google I / O 강연으로 그의 책에서 몇 가지 주제에 대해 논의합니다.

Google I / O 2008-표현 언어의 디자인 패턴

Question 3

계승

저는 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 를 읽는 것이 좋습니다 . 이것에 대한 훌륭한 책입니다.

Question 4

저는 모듈 패턴 의 팬입니다 . 확장 가능하고 비 의존적 (대부분의 경우) 프레임 워크를 구현하는 방법입니다.

예:

프레임 워크 Q는 다음과 같이 정의됩니다.

var Q = {};

기능을 추가하려면 :

Q.test = function(){};

이 두 줄의 코드는 함께 사용되어 모듈 을 형성 합니다 . 모듈이면의 아이디어는 모두 기본 프레임 워크 (이 경우 Q)를 확장하지만 서로 의존하지 않고 (올바르게 설계된 경우) 순서에 관계없이 포함될 수 있다는 것입니다.

모듈에서 프레임 워크 객체가없는 경우 먼저 생성합니다 ( Singleton 패턴 의 예 ).

if (!Q)
    var Q = {};

Q.myFunction = function(){};

이렇게하면 위와 같은 여러 모듈을 별도의 파일에 포함 할 수 있으며 순서에 관계없이 포함 할 수 있습니다. 그들 중 하나는 프레임 워크 개체를 만든 다음 확장합니다. 프레임 워크가 있는지 수동으로 확인할 필요가 없습니다. 그런 다음 모듈 / 함수가 사용자 지정 코드에 있는지 확인하려면 :

if (Q.myFunction)
    Q.myFunction();
else
    // Use a different approach/method

Question 5

싱글 톤 패턴은 종종 '캡슐화'및 조직 작업에 매우 유용합니다. 접근성을 변경할 수도 있습니다.

var myInstance = {
  method1: function () {
    // ...
  },
  method2: function () {
    // ...
  }
};

자바 스크립트에서 싱글 톤을 구현하는 가장 깨끗한 방법

Question 6

저는 jquery의 메서드 체인 패턴을 정말 좋아 하여 하나의 객체에서 여러 메서드를 호출 할 수 있습니다. 한 줄의 코드로 여러 작업을 수행하는 것이 정말 쉽습니다.

예:

$('#nav').click(function() {
   $(this).css('color','#f00').fadeOut();
});

Question 7

저는 jQuery 플러그인이 있는 Decorator 패턴 을 정말 좋아합니다 . 필요에 맞게 플러그인을 수정하는 대신 요청을 전달하고 추가 매개 변수와 기능을 추가하는 커스텀 플러그인을 작성하세요.

당신이 항상 주위에 기본 인수 세트를 전달해야하고, 예를 들어, 당신은 비즈니스 로직에 관계가 무엇이든 않는 플러그인을 작성하는 것이 약간-다른 동작을 필요 pre하고 post필요에 따라 필요한 작업과 기본 인수를 전달을 특정 인수가 지정되지 않은 경우.

이것의 주요 이점은 라이브러리를 업데이트 할 수 있고 라이브러리 변경 포팅에 대해 걱정할 필요가 없다는 것입니다. 코드가 깨질 수 있지만 적어도 깨지지 않을 가능성은 있습니다.

Question 8

자바 스크립트 세계에서 유용한 패턴 중 하나는 처음에 LINQ에서 인기를 얻었으며 jQuery에서도 사용되는 체인 패턴입니다.

이 패턴을 사용하면 연결 방식으로 클래스의 다른 메서드를 호출 할 수 있습니다.

이 패턴의 주요 구조는 다음과 같습니다.

var Calaculator = function (init) {
    var result = 0;
    this.add = function (x) { result += (init + x); return this; };
    this.sub = function (x) { result += (init - x); return this; };
    this.mul = function (x) { result += (init * x); return this; };
    this.div = function (x) { result += (init / x); return this; };

    this.equals = function (callback) {
        callback(result);
    }

    return this;
};


new Calaculator(0)
    .add(10)
    .mul(2)
    .sub(5)
    .div(3)
    .equals(function (result) {
        console.log(result);
    });

이 패턴의 핵심 아이디어 this는 계산기 기능의 다른 공개 멤버에 대한 액세스를 가능하게하는 키워드입니다.