Design Patterns

원리를 알면 비슷한 도구를 만들 수 있다. 도구를 사용하는 사람이 될것인가 도구를 이해하는 사람이 될것인가.

What is a Pattern?

1. Proven - 패턴이라는 것은 검증이 됐다는 것이다.

2. Reusable - 재사용이 가능하다. out of the box solution - 박스에서 꺼내서 바로 사용한다.

3. Expressive - 표현적이다. 명칭이나 이름을 보고 유추가 가능하다. 계획(방향성)이지 솔루션을 주는것은 아니다.

Object Creation Pattern

객체를 생성할 때 자주 쓰이는 패턴을 말한다

1. Modules - 객체, 합쳐져서 뭔가를 이루는걸 말한다. 작은거냐 큰거는 상황에 따라서 다르다.

   • 객체 리터럴

   • var module = {
       someProp: 'hello',
       someMethod: function () {
         console.log(this.someProp);
       }
     };

   • 적절하지 않는 사항

     var bankAccount = {
       balance: 900,
       deposit: function (amount) {
         this.balance += amount;
       },
       withdraw: function (amount) {
         this.balance -= amount;
       }
     };
     
     bankAccount.deposit(1000);
     bankAccount.withdraw(1000);
     
     bankAccount.balance = 0; // ?!

• Privacy Concerns - 코드를 숨기는건 어렵다. 그래서 접근하기 어렵게 만들어야 한다.

  • 이렇게 즉시실행함수 IIFE를 사용하는것은 재사용이 어렵다.

• var bankAccount = (function (){
  var balance = 900;
  return {
  deposit: function (amount) {
   balance += amount;
  },
  withdraw: function (amount) {
   balance -= amount;
  }
  };
  })();
  
  var human1BankAccount = bankAccount();
  human1BankAccount.deposit();

• 꼭 써야한다면 네임스페이스 나만의 공간을 뚫어놓는다. window.VANILLA_CODING = {} 해서 공간을 만든다.

• 팩토리 함수

• function bankAccount (){
       var balance = 900;
      return {
      deposit: function (amount) {
       balance += amount;
         },
         withdraw: function (amount) {
       balance -= amount;
         }
    };
   }
  
  var human1BankAccount = bankAccount();
  human1BankAccount.deposit();

• 팩토리함수를 접근못하게 하기

• (function bankApp () {
    function bankAccount (){
      var balance = 900;
      return {
        deposit: function (amount) {
         balance += amount;
        },
        withdraw: function (amount) {
         balance -= amount;
        }
      };
     }
  
      var human1BankAccount = bankAccount();
      human1BankAccount.deposit();
  })();

1. SingleTons

   • 객체가 하나만 만들어 지도록 한다. 제한을 걸어준다.

   • var userModule = (function () {
       var users = [];
       var userId = 0;
     
       return {
         create: (username, password) => {
           var user = { id: userId, username, password };
           users.push(user);
           userId++;
     
           return user;
         },
         get: (username) => {
           var targetUser;
     
           users.forEach((user) => {
             if (user.username === username) {
               targetUser = user;
             }
           });
     
           return targetUser;
         }
       }
     })();

   • var HTTPModule = (function () {
       var instance = null;
     
       return {
         create: function () {
           if (!instance) {
             instance = {
               get: url => {
                 return $.get(url);
               },
               post: (url, data) => {
                 return $.post(url, data);
               }
             };
             return instance;
           } else {
             return instance;
           }
         }
       }
     })();

2. Factory Pattern

3. function fight() {
     console.log('야아아아아!!!');
   }
   
   /* Factory Pattern */
   function MyenuriFactory (name) {
     const m = {};
     m.name = name;
     m.from = 'poor family';
     m.cry = function () {
       console.log('재송함미다..');
     };
     m.fight = fight; //싸우는 기능이 있다. 
     return m;
   }
   
   function SyemooniFactory (level) {
     const s = {};
     s.level = level;
     s.speak = function () {
       console.log('저거 치워...');
     };
     s.fight = fight; // 싸우는 기능이 있다.
     return s;
   }
   
   const kim = SyemooniFactory(999);
   const yum = MyenuriFactory('yum');

4. Mixin - 공유한다. 코드를 재활용하는 패턴이다. 확장을 해주기도 한다.

   • 변화없이 확장해준다.

5. var yum = MyenuriFactory('yum');
   
   function fighterDNAMixin (goodPerson) {
     goodPerson.fight = function (opponent) { // 점을 찍었다. 객체가 들어오는구나.'ㅁ'
       console.log(opponent.name + '.. 저거 치워..');
     };
   }
   
   fighterDNAMixin(yum);

6. Chaining

7. publish - subscribe (고릴라 업무에 들어 있다.)