JavaScript를 사용한 디자인 패턴 구현의 예는 무엇입니까?

StackOverflow https://stackoverflow.com/questions/24642

문제

저는 JavaScript를 사용하는 어느 정도 숙련된 프로그래머이지만 전문가는 아닙니다.나는 당신이 그것으로 꽤 강력한 일을 할 수 있다는 것을 알고 있지만, 상당히 기본적인 DOM 조작 외에는 많이 본 적이 없습니다.사람들이 JavaScript를 사용하여 Factory Method, Singleton 등과 같은 전통적인 디자인 패턴 개념의 몇 가지 예를 제공할 수 있는지 궁금합니다.이러한 패턴은 웹에서 어떤 경우에 사용됩니까?

도움이 되었습니까?

해결책

Jonathan Rauch가 이미 추천한 Pro JavaScript 디자인 패턴에서 배운 제가 가장 좋아하는 JavaScript 패턴을 추가하고 싶었습니다.

네임스페이스 싱글톤 패턴입니다.기본적으로 외부 사용으로부터 메서드와 변수를 숨길 수 있는 싱글톤을 통해 네임스페이스를 만듭니다.숨겨진/노출된 메소드는 클로저 내에 정의되어 있기 때문에 실제로 숨겨져 있습니다.

var com = window.com || {};
com.mynamespace = com.mynamespace || {};
com.mynamespace.newpackage = (function() {
    var myPrivateVariable = "hidden";
    var myPublicVariable = "exposed";

    function myPrivateMethod() {
        return "also hidden";
    }

    function myPublicMethod() {
        return "also exposed";
    }

    return {
        myPublicMethod: myPublicMethod,
        myPublicVariable: myPublicVariable
    };
})();

다른 팁

Nickolay가 이에 대해 언급했지만 디자인 패턴은 급격한 차이가 있는 언어 간에 일관성이 없습니다.나는 이전에 디자인 패턴이 종종 언어의 누락된 기능을 나타내는 신호라는 것을 읽었으며 이에 동의합니다.

완벽한 예로서, "Factory" 패턴은 일부 언어에서는 완전히 불필요합니다. Ruby는 제가 생각하는 예입니다(객체 생성은 Class 인스턴스의 메서드일 뿐이기 때문입니다).

# create a factory for MyObject
my_factory = MyObject
instance_1 = my_factory.new

# change the factory to another class
my_factory = MyOtherObject
instance_2 = my_factory.new

처음 개발된 언어와 다른 언어에 디자인 패턴을 적용할 때마다 그것이 정말로 필요한지, 그리고 사용 가능한 새로운 언어 기능으로 이를 개선할 수 있는 방법은 무엇인지 고려하십시오.디자인 패턴은 단지 지침일 뿐이므로, 의도한 용도에 실제로 패턴이 필요한지, 아니면 자신의 경우에 더 나은 방식으로 채택할 수 있는지 항상 고려해야 합니다.

좋은 게 있어요 무료 Javascript 디자인 패턴을 소개하는 Addy Osmani의 온라인 책: 초보자를 위한 필수 JavaScript 디자인 패턴, 1권

@잼팅:

JavaScript의 싱글톤 디자인 패턴

맙소사.내가 말을 해요.

OP로:예, 물론 어떤 의미에서는 가능합니다. 하지만 익숙한 일부 패턴은 Java처럼 눈에 띄지 않습니다.예를 들어 싱글톤은 단순히 객체일 뿐입니다.

var singleton = {
    sayHello: function() {
       alert("Hello!")
    }
};

Wikipedia에는 ​​다음과 같은 예가 있습니다. 공장 JS에서.

나는 최근에 사용했습니다 버니의 더 나은 애니메이션 수업 을 광범위하게 활용하는 것입니다. 전략 디자인 패턴.Bernie는 전략 패턴을 사용해야 하는 이유를 훌륭하게 설명하지만 안타깝게도 코드가 어떻게 작동하는지 정확히 설명하지 않습니다.그런 다음 디자인 패턴 참조를 사용할 때 전략 패턴 사용 방법에 대한 좋은 예를 보려면 animator.js의 코드와 주석을 살펴보세요.

예:

// This object controls the progress of the animation 
ex1 = new Animator();
// The Animator's subjects define its behaviour 
ex1.addSubject(updateButton);
function updateButton(value) {
    $('ex1Button').innerHTML = "Progress: " + Math.round(value * 100) + "%";
}

// now click below: each click to the button calls ex1.toggle()

JavaScript에서는 이 방법을 무엇이라고 하나요?

이것이 자기 호출 디자인 패턴입니다.Javascript를 시작하기 전까지는 본 적이 없었습니다.

나는 그들이 할 수 있다고 생각합니다. 여기 싱글톤의 예가 있습니다:

JavaScript의 싱글톤 디자인 패턴

물론 그럴 수 있습니다.이 주제에 관한 책은 다음과 같습니다.
프로 JavaScript 디자인 패턴
다음은 Factory 패턴의 예입니다.
Javascript의 팩토리 패턴

여기에 C#과 JavaScript의 디자인 패턴에 대한 토론을 통해 그룹으로 연구한 내용을 추가하고 싶습니다.회의 중에 제가 가장 좋았던 점은 C# 담당자가 JavaScript로 코드를 작성하고 JavaScript 담당자도 같은 코드를 작성한다는 것입니다.회의를 마친 후에는 집에서 더 많은 것을 배우고 여기에서 블로그 활동을 하려고 노력합니다.http://tech.wowkhmer.com/category/Design-Patterns.aspx C#과 JavaScript 모두에 해당됩니다.

듣다 Justin Diaz가 Javascript의 디자인 패턴에 대해 이야기합니다.이 강연은 위에서 언급한 그의 저서 Pro Javascript Techniques에도 기반을 두고 있습니다.Google I/O에서의 강연은 약 45분입니다.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top