preface

The application of Design Pattern in VUE (1) The application of design pattern in VUE (2) the application of design pattern in VUE (3) the application of design pattern in VUE (4) The application of design pattern in VUE (5) the application of design pattern in VUE (6) The application of design pattern in VUE (7)

Why write these articles. Just as Design Pattern is a set of repeatedly used, known by most people, classified and summarized code Design experience (from Baidu Encyclopedia), I also want to discuss the charm of Design Pattern with everyone through sharing some accumulated work. The application scenarios introduced in this series of articles as an aid to illustration are real application scenarios in the workplace, of course, but common business scenarios are also covered by analogy

Recently, I need to maintain an old project, in which there is a requirement as follows: there is a page to render three forms according to the routing parameter type, and the three forms have the same input items and different input items, some of which will have a corresponding XStatus to determine whether they need to be displayed.

A, demand

The requirements are very simple, just like at the beginning of the article, the company project is not convenient to post temporarily, we had to force a scene to help understand.

Suppose: I now want to render the form for login, mobile registration, and email registration using a route identified by the parameter type; During login, if the account password is entered incorrectly for more than 3 times, the image verification code shall be entered and marked by codeStatus.

Second, the code

When we take on an old project and we run into problems we always complain about somebody else’s code, so let’s look at somebody else’s code

if
if

The older projects I worked on had much more complex requirements than this, and that’s how the internal implementation was done, with just around 500 lines of template. The key is that I failed the test. Because I am not familiar with the business logic of the file processing, the input that needs to be modified is judged by two different status in the two forms. And I only made one change

Ridicule who can, ridicule is finished to optimize this logic

Three, optimize one

Mindless operation:

Since we have three forms, we wrap three Form components, each responsible for its own rendering logic



Let’s see what happens —

Assuming that the project originally organized the code in this way, and I had to complete the requirement of changing the name of the input field, I might have changed only register-mobile and omitted register-email, and the final result failed to pass the test, there was a bug

To be honest, this is just 500+ lines of code divided into three files. As far as optimization is concerned, code beautification is not far off

Four, optimize two

Design mode comes into play, first look at the code directory structure:

File the Login. Vue

File RegisterMobile. Vue

File. / input/ImgCode. Vue

Optimization of a
type
status
Form uses input as a component, so any changes we make to the input are automatically updated to all referenced forms, and input display logic is controlled within the input component



Let’s see what happens —

Assuming the project is organized this way, I’m going to complete the requirement to change the name of the input field. Find the corresponding input component, regardless of the type and status logic, just change the field name. Since the two forms use the same input, there is no problem with register-mobile, so there is no problem with register-email. Even if you are not familiar with the business, there will not be the previous embarrassing situation — bug. Submit tests. I turned around and went downstairs for coffee.

The results seem to be amazing. I mentioned design patterns at the beginning of this section, so what design patterns are used. A bit of theory first:

Facade Pattern: Providing a consistent interface for a set of interfaces in a subsystem, the Facade pattern defines a high-level interface that makes the subsystem easier to use. After the appearance role is introduced, the user only needs to interact with the appearance role directly, and the complex relationship between the user and the subsystem is realized by the appearance role, thus reducing the coupling degree of the system

Login, RegisterMobile, and RegisterEmail define three facade roles, with each input component acting as a subsystem. Appearance roles only care about which subsystems are used, and the subsystem’s logic to status is handled within the subsystem, thus reducing the coupling of the system

Five, optimize three

We need three form components Login, RegisterMobile, RegisterEmail and so on. Can’t there be a component form.vue

type
status



Let’s see what happens —

The simplification of the three components into a single component is really an optimization at this point. However, there is a drawback. If the business logic is very complex and we follow this rule, we may register a lot of input components in the form component. If we want to know which input components will be used in mobile phone registration, we cannot tell from the form component alone. To get the results we want, and I have to say it’s a painful process.

Six, optimize four

The problem with optimization 3 is that a lot of useless inputs are instantiated for a given type, even though they have internal logic that they will not be displayed. If we want any component, just give us that component.

I want an iphoneX, can you make one? Big guy: Ok I want mete20, can big guy make one? Big guy: ok I want millet, big guy can build one? Good bosses:Copy the code

The big guy is so awesome. Who’s the big guy? A: Foxconn — the mobile phone factory

The factory pattern

First, create an input Factory specifically for generating an input:

Commissioning of factory production:

At the end,

To fulfill this small requirement at the beginning of this article, we used the appearance pattern, the factory pattern, from design patterns. Compared with the original implementation of the system, the optimized scheme has a higher degree of decoupling and better maintainability.

This implementation also applies to react. Why vue? The React JSX template can be a bit awkward to understand, while the React JSX template can be seen as writing JavaScript to implement more flexible concepts