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

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

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

정식 디자인 패턴이 부착되어 있지 않더라도 자유롭게 코드를 게시하세요.

자바스크립트는 많이 작성했지만 객체 지향 패턴을 많이 적용하지는 못했고, 많은 부분을 놓치고 있다고 확신합니다.

다음은 세 가지 인기 있는 자바스크립트 패턴입니다.이러한 작업은 폐쇄로 인해 쉽게 실행할 수 있습니다.

• 모듈 패턴 - Eric Miraglia(에릭 미라글리아)의 예시(그리고 대중화)
• 메모화 - Oliver Steelle의 예제
• 카레링 - 더스틴 디아즈의 예

체크아웃할 수도 있습니다.

• Ross Harms and Dustin Diaz의 Pro JavaScript 디자인 패턴

다음은 Diaz가 2008년에 발표한 Google I/O 토크입니다. 여기서 Diaz는 자신의 책에서 몇 가지 주제에 대해 논의합니다.

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

상속

저는 ExtJS 3에 기반한 상속에 대한 표기법을 사용하는데, 자바에서 고전적인 상속을 모방하는 작업에 상당히 가깝다고 생각합니다.기본적으로 다음과 같이 실행됩니다.

// 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패턴

자바 의미의 '패턴'에 관해서는 싱글턴 패턴(캐싱에 적합)과 옵저버 패턴은 사용자가 버튼을 클릭할 때 일부 동작을 할당하는 것과 같은 이벤트 중심 기능에만 사용되는 것을 발견했습니다.

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

// 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');
});

OOO JS 가방에 있는 몇 가지 요령에 불과합니다. 유용하기를 바랍니다.

이 길을 따라 내려가실 생각이 있으시다면 더글러스 크록포드의 자바스크립트: 굿 파츠를 읽어보시기 바랍니다.이 책에 어울리는 훌륭한 책입니다.

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

예:

은.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

싱글톤 패턴은 종종 '캡슐화'와 조직화에 큰 도움이 됩니다.접근성을 변경할 수도 있습니다.

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

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

저는 jquery의 method chaining pattern을 매우 좋아합니다. 한 개체에 여러 가지 메소드를 호출할 수 있습니다.이것은 코드 한 줄로 여러 작업을 수행하는 것을 매우 쉽게 해줍니다.

예:

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

저는 jQuery 플러그인이 있는 데코레이터 패턴을 정말 좋아합니다.필요에 맞게 플러그인을 수정하기보다는 요청을 전달하고 추가 매개변수와 기능을 추가하는 사용자 지정 플러그인을 작성합니다.

예를 들어, 일련의 기본 인수를 항상 전달해야 하는 경우 비즈니스 논리에 연결되는 약간 다른 동작이 필요하다면 무엇이든 수행하는 플러그인을 작성합니다.pre그리고.post특정 인수가 지정되지 않은 경우 작업이 필요하며 기본 인수를 전달합니다.

이것의 가장 큰 장점은 라이브러리를 업데이트할 수 있고 라이브러리 변경을 포팅할 염려가 없다는 것입니다.코드가 깨질 수도 있지만, 적어도 그렇지 않을 가능성은 있습니다.

자바스크립트 세계에서 유용한 패턴 중 하나는 처음에 LINQ에 의해 인기를 얻었던 chaining pattern이며 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);
    });

이 패턴의 핵심 아이디어는thisCalculator function의 다른 공개 멤버에게 접근할 수 있는 key word.

언급URL : https://stackoverflow.com/questions/3722820/examples-of-practical-javascript-object-oriented-design-patterns