JavaScript 전략 패턴 프로그래밍에 대한 자세한 설명

전략 디자인 패턴이 마음에 듭니다. 최대한 활용하려고 노력하고 있어요. 기본적으로 전략 패턴은 대리자를 사용하여 이를 사용하는 알고리즘 클래스를 분리합니다.

이렇게 하면 여러 가지 이점이 있습니다. 이는 특정 유형의 객체에 사용할 알고리즘을 결정하기 위해 큰 조건문을 사용하는 것을 방지합니다. 따라서 관심사를 분리하면 클라이언트 복잡성이 줄어들면서 하위 클래스화도 용이해집니다. 모듈성과 테스트 용이성을 향상시킵니다. 각 알고리즘은 개별적으로 테스트할 수 있습니다. 모든 클라이언트는 알고리즘을 시뮬레이션할 수 있습니다. 모든 클라이언트는 모든 알고리즘을 사용할 수 있습니다. 그들은 상호 변조할 수 있습니다. 레고처럼요.

전략 패턴을 구현하려면 일반적으로 두 명의 참가자가 있습니다.

이 전략의 목적은 알고리즘을 캡슐화하는 것입니다.

플러그 앤 플레이 방식으로 모든 전략을 사용할 수 있는 클라이언트(컨텍스트) 개체입니다.

Javascript에서 전략 패턴을 사용하는 방법과 이를 혼란스러운 환경에서 사용하여 라이브러리를 작은 플러그인과 플러그 앤 플레이 패키지로 분할하는 방법을 소개합니다.

전략으로서의 기능

함수는 알고리즘을 캡슐화하는 훌륭한 방법을 제공하며 전략으로 사용될 수 있습니다. 클라이언트에 함수를 전달하고 클라이언트가 정책을 호출할 수 있는지 확인하세요.

예를 들어 증명해 보겠습니다. Greeter 클래스를 만들고 싶다고 가정해 보겠습니다. 사람들에게 인사만 하면 됩니다. 우리는 인사반이 사람들에게 인사하는 다양한 방법을 알기를 바랍니다. 이 아이디어를 구현하기 위해 우리는 다양한 인사말 전략을 만듭니다.

// Greeter is a class of object that can greet people.
// It can learn different ways of greeting people through
// 'Strategies.'
//
// This is the Greeter constructor.
var Greeter = function(strategy) {
this.strategy = strategy;
};
 
// Greeter provides a greet function that is going to
// greet people using the Strategy passed to the constructor.
Greeter.prototype.greet = function() {
return this.strategy();
};
 
// Since a function encapsulates an algorithm, it makes a perfect
// candidate for a Strategy.
//
// Here are a couple of Strategies to use with our Greeter.
var politeGreetingStrategy = function() {
console.log("Hello.");
};
 
var friendlyGreetingStrategy = function() {
console.log("Hey!");
};
 
var boredGreetingStrategy = function() {
console.log("sup.");
};
 
// Let's use these strategies!
var politeGreeter = new Greeter(politeGreetingStrategy);
var friendlyGreeter = new Greeter(friendlyGreetingStrategy);
var boredGreeter = new Greeter(boredGreetingStrategy);
 
console.log(politeGreeter.greet()); //=> Hello.
console.log(friendlyGreeter.greet()); //=> Hey!
console.log(boredGreeter.greet()); //=> sup.

로그인 후 복사

위의 예에서 Greeter는 클라이언트이며 세 가지 전략을 가지고 있습니다. 보시다시피 Greeter는 알고리즘 사용 방법을 알고 있지만 알고리즘의 세부 사항에 대해서는 전혀 모릅니다.

복잡한 알고리즘의 경우 간단한 함수로는 만족할 수 없는 경우가 많습니다. 이 경우 가장 좋은 접근 방식은 객체 측면에서 정의하는 것입니다.

전략으로서의 수업

전략은 클래스일 수도 있습니다. 특히 위 예에서 사용된 인위적인(정책/알고리즘)보다 계산이 더 복잡한 경우에는 더욱 그렇습니다. 클래스를 사용하면 각 전략에 대한 인터페이스를 정의할 수 있습니다.

아래 예에서는 이것이 확인됩니다.

// We can also leverage the power of Prototypes in Javascript to create
// classes that act as strategies.
//
// Here, we create an abstract class that will serve as the interface
// for all our strategies. It isn't needed, but it's good for documenting
// purposes.
var Strategy = function() {};
 
Strategy.prototype.execute = function() {
 throw new Error('Strategy#execute needs to be overridden.')
};
 
// Like above, we want to create Greeting strategies. Let's subclass
// our Strategy class to define them. Notice that the parent class
// requires its children to override the execute method.
var GreetingStrategy = function() {};
GreetingStrategy.prototype = Object.create(Strategy.prototype);
 
// Here is the `execute` method, which is part of the public interface of
// our Strategy-based objects. Notice how I implemented this method in term of
// of other methods. This pattern is called a Template Method, and you'll see
// the benefits later on.
GreetingStrategy.prototype.execute = function() {
 return this.sayHi() + this.sayBye();
};
 
GreetingStrategy.prototype.sayHi = function() {
 return "Hello, ";
};
 
GreetingStrategy.prototype.sayBye = function() {
 return "Goodbye.";
};
 
// We can already try out our Strategy. It requires a little tweak in the
// Greeter class before, though.
Greeter.prototype.greet = function() {
 return this.strategy.execute();
};
 
var greeter = new Greeter(new GreetingStrategy());
greeter.greet() //=> 'Hello, Goodbye.'

로그인 후 복사

클래스를 사용하여 실행 메서드 개체로 전략을 정의합니다. 클라이언트는 어떤 전략을 사용해도 이 인터페이스를 구현할 수 있습니다.

또한 GreetingStrategy를 어떻게 생성했는지 살펴보세요. 흥미로운 부분은 methodexecute의 오버로딩입니다. 다른 함수의 형태로 정의됩니다. 이제 클래스의 후속 하위 클래스는 일반 알고리즘을 변경하지 않고도 sayHiorsayBye 메소드와 같은 특정 동작을 변경할 수 있습니다. 이 패턴을 템플릿 방식이라고 하며 전략 패턴에 매우 적합합니다.

무슨 일이 일어나는지 살펴보겠습니다.

// Since the GreetingStrategy#execute method uses methods to define its algorithm,
// the Template Method pattern, we can subclass it and simply override one of those
// methods to alter the behavior without changing the algorithm.
 
var PoliteGreetingStrategy = function() {};
PoliteGreetingStrategy.prototype = Object.create(GreetingStrategy.prototype);
PoliteGreetingStrategy.prototype.sayHi = function() {
 return "Welcome sir, ";
};
 
var FriendlyGreetingStrategy = function() {};
FriendlyGreetingStrategy.prototype = Object.create(GreetingStrategy.prototype);
FriendlyGreetingStrategy.prototype.sayHi = function() {
 return "Hey, ";
};
 
var BoredGreetingStrategy = function() {};
BoredGreetingStrategy.prototype = Object.create(GreetingStrategy.prototype);
BoredGreetingStrategy.prototype.sayHi = function() {
 return "sup, ";
};
 
var politeGreeter  = new Greeter(new PoliteGreetingStrategy());
var friendlyGreeter = new Greeter(new FriendlyGreetingStrategy());
var boredGreeter  = new Greeter(new BoredGreetingStrategy());
 
politeGreeter.greet();  //=> 'Welcome sir, Goodbye.'
friendlyGreeter.greet(); //=> 'Hey, Goodbye.'
boredGreeter.greet();  //=> 'sup, Goodbye.'

로그인 후 복사

GreetingStrategy는 실행 메소드의 단계를 지정하여 클래스 알고리즘을 생성합니다. 위의 코드 조각에서는 특수한 알고리즘을 생성하여 이를 활용합니다.

하위 클래스가 없으면 Greeter는 여전히 다형성 동작을 나타냅니다. 올바른 알고리즘을 실행하기 위해 다양한 유형의 Greeter 간에 전환할 필요가 없습니다. 이는 모두 각 Greeter 개체에 바인딩됩니다.

var greeters = [
 new Greeter(new BoredGreetingStrategy()),
 new Greeter(new PoliteGreetingStrategy()),
 new Greeter(new FriendlyGreetingStrategy()),
];
 
greeters.forEach(function(greeter) {
  
 // Since each greeter knows its strategy, there's no need
 // to do any type checking. We just greet, and the object
 // knows how to handle it.
 greeter.greet();
});

로그인 후 복사

다양한 환경에서의 전략 모드

내가 가장 좋아하는 전략 패턴의 예 중 하나는 Passport.js 라이브러리에 있습니다. Passport.js는 Node.js에서 인증을 처리하는 간단한 방법을 제공합니다. 다양한 제공업체(Facebook, Twitter, Google 등)가 이를 지원하며 각각 정책으로 구현됩니다.

라이브러리는 모든 전략과 마찬가지로 npm 패키지로 제공됩니다. 라이브러리 사용자는 고유한 사용 사례에 맞게 설치할 npm 패키지를 결정할 수 있습니다. 다음은 이 작업이 수행되는 방법을 보여주는 코드 조각입니다.

// Taken from http://passportjs.org
 
var passport = require('passport')
   
  // Each authentication mechanism is provided as an npm package.
  // These packages expose a Strategy object.
 , LocalStrategy = require('passport-local').Strategy
 , FacebookStrategy = require('passport-facebook').Strategy;
 
// Passport can be instanciated using any Strategy.
passport.use(new LocalStrategy(
 function(username, password, done) {
  User.findOne({ username: username }, function (err, user) {
   if (err) { return done(err); }
   if (!user) {
    return done(null, false, { message: 'Incorrect username.' });
   }
   if (!user.validPassword(password)) {
    return done(null, false, { message: 'Incorrect password.' });
   }
   return done(null, user);
  });
 }
));
 
// In this case, we instanciate a Facebook Strategy
passport.use(new FacebookStrategy({
  clientID: FACEBOOK_APP_ID,
  clientSecret: FACEBOOK_APP_SECRET,
  callbackURL: "http://www.example.com/auth/facebook/callback"
 },
 function(accessToken, refreshToken, profile, done) {
  User.findOrCreate(..., function(err, user) {
   if (err) { return done(err); }
   done(null, user);
  });
 }
));

로그인 후 복사

Passport.js 라이브러리에는 하나 또는 두 개의 간단한 인증 메커니즘만 제공됩니다. 그 외에는 컨텍스트 개체를 준수하는 정책 클래스 이외의 인터페이스가 없습니다. 이 메커니즘을 통해 사용자는 프로젝트에 부정적인 영향을 주지 않고 자신의 인증 메커니즘을 쉽게 구현할 수 있습니다.

반성

전략 패턴은 코드의 모듈성과 테스트 가능성을 높이는 방법을 제공합니다. 이는 (전략 패턴)이 항상 작동한다는 의미는 아닙니다. 믹스인은 런타임에 알고리즘과 같은 기능을 객체에 주입하는 데에도 사용할 수 있습니다. 평평한 오래된 오리 유형의 다형성은 때때로 충분히 간단할 수 있습니다.

그러나 전략 패턴을 사용하면 처음에 대규모 아키텍처를 도입하지 않고도 워크로드가 증가함에 따라 코드를 확장할 수 있습니다. Passport.js 예제에서 보았듯이 향후 관리자가 추가 전략을 추가하는 것이 더 쉬워질 것입니다.