이 글에서는 5가지 TypeScript 디자인 패턴을 소개합니다. 도움이 필요한 친구들이 모두 참고할 수 있기를 바랍니다.
디자인 패턴은 개발자가 문제를 해결하는 데 도움이 되는 템플릿입니다. 이 책에서는 매우 많은 패턴을 다루며, 다양한 요구 사항을 대상으로 하는 경우가 많습니다. 그러나 세 가지 그룹으로 나눌 수 있습니다.
-
구조 패턴 다양한 구성 요소(또는 클래스) 간의 관계를 처리하고 새로운 구조를 형성하여 새로운 기능을 제공합니다. 구조적 패턴의 예로는
Composite
,Adapter
및Decorator
가 있습니다. -
行为模式将组件之间的公共行为抽象成一个独立的实体。行为模式的例子有命令、策略和我个人最喜欢的一个:
观察者模式
。 - 创建模式 专注于类的实例化,让我们更容易创建新的实体。我说的是工厂方法,单例和抽象工厂。
Composite
、Adapter
和Decorator
。单例模式
单例模式可能是最著名的设计模式之一。它是一种创建模式,因为它确保无论我们尝试实例化一个类多少次,我们都只有一个可用的实例。
处理数据库连接之类的可以单例模式,因为我们希望一次只处理一个,而不必在每个用户请求时重新连接。
class MyDBConn { protected static instance: MyDBConn | null = null private id:number = 0 constructor() { this.id = Math.random() } public getID():number { return this.id } public static getInstance():MyDBConn { if (!MyDBConn.instance) { MyDBConn.instance = new MyDBConn() } return MyDBConn.instance } } const connections = [ MyDBConn.getInstance(), MyDBConn.getInstance(), MyDBConn.getInstance(), MyDBConn.getInstance(), MyDBConn.getInstance() ] connections.forEach( c => { console.log(c.getID()) })
现在,虽然不能直接实例化类,但是使用getInstance
方法,可以确保不会有多个实例。在上面的示例中,可以看到包装数据库连接的伪类如何从该模式中获益。
这个事例展示了无论我们调用getInstance
方法多少次,这个连接总是相同的。
上面的运行结果:
0.4047087250990713 0.4047087250990713 0.4047087250990713 0.4047087250990713 0.4047087250990713
工厂模式
工厂模式
是一种创建模式,就像单例模式
一样。但是,这个模式并不直接在我们关心的对象上工作,而是只负责管理它的创建。
解释一下:假设我们通过编写代码来模拟移动车辆,车有很多类型,例如汽车、自行车和飞机,移动代码应该封装在每个vehicle
类中,但是调用它们的move
方法的代码可以是通用的。
这里的问题是如何处理对象创建?可以有一个具有3个方法的单一creator
类,或者一个接收参数的方法。在任何一种情况下,扩展该逻辑以支持创建更多vehices
都需要不断增长相同的类。
但是,如果决定使用工厂方法模式,则可以执行以下操作:
现在,创建新对象所需的代码被封装到一个新类中,每个类对应一个车辆类型。这确保了如果将来需要添加车辆,只需要添加一个新类,而不需要修改任何已经存在的东西。
接着来看看,我们如何使用TypeScript
来实现这一点:
interface Vehicle { move(): void } class Car implements Vehicle { public move(): void { console.log("Moving the car!") } } class Bicycle implements Vehicle { public move(): void { console.log("Moving the bicycle!") } } class Plane implements Vehicle { public move(): void { console.log("Flying the plane!") } } // VehicleHandler 是“抽象的”,因为没有人会实例化它instantiate it // 我们要扩展它并实现抽象方法 abstract class VehicleHandler { // 这是真正的处理程序需要实现的方法 public abstract createVehicle(): Vehicle public moveVehicle(): void { const myVehicle = this.createVehicle() myVehicle.move() } } class PlaneHandler extends VehicleHandler{ public createVehicle(): Vehicle { return new Plane() } } class CarHandler extends VehicleHandler{ public createVehicle(): Vehicle { return new Car() } } class BicycleHandler extends VehicleHandler{ public createVehicle(): Vehicle { return new Bicycle() } } /// User code... const planes = new PlaneHandler() const cars = new CarHandler() planes.moveVehicle() cars.moveVehicle()
上面的代码很多,但我们可以使用上面的图表来理解它。本质上最后,我们关心的是自定义处理程序,这里称它为处理程序,而不是创造者,因为他们不只是创建的对象,他们也有逻辑,使用它们(moveVehicle方法)。
这个模式的美妙之处在于,如果您你要添加一个新的vehicle
类型,所要做的就是添加它的vehicle
类和它的处理程序类,而不增加任何其他类的LOC。
观察者模式
在所有的模式,我最喜欢的是观察者模式
,因为类型的行为我们可以实现它。
它是如何工作的呢?本质上,该模式表明你拥有一组观察者对象,这些对象将对被观察实体状态的变化做出反应。为了实现这一点,一旦在被观察端接收到一个更改,它就负责通过调用它的一个方法来通知它的观察者。
在实践中,此模式的实现相对简单,让我们快速查看一下代码,然后回顾一下
type InternalState = { event: String } abstract class Observer { abstract update(state:InternalState): void } abstract class Observable { protected observers: Observer[] = [] protected state:InternalState = { event: ""} public addObserver(o: Observer):void { this.observers.push(o) } protected notify () { this.observers.forEach(o => o.update(this.state)) } } class ConsoleLogger extends Observer { public update(newState: InternalState) { console.log("New internal state update: ", newState) } } class InputElement extends Observable { public click():void { this.state = { event: "click" } this.notify() } } const input = new InputElement() input.addObserver(new ConsoleLogger()) input.click()
正如你所看到的,通过两个抽象类,我们可以定义Observer
,该观察者将表示对Observable
实体上的更改做出反应的对象。 在上面的示例中,我们假设具有一个被单击的InputElement
实体(类似于在前端具有HTML输入字段的方式),以及一个ConsoleLogger
,用于记录控制台发生的所有事情。
这种模式的优点在于,它使我们能够了解Observable
관찰자 패턴
이 있습니다. 🎜생성 모드는 클래스 인스턴스화에 중점을 두므로 새 엔터티를 더 쉽게 만들 수 있습니다. 저는 팩토리 메소드, 싱글톤, 추상 팩토리에 대해 이야기하고 있습니다. 🎜싱글턴 패턴🎜
🎜싱글턴 패턴은 아마도 가장 유명한 디자인 패턴 중 하나일 것입니다. 클래스를 몇 번이나 인스턴스화하려고 시도하더라도 하나의 인스턴스만 사용할 수 있도록 하기 때문에 이는 생성 패턴입니다. 🎜🎜모든 사용자 요청에 대해 다시 연결할 필요 없이 한 번에 하나씩만 처리하기를 원하기 때문에 데이터베이스 연결과 같은 작업을 싱글톤 모드에서 처리할 수 있습니다. 🎜abstract class Animal { abstract move(): void } abstract class SuperDecorator extends Animal { protected comp: Animal constructor(decoratedAnimal: Animal) { super() this.comp = decoratedAnimal } abstract move(): void } class Dog extends Animal { public move():void { console.log("Moving the dog...") } } class SuperAnimal extends SuperDecorator { public move():void { console.log("Starts flying...") this.comp.move() console.log("Landing...") } } class SwimmingAnimal extends SuperDecorator { public move():void { console.log("Jumps into the water...") this.comp.move() } } const dog = new Dog() console.log("--- Non-decorated attempt: ") dog.move() console.log("--- Flying decorator --- ") const superDog = new SuperAnimal(dog) superDog.move() console.log("--- Now let's go swimming --- ") const swimmingDog = new SwimmingAnimal(dog) swimmingDog.move()🎜이제 클래스를 직접 인스턴스화할 수는 없지만
getInstance
메서드를 사용하면 여러 인스턴스가 발생하지 않도록 할 수 있습니다. 위의 예에서는 데이터베이스 연결을 래핑하는 의사 클래스가 이 패턴의 이점을 어떻게 활용하는지 확인할 수 있습니다. 🎜🎜이 예는 getInstance
메소드를 몇 번 호출하더라도 연결이 항상 동일하다는 것을 보여줍니다. 🎜🎜위 실행 결과: 🎜const superSwimmingDog = new SwimmingAnimal(superDog) superSwimmingDog.move()
🎜Factory 패턴🎜
🎜Factory 패턴
은 Singleton 패턴
과 마찬가지로 생성 패턴입니다. 그러나 이 패턴은 우리가 관심 있는 객체에 직접적으로 작동하지 않고 객체 생성만 관리합니다. 🎜🎜설명: 자동차, 자전거, 비행기 등 다양한 유형의 차량을 시뮬레이션하는 코드를 작성한다고 가정해 보겠습니다. 움직이는 코드는 각 vehicle
클래스에 캡슐화되어야 합니다. code>calling code>move 메소드의 코드는 일반적일 수 있습니다. 🎜🎜 여기서 질문은 객체 생성을 처리하는 방법입니다. 3개의 메서드가 있는 단일 creator
클래스가 있을 수도 있고 매개변수를 사용하는 하나의 메서드가 있을 수도 있습니다. 두 경우 모두 더 많은 차량
생성을 지원하도록 논리를 확장하려면 동일한 클래스를 키워야 합니다. 🎜🎜그러나 팩토리 메소드 패턴을 사용하기로 결정한 경우 다음을 수행할 수 있습니다. 🎜🎜TypeScript
를 사용하여 이를 달성하는 방법을 살펴보겠습니다. 🎜interface IProduct { getName(): string getPrice(): number } class Product implements IProduct { private price:number private name:string constructor(name:string, price:number) { this.name = name this.price = price } public getPrice():number { return this.price } public getName(): string { return this.name } } class Box implements IProduct { private products: IProduct[] = [] contructor() { this.products = [] } public getName(): string { return "A box with " + this.products.length + " products" } add(p: IProduct):void { console.log("Adding a ", p.getName(), "to the box") this.products.push(p) } getPrice(): number { return this.products.reduce( (curr: number, b: IProduct) => (curr + b.getPrice()), 0) } } //Using the code... const box1 = new Box() box1.add(new Product("Bubble gum", 0.5)) box1.add(new Product("Samsung Note 20", 1005)) const box2 = new Box() box2.add( new Product("Samsung TV 20in", 300)) box2.add( new Product("Samsung TV 50in", 800)) box1.add(box2) console.log("Total price: ", box1.getPrice())🎜위 내용은 많은 코드이지만 위 다이어그램을 사용하면 이해할 수 있습니다. 본질적으로 우리가 관심을 갖는 것은 사용자 정의 핸들러입니다. 여기서는 이를 생성자라기보다는 핸들러라고 부릅니다. 왜냐하면 객체를 생성할 뿐만 아니라 객체를 사용하기 위한 로직(moveVehicle 메소드)도 가지고 있기 때문입니다. 🎜🎜이 패턴의 장점은 새로운
vehicle
유형을 추가하려는 경우 vehicle
클래스와 핸들러 클래스를 추가하지 않고 추가하기만 하면 된다는 것입니다. 다른 클래스의 LOC. 🎜🎜Observer Pattern🎜
🎜모든 패턴 중에서 제가 가장 좋아하는 것은Observer Pattern
입니다. 구현 가능한 형식화된 동작 때문입니다. 🎜🎜어떻게 작동하나요? 기본적으로 패턴에는 관찰된 엔터티의 상태 변화에 반응하는 관찰자 개체 집합이 있다고 나와 있습니다. 이를 달성하기 위해 관찰된 측에서 변경 사항이 수신되면 메서드 중 하나를 호출하여 관찰자에게 알리는 역할을 담당합니다. 🎜🎜실제로 이 패턴의 구현은 상대적으로 간단합니다. 코드를 간단히 살펴보고 검토해 보겠습니다. 🎜Adding a Bubble gum to the box Adding a Samsung Note 20 to the box Adding a Samsung TV 20in to the box Adding a Samsung TV 50in to the box Adding a A box with 2 products to the box Total price: 2105.5🎜보시다시피 두 개의 추상 클래스를 사용하여
Observer
를 정의할 수 있습니다. 관찰자는 Observable
엔터티의 변경 사항에 반응하는 개체를 나타냅니다. 위의 예에서는 클릭되는 InputElement
엔터티(프런트 엔드에 HTML 입력 필드가 있는 방식과 유사)와 로그를 기록하는 ConsoleLogger
가 있다고 가정합니다. 콘솔에서 일어나는 모든 일. 🎜🎜이 패턴의 장점은 내부 코드를 망칠 필요 없이 Observable
의 내부 상태를 이해하고 반응할 수 있다는 것입니다. 다른 작업을 수행하는 관찰자를 계속 추가할 수 있으며, 특정 이벤트에 반응하는 관찰자도 추가할 수 있으며 각 알림에 대해 수행할 작업을 코드에서 결정하도록 할 수 있습니다. 🎜装饰模式
装饰模式试图在运行时向现有对象添加行为。 从某种意义上说,我们可以将其视为动态继承,因为即使没有创建新类来添加行为,我们也正在创建具有扩展功能的新对象。
这样考虑:假设我们拥有一个带有move
方法的Dog
类,现在您想扩展其行为,因为我们想要一只超级狗和一只可以游泳的狗。
通常,我们需要在 Dog 类中添加move
行为,然后以两种方式扩展该类,即SuperDog
和SwimmingDog
类。 但是,如果我们想将两者混合在一起,则必须再次创建一个新类来扩展它们的行为,但是,有更好的方法。
组合让我们可以将自定义行为封装在不同的类中,然后使用该模式通过将原始对象传递给它们的构造函数来创建这些类的新实例。 让我们看一下代码:
abstract class Animal { abstract move(): void } abstract class SuperDecorator extends Animal { protected comp: Animal constructor(decoratedAnimal: Animal) { super() this.comp = decoratedAnimal } abstract move(): void } class Dog extends Animal { public move():void { console.log("Moving the dog...") } } class SuperAnimal extends SuperDecorator { public move():void { console.log("Starts flying...") this.comp.move() console.log("Landing...") } } class SwimmingAnimal extends SuperDecorator { public move():void { console.log("Jumps into the water...") this.comp.move() } } const dog = new Dog() console.log("--- Non-decorated attempt: ") dog.move() console.log("--- Flying decorator --- ") const superDog = new SuperAnimal(dog) superDog.move() console.log("--- Now let's go swimming --- ") const swimmingDog = new SwimmingAnimal(dog) swimmingDog.move()
注意几个细节:
- 实际上,
SuperDecorator
类扩展了Animal
类,与Dog
类扩展了相同的类。 这是因为装饰器需要提供与其尝试装饰的类相同的公共接口。 -
SuperDecorator
类是abstract
,这意味着并没有使用它,只是使用它来定义构造函数,该构造函数会将原始对象的副本保留在受保护的属性中。 公共接口的覆盖是在自定义装饰器内部完成的。 -
SuperAnimal
和SwimmingAnimal
是实际的装饰器,它们是添加额外行为的装饰器。
进行此设置的好处是,由于所有装饰器也间接扩展了Animal
类,因此如果你要将两种行为混合在一起,则可以执行以下操作:
const superSwimmingDog = new SwimmingAnimal(superDog) superSwimmingDog.move()
Composite(组合)
关于Composite模式,其实就是组合模式,又叫部分整体模式,这个模式在我们的生活中也经常使用。
比如编写过前端的页面,肯定使用过<p></p>
等标签定义一些格式,然后格式之间互相组合,通过一种递归的方式组织成相应的结构,这种方式其实就是组合,将部分的组件镶嵌到整体之中。
关于此模式的有趣之处在于,它不是一个简单的对象组,它可以包含实体或实体组,每个组可以同时包含更多组,这就是我们所说的树。
看一个例子:
interface IProduct { getName(): string getPrice(): number } class Product implements IProduct { private price:number private name:string constructor(name:string, price:number) { this.name = name this.price = price } public getPrice():number { return this.price } public getName(): string { return this.name } } class Box implements IProduct { private products: IProduct[] = [] contructor() { this.products = [] } public getName(): string { return "A box with " + this.products.length + " products" } add(p: IProduct):void { console.log("Adding a ", p.getName(), "to the box") this.products.push(p) } getPrice(): number { return this.products.reduce( (curr: number, b: IProduct) => (curr + b.getPrice()), 0) } } //Using the code... const box1 = new Box() box1.add(new Product("Bubble gum", 0.5)) box1.add(new Product("Samsung Note 20", 1005)) const box2 = new Box() box2.add( new Product("Samsung TV 20in", 300)) box2.add( new Product("Samsung TV 50in", 800)) box1.add(box2) console.log("Total price: ", box1.getPrice())
在上面的示例中,我们可以将product
放入Box
中,也可以将Box
放入其他Box
中,这是组合的经典示例。因为我们要实现的是获得完整的交付价格,因此需要在大box
里添加每个元素的价格(包括每个小box
的价格)。
上面运行的结果:
Adding a Bubble gum to the box Adding a Samsung Note 20 to the box Adding a Samsung TV 20in to the box Adding a Samsung TV 50in to the box Adding a A box with 2 products to the box Total price: 2105.5
因此,在处理遵循同一接口的多个对象时,请考虑使用此模式。 通过将复杂性隐藏在单个实体(组合本身)中,您会发现它有助于简化与小组的互动方式。
今天的分享就到这里了,感谢大家的观看,我们下期再见。
原文地址:https://blog.bitsrc.io/design-patterns-in-typescript-e9f84de40449
作者:Fernando Doglio
译文地址:https://segmentfault.com/a/1190000025184682
更多编程相关知识,请访问:编程课程!!
위 내용은 알아야 할 5가지 TypeScript 디자인 패턴의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

웹 개발에서 JavaScript의 주요 용도에는 클라이언트 상호 작용, 양식 검증 및 비동기 통신이 포함됩니다. 1) DOM 운영을 통한 동적 컨텐츠 업데이트 및 사용자 상호 작용; 2) 사용자가 사용자 경험을 향상시키기 위해 데이터를 제출하기 전에 클라이언트 확인이 수행됩니다. 3) 서버와의 진실한 통신은 Ajax 기술을 통해 달성됩니다.

보다 효율적인 코드를 작성하고 성능 병목 현상 및 최적화 전략을 이해하는 데 도움이되기 때문에 JavaScript 엔진이 내부적으로 작동하는 방식을 이해하는 것은 개발자에게 중요합니다. 1) 엔진의 워크 플로에는 구문 분석, 컴파일 및 실행; 2) 실행 프로세스 중에 엔진은 인라인 캐시 및 숨겨진 클래스와 같은 동적 최적화를 수행합니다. 3) 모범 사례에는 글로벌 변수를 피하고 루프 최적화, Const 및 Lets 사용 및 과도한 폐쇄 사용을 피하는 것이 포함됩니다.

Python은 부드러운 학습 곡선과 간결한 구문으로 초보자에게 더 적합합니다. JavaScript는 가파른 학습 곡선과 유연한 구문으로 프론트 엔드 개발에 적합합니다. 1. Python Syntax는 직관적이며 데이터 과학 및 백엔드 개발에 적합합니다. 2. JavaScript는 유연하며 프론트 엔드 및 서버 측 프로그래밍에서 널리 사용됩니다.

Python과 JavaScript는 커뮤니티, 라이브러리 및 리소스 측면에서 고유 한 장점과 단점이 있습니다. 1) Python 커뮤니티는 친절하고 초보자에게 적합하지만 프론트 엔드 개발 리소스는 JavaScript만큼 풍부하지 않습니다. 2) Python은 데이터 과학 및 기계 학습 라이브러리에서 강력하며 JavaScript는 프론트 엔드 개발 라이브러리 및 프레임 워크에서 더 좋습니다. 3) 둘 다 풍부한 학습 리소스를 가지고 있지만 Python은 공식 문서로 시작하는 데 적합하지만 JavaScript는 MDNWebDocs에서 더 좋습니다. 선택은 프로젝트 요구와 개인적인 이익을 기반으로해야합니다.

C/C에서 JavaScript로 전환하려면 동적 타이핑, 쓰레기 수집 및 비동기 프로그래밍으로 적응해야합니다. 1) C/C는 수동 메모리 관리가 필요한 정적으로 입력 한 언어이며 JavaScript는 동적으로 입력하고 쓰레기 수집이 자동으로 처리됩니다. 2) C/C를 기계 코드로 컴파일 해야하는 반면 JavaScript는 해석 된 언어입니다. 3) JavaScript는 폐쇄, 프로토 타입 체인 및 약속과 같은 개념을 소개하여 유연성과 비동기 프로그래밍 기능을 향상시킵니다.

각각의 엔진의 구현 원리 및 최적화 전략이 다르기 때문에 JavaScript 엔진은 JavaScript 코드를 구문 분석하고 실행할 때 다른 영향을 미칩니다. 1. 어휘 분석 : 소스 코드를 어휘 단위로 변환합니다. 2. 문법 분석 : 추상 구문 트리를 생성합니다. 3. 최적화 및 컴파일 : JIT 컴파일러를 통해 기계 코드를 생성합니다. 4. 실행 : 기계 코드를 실행하십시오. V8 엔진은 즉각적인 컴파일 및 숨겨진 클래스를 통해 최적화하여 Spidermonkey는 유형 추론 시스템을 사용하여 동일한 코드에서 성능이 다른 성능을 제공합니다.

실제 세계에서 JavaScript의 응용 프로그램에는 서버 측 프로그래밍, 모바일 애플리케이션 개발 및 사물 인터넷 제어가 포함됩니다. 1. 서버 측 프로그래밍은 Node.js를 통해 실현되며 동시 요청 처리에 적합합니다. 2. 모바일 애플리케이션 개발은 재교육을 통해 수행되며 크로스 플랫폼 배포를 지원합니다. 3. Johnny-Five 라이브러리를 통한 IoT 장치 제어에 사용되며 하드웨어 상호 작용에 적합합니다.

일상적인 기술 도구를 사용하여 기능적 다중 테넌트 SaaS 응용 프로그램 (Edtech 앱)을 구축했으며 동일한 작업을 수행 할 수 있습니다. 먼저, 다중 테넌트 SaaS 응용 프로그램은 무엇입니까? 멀티 테넌트 SAAS 응용 프로그램은 노래에서 여러 고객에게 서비스를 제공 할 수 있습니다.


핫 AI 도구

Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool
무료로 이미지를 벗다

Clothoff.io
AI 옷 제거제

AI Hentai Generator
AI Hentai를 무료로 생성하십시오.

인기 기사

뜨거운 도구

WebStorm Mac 버전
유용한 JavaScript 개발 도구

드림위버 CS6
시각적 웹 개발 도구

Atom Editor Mac 버전 다운로드
가장 인기 있는 오픈 소스 편집기

DVWA
DVWA(Damn Vulnerable Web App)는 매우 취약한 PHP/MySQL 웹 애플리케이션입니다. 주요 목표는 보안 전문가가 법적 환경에서 자신의 기술과 도구를 테스트하고, 웹 개발자가 웹 응용 프로그램 보안 프로세스를 더 잘 이해할 수 있도록 돕고, 교사/학생이 교실 환경 웹 응용 프로그램에서 가르치고 배울 수 있도록 돕는 것입니다. 보안. DVWA의 목표는 다양한 난이도의 간단하고 간단한 인터페이스를 통해 가장 일반적인 웹 취약점 중 일부를 연습하는 것입니다. 이 소프트웨어는

안전한 시험 브라우저
안전한 시험 브라우저는 온라인 시험을 안전하게 치르기 위한 보안 브라우저 환경입니다. 이 소프트웨어는 모든 컴퓨터를 안전한 워크스테이션으로 바꿔줍니다. 이는 모든 유틸리티에 대한 액세스를 제어하고 학생들이 승인되지 않은 리소스를 사용하는 것을 방지합니다.
