Web/JavaScript (39) 썸네일형 리스트형 [Generator] * 과 yield Generator 함수의 실행을 중간에 멈췄다가 재개할 수 있는 기능입니다. next(), return(), throw() 다른 작업을 하다가 다시 돌아와서 다시 next() 해주더라도 멈춘 부분 부터 이어서 실행할 수 있다 function 옆에 * 을 써서 만들고, 내부에 yield 키워드를 사용한다. yield 에서 함수의 실행을 멈출 수 있다. iterable Symbol.iterator 메서드가 있다. Symbol.iterator 는 iterator 를 반환해야 한다. iterator next 메서드를 가진다. next 메서드는 value 와 done 속성을 가진 객체를 반환한다. 작업이 끝나면 done 은 true 가 된다. 외부에서 값 입력받기 [Design Pattern] 9. Module Pattern function AnimalContainter () { const container = []; function addAnimal (name) { container.push(name); } function getAllAnimals() { return container; } function removeAnimal(name) { const index = container.indexOf(name); if(index < 1) { throw new Error('Animal not found in container'); } container.splice(index, 1) } return { add: addAnimal, get: getAllAnimals, remove: removeAnimal } } const cont.. [Design Pattern] 8.Builder Pattern // 이전 방식 // 심지어 내가 쓰는 방식이네 ㅡㅜ class Request { constructor(url, data, method) { this.url = url; this.method = method; this.data = data; } } 이렇게 코드를 작성하면 계속 데이터를 전달해줘야하는 문제가 생긴다.(동감동감) const request = new Request('http://localhost', {}, method); //이런식으로 생성해야만 했음 Builder Pattern 적용 class Request { constructor() { this.url = ''; this.method = ''; this.data = null; } } class RequestBuilder { construc.. [Design Pattern] 7.Prototype Pattern https://meongae.tistory.com/97 [디자인 패턴] ES6로 구현하는 디자인 패턴 ※ 디자인 패턴 종류 ▶ 생성패턴 Constructor Factory Abstract Factory Prototype Singleton Builder ▶ 구조 패턴 Adapter Composite Module Decorator Facade Proxy FlyWeight Bridge ▶ 행동 패턴 Chain of Responsibility Command Observer Iter meongae.tistory.com JavaScript는 Object의 create() 메소드를 활용하여 손쉽게 구현 가능하다 const car = { noOfWheels: 4, start() { return `start ${this.. [Design Pattern] 6. Decorator Pattern 런타임 시에 객체에 동적으로 부가기능을 추가하는 패턴 let sale = new Sale(100); sale = sale.decorate('fedtax'); sale = sale.decorate('quebec'); sale = sale.decorate('money'); sale.getPrice(); function Sale(price) { this.price = price || 100; } Sale.prototype.getPrice = function() { return this.price; } //Sale.decorators = {}; Sale.prototype.decorate = function(decorators) { var F = function() {}, overrides = this.const.. [Design Pattern) 5.Command Pattern https://www.dofactory.com/javascript/design-patterns/command JavaScript Command Design Pattern JavaScript Command The Command pattern encapsulates actions as objects. Command objects allow for loosely coupled systems by separating the objects that issue a request from the objects that actually process the request. These requests are called events an www.dofactory.com function add(x, y) { return .. [Design Pattern] 4. Facade Pattern 특징 - 간략화된 인터페이스 - 직접적인 접근 제약 여기서 주문하기를 한 주문자는 세부 내용을 몰라도 주문하기만 하면 실행할 수 있다 = 퍼사드 패턴 [Design Pattern] 3.Observer Pattern 행동/이벤트 카테고리에 들어감 -> 한 주제 객체의 상태가 바뀌면 다른 구독 중인 객체들에게 상태와 변경을 알림 1:N의 관계 느슨한 결합 이전 1 2 3 4 5 다음
