당신이 알아야 할 7가지 최고의 JavaScript 디자인 패턴
유지 관리, 재사용 및 확장이 용이한 코드를 작성하는 데 도움이 되는 7가지 최고의 JavaScript 디자인 패턴을 알아보세요. 이러한 패턴은 모든 JavaScript 개발자가 알아야 할 필수 사항입니다.
알아야 할 7가지 최고의 JavaScript 디자인 패턴 - JavaScript의 디자인 패턴은 JavaScript 웹 애플리케이션 작성 시 일반적으로 발생하는 문제에 적용되는 재사용 가능한 솔루션입니다.
소개
문제에 대한 솔루션을 제공하기 위해 JavaScript 디자인 패턴을 템플릿으로 참조하는 것은 매우 적절 하지만 이러한 패턴이 개발자를 대체할 수 있다고 말하는 것은 아닙니다.
디자인 패턴은 많은 개발자의 경험을 결합하여 우리가 찾고 있는 문제를 충족하는 최적화된 방식으로 코드를 구조화하는 데 도움이 되며, 코드의 구문과 의미를 설명하는 것보다 문제에 대한 솔루션을 설명하는 데 사용되는 공통 어휘를 제공합니다.
JavaScript 디자인 패턴은 개발자가 조직적이고 아름답고 잘 구성된 코드를 작성하는 데 도움이 됩니다. 디자인 패턴을 사용하면 쉽게 재사용할 수 있지만 결코 개발자를 보완할 수는 없으며 오히려 특정 패턴에 얽매이지 않는 일반화된 솔루션을 제공함으로써 웹 애플리케이션 개발에 큰 문제로 이어질 수 있는 사소한 문제를 방지함으로써만 지원합니다. 문제.
불필요한 반복을 없애 전체 코드베이스를 줄여서 임시 솔루션보다 코드를 더욱 강력하게 만듭니다.
이 기사에서는 가장 훌륭하고 인기 있는 7가지 JavaScript 디자인 패턴을 살펴보겠습니다. 물론 대부분은 다음 세 가지 범주에 속합니다. 창조 디자인 패턴, 구조 디자인 패턴, 행동 디자인 패턴이 그것이다. 패턴은 다음 이미지와 같습니다. 단지 맥락을 알기 위해서입니다.
1. 생성자 디자인 패턴.
이는 메모리가 할당된 후 새로 생성된 개체를 초기화하는 데 사용되는 특수 메서드입니다. JavaScript는 일반적으로 객체 지향적이므로 객체를 가장 많이 다루므로 객체 생성자에 대해 자세히 알아보려고 합니다. JavaScript에서는 새 개체를 만드는 세 가지 방법이 있습니다.
다음은 생성자 디자인 패턴을 만드는 한 가지 방법입니다.
// This creates a new empty Object
var newObject = {};
// This creates a new empty Object
var newObject = Object.create(Object.prototype);
var newObject = newObject();
함수의 속성에 접근하려면 객체를 초기화해야 합니다.
const object = new ConstructorObject();
위의 new 키워드는 a가 constructorObject생성자 역할을 해야 함을 JavaScript에 알려줍니다. 상속은 이 디자인 패턴이 지원하지 않는 것 중 하나입니다. 자세한 내용을 알아보세요
여기 .
2. 프로토타입 패턴
프로토타입 패턴은 객체가 다른 객체의 프로토타입 역할을 하도록 생성된 프로토타입 상속을 기반으로 합니다. 실제로 프로토타입은 생성된 각 객체 생성자의 청사진 역할을 합니다.
예
var myCat= {
name:"Ford Escort",
brake:function(){
console.log("Stop! I am applying brakes");
}
Panic : function (){
console.log ( "wait. how do you stop thuis thing?")
}
}
// use objec create to instansiate a new car
var yourCar= object.create(myCar);
//You can now see that one is a prototype of the other
console.log (yourCar.name);]
3. 모듈 설계 패턴
모듈 디자인 패턴에는 프로토타입 패턴보다 개선된 부분이 있습니다. 다양한 유형의 수정자(비공개 및 공개 모두)가 모듈 패턴에 설정됩니다. 충돌 없이 유사한 기능이나 속성을 만들 수 있습니다. 공개적으로 함수 이름을 바꿀 수 있는 유연성이 있습니다. 여기서 가장 어려운 부분은 외부 환경에서 생성된 함수를 재정의할 수 없다는 것입니다.
예
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 container = AnimalContainter();
container.add('Hen');
container.add('Goat');
container.add('Sheep');
console.log(container.get()) //Array(3) ["Hen", "Goat", "Sheep"]
container.remove('Sheep')
console.log(container.get()); //Array(2) ["Hen", "Goat"]
4. 싱글톤 패턴
이는 데이터베이스 연결과 같이 하나의 인스턴스만 생성해야 하는 시나리오에서 필수적입니다. 연결이 닫혀 있을 때만 인스턴스를 생성할 수 있으며, 새 인스턴스를 열기 전에 열려 있는 인스턴스를 반드시 닫아야 합니다. 이 패턴은 엄격한 패턴이라고도 하며, 이 패턴과 관련된 한 가지 단점은 테스트를 위해 쉽게 선택되지 않는 숨겨진 종속성 개체로 인해 테스트 시 어려운 경험이 된다는 것입니다.
예
function DatabaseConnection () {
let databaseInstance = null;
// tracks the number of instances created at a certain time
let count = 0;
function init() {
console.log(`Opening database #${count + 1}`);
//now perform operation
}
function createIntance() {
if(databaseInstance == null) {
databaseInstance = init();
}
return databaseInstance;
}
function closeIntance() {
console.log('closing database');
databaseInstance = null;
}
return {
open: createIntance,
close: closeIntance
}
}
const database = DatabseConnection();
database.open(); //Open database #1
database.open(); //Open database #1
database.open(); //Open database #1
database.close(); //close database
5. 공장 패턴.
생성자가 필요 없이 객체를 생성하는 것과 관련된 창조물입니다. 이는 생성할 팩토리 객체의 유형을 지정할 수 있는 객체 생성을 위한 일반 인터페이스를 제공합니다. 따라서 우리는 객체만 지정하고 팩토리는 우리가 사용할 수 있도록 인스턴스화하고 반환합니다. 객체 구성 요소 설정이 매우 복잡하고 환경에 따라 다양한 객체 인스턴스를 쉽게 생성하려는 경우 팩토리 패턴을 사용하는 것이 좋습니다. 또한 여러 작업을 수행할 때도 팩토리 패턴을 사용할 수 있습니다. 동일한 속성을 공유하는 작은 개체와 분리가 필요한 개체를 구성할 때.
예
// Dealer A
DealerA = {};
DealerA.title = function title() {
return "Dealer A";
};
DealerA.pay = function pay(amount) {
console.log(
`set up configuration using username: ${this.username} and password: ${
this.password
}`
);
return `Payment for service ${amount} is successful using ${this.title()}`;
};
//Dealer B
DealerB = {};
DealerB.title = function title() {
return "Dealer B";
};
DealerB.pay = function pay(amount) {
console.log(
`set up configuration using username: ${this.username}
and password: ${this.password}`
);
return `Payment for service ${amount} is successful using ${this.title()}`;
};
//@param {*} DealerOption
//@param {*} config
function DealerFactory(DealerOption, config = {}) {
const dealer = Object.create(dealerOption);
Object.assign(dealer, config);
return dealer;
}
const dealerFactory = DealerFactory(DealerA, {
username: "user",
password: "pass"
});
console.log(dealerFactory.title());
console.log(dealerFactory.pay(12));
const dealerFactory2 = DealerFactory(DealerB, {
username: "user2",
password: "pass2"
});
console.log(dealerFactory2.title());
console.log(dealerFactory2.pay(50));
6. 관찰자 패턴
관찰자 디자인 패턴은 객체가 다른 객체 집합과 동시에 통신하는 경우에 편리합니다. 이 관찰자 패턴에서는 상태 전반에 걸쳐 불필요한 이벤트 푸시 및 풀이 없으며, 관련된 모듈은 데이터의 현재 상태만 수정합니다.
예
function Observer() {
this.observerContainer = [];
}
Observer.prototype.subscribe = function (element) {
this.observerContainer.push(element);
}
// the following removes an element from the container
Observer.prototype.unsubscribe = function (element) {
const elementIndex = this.observerContainer.indexOf(element);
if (elementIndex > -1) {
this.observerContainer.splice(elementIndex, 1);
}
}
/**
* we notify elements added to the container by calling
* each subscribed components added to our container
*/
Observer.prototype.notifyAll = function (element) {
this.observerContainer.forEach(function (observerElement) {
observerElement(element);
});
}
7. 명령 패턴
마무리하자면, 명령 디자인 패턴이 JavaScript 디자인 패턴의 7가지 최고의 요약을 마무리한다고 말하고 싶습니다. 명령 디자인 패턴은 메서드 호출, 작업 또는 요청을 단일 개체로 캡슐화하여 재량에 따라 메서드 호출을 전달할 수 있습니다. 명령 디자인 패턴은 명령을 실행하는 모든 것에서 명령을 발행하고 대신 다른 개체에 책임을 위임할 수 있는 기회를 제공합니다. run()이러한 명령은 형식 으로 표시됩니다 execute().
(function(){
var carManager = {
//information requested
requestInfo: function( model, id ){
return "The information for " + model + " with ID " + id + " is foo bar";
},
// now purchase the car
buyVehicle: function( model, id ){
return "You have successfully purchased Item " + id + ", a " + model;
},
// now arrange a viewing
arrangeViewing: function( model, id ){
return "You have successfully booked a viewing of " + model + " ( " + id + " ) ";
}
};
})();
결론
JavaScript 개발자가 디자인 패턴을 사용하는 것은 유익합니다 . 디자인 패턴을 사용하면 프로젝트 유지 관리가 가능하고 개발 주기에서 불필요한 작업을 차단할 수 있다는 주요 이점이 있습니다. JavaScript 디자인 패턴이 복잡한 문제에 대한 솔루션을 제공할 수 있지만, 말할 필요도 없이 빠른 개발과 생산성을 제공할 수 있지만 이러한 디자인 패턴이 개발자를 대체할 수 있다고 결론을 내리는 것은 부적절합니다.
#javascript