JavaScript Design Pattern — five design principles


Design mode navigation

Benefits of design patterns

Reuse, readability and expansion

Five principles

Switching, interface isolation, Richter replacement, dependency inversion, single responsibility

Opening and closing principle (HOC)

Abbreviation: OCP

Requirements: for expansion development, close for modification

In order to welcome the new year’s day, the product wants to do some new tricks. Highlight module a in the app and discount module B

Then the code is as follows

JavaScript Design Pattern -- five design principles

Later, the company made a year-end summary and found that the C module was losing money all the time, so it planned to disable it: it was grayed out and the display stopped selling

Also very easy, as follows

JavaScript Design Pattern -- five design principles

So, in order to welcome the Spring Festival, do you have to deal with D in a special way? Yuanxiao treatment C, You have to say if Else, I respect you as a hero and offer you 666


The open / close principle requires that modifications be closed, which means that we cannot directly change the original logic. Can we classify these common operations? Whether it is graying, highlighting or default color, it is the control of color, so you can extract a SetColor method to do this specifically; The discount, sales suspension or displayed amount is a div text display, so you can use setsalary to do this

JavaScript Design Pattern -- five design principles

Thus, for a new mode, it is naturally equipped with these two methods, and can cover or add other new behaviors in itself

Single function

Abbreviation: SRP

Requirements: modules are isolated from each other, and functions do not affect each other

For example, we create a time related drop-down box. The drop-down box and time can be separated separately. We use moment to process time conversion

For example, for the examples listed in the opening and closing, if module D is not only highlighted but also discounted, SetColor and setsalary meet the single responsibility. Or maybe

JavaScript Design Pattern -- five design principles

Dependency inversion (vue.use)

Abbreviation: dip

Requirement: the upper layer should not rely on the lower layer implementation

Suppose we want to implement a sharing function, we can write this

JavaScript Design Pattern -- five design principles

There is nothing wrong with this. It is a “single responsibility” to separate the share function. By rewriting sharetowx in the mode, it also realizes “opening and closing”

Later, the product suddenly found that online shopping is popular at present, and netizens habitually look at and evaluate the dishes. It seems that there is no egg to share, so Add a comment?

Well, I didn’t write the evaluation. I’ll adjust it. I’ll finish it in that second

JavaScript Design Pattern -- five design principles

However, I have a headache at this time. It’s not that there are many bugs, but that I find it can be optimized: would it be better to give a discount directly for new user registration?, If the product thinks the same way, don’t I have to change it again? Wtmd

I seem to rely on the lower class

It would be great if we could provide a plug-in mechanism like Vue. No matter how many plug-ins are passed to Vue, they can be received and provided to the page call at an appropriate time, instead of keeping an implementation in Vue

JavaScript Design Pattern -- five design principles

Interface isolation

Abbreviation: ISP

Component libraries such as elementui and antd provide on-demand loading capability. In a sense, this is interface isolation becauseUnwanted featuresWeNonecessaryRun it all

Richter substitution

Abbreviation: LSP

Requirements: subclasses can inherit and expand the parent class, but cannot destroy the execution process of the parent class. Where subclasses can appear, the parent class can also

The parent class is like an outline. It implements an API implementation process. Subclasses can be used directly or overridden, but the overall process cannot be destroyed. As follows, only FP is compliant

JavaScript Design Pattern -- five design principles

Recommended Today

Modul of fastems

Each module of fastems is implemented from the abstract class Fastems.Mms.Client.Infrastructure.UiModuleBase; public class DataManagerModule : UiModuleBase { public override void Initialize() { AddResourceDictionary(“/Resources/DataManagerResources.xaml”, typeof(DataManagerModule)); RegisterViewWithRegion(“DialogRegion”, typeof(DialogView)); RegisterViewWithRegion(“BusyIndicatorRegion”, typeof(BusyIndicatorView)); } } And Fastems.Mms.Client.Infrastructure.UiModuleBase inherits from Fastems.Mms.Client.Infrastructure.ModuleBase public abstract class UiModuleBase : ModuleBase { [Import] public IRegionManager RegionManager { get; set; } [Import] public IMergedDictionaryRegistry MergedDictionaryRegistry { […]