★★★★✰
An overview of the
This is because each city has organizations that manage different parts of it: water systems, electricity systems, transportation, law enforcement, legislation, and so on. Some people are responsible for the big picture, some people are responsible for the details.
In most cases, we’ll use the scaffolding generation system developed by the big boys. Many system-level design approaches have been used, and this article can explain some of them.
First, separate the construction and use of the system
The best example for the front end is the separation of the development environment from the formal environment.
For example, the project we generated with vue-CLI scaffolding has develop and Production run models, which use different packaging processes. The DEV environment makes it easy for developers to debug code, while the PROD environment focuses on online efficiency, concurrency, and performance.
1.1 Use the Main entrance
The main function creates the objects the system needs and passes them to the application, which just uses them.
Take the vue-CLI generated project as an example, where the main.js code is as follows:
import { createApp } from 'vue'
import router from './router'
import store from './store'
import VMdEditor from '@kangc/v-md-editor'
import Antd from 'ant-design-vue'
const app = createApp(App)
app.use(store)
.use(router)
.use(Antd)
.use(VMdEditor)
.mount('#app')
Copy the code1.2 Factory Mode
A brief introduction to the factory pattern
A pattern in which factory methods are used instead of new operations.
Whether the simple factory pattern, the factory method pattern, or the abstract factory pattern, their ultimate goal is decoupling.
1.3 Dependency Injection
A powerful mechanism for separating build and use is Dependency Injection.
Inversion of Control is an idea, and dependency injection is the most typical implementation method.
Their ultimate goal is decoupling.
The story of Xiao Ming
Dependency injection front-end applications
Although dependency injection is a very basic and common tool in object-oriented languages, it is not as obvious in front end development, so let’s take a look at how it is used in Vue:
When we use “components” in components to declare dependent components, it is also a dependency injection. It might be said that the injection is an “implementation” rather than an “abstraction” of a concrete component. Component B depends on component A, but there is no new component A in component B, and there is no control over when A is created, when it is destroyed, and how it needs to be initialized, just to tell Vue the IoC container: Component B does not need to care about the specific process and implementation management of component A’s created Mounted destroyed. Therefore, this statement can be regarded as “abstraction” that depends on COMPONENT A. The “abstraction” here is not necessarily in the form of Java’s “Interface”.
The Inversion of Control (IoC) container is the super steward that manages how implementations are initialized, from birth to death. The Vue framework itself does this. When you register components in a Vue with vue.component, vue.use, when and where instances of that component are mounted, Both can be viewed as controlled by the Vue IoC container.
Vue’s parent components declare components directly as dependency injection, while the more obvious inject provide component directly inject dependencies to all descendant components. Similarly, inject/provide components to descendants, who do not care how the ancestor components are created and destroyed.
From: How to use dependency Injection in Javascript
Second, the capacity
Cities come from towns, and towns come from villages. At first, the roads were narrow and almost untrodden, then gradually widened. Small buildings and empty lots were gradually replaced by larger ones, and in some places skyscrapers eventually rose.
In the beginning, electricity, water, sewage, Internet and other services were all absent. As population and building density increased, these services began to appear.
The expansion has not been without pain. Think about how many times you’ve driven through a road improvement project and asked yourself, “Why didn’t they just build a wide enough road in the first place? !”
But that’s not going to happen anyway. Who can say that building a six-lane highway in a small town is not wasteful? Who would want such a road through their town?
“Getting the system right the first time” is a myth. Instead, we should just implement the user story today, refactor it, and then extend the system and implement new user stories tomorrow.
Is there no need to plan ahead at all?
Of course not.
Don’t make the system complex at first, but be prepared to make the system complex.
Aspect-oriented Programming (AOP)
Section-oriented programming allows you to separate concerns into individual cuts, or pointcuts. Using AOP, parts of business logic can be isolated, resulting in less coupling between parts of business logic.
For example, we can encapsulate the services that fetch background data so that we can quickly switch between Ajax or AXIOS as needed without affecting the overall system.
The various hook functions of the Vue and React frameworks we use also fall under the category of AOP.
Aop in the Vue framework
Vue-cli 4.0 is used as an example. The system separates vue.config.js(unified configurations such as packaging, proxy, and hot loading), router, HTTP request, VUex data management, and view.
Because of these isolation, we do not need to pay attention to whether the back-end interface is available, whether the page is refreshed or not, and how to jump to the page when we develop the page (after configuring the route once, we do not need to pay attention to it again).
Third, summary
The system should also be uncluttered, with all parts and facets clearly discernible.
In the early stages of system design, don’t forget to use the simplest possible solution to work.
This article is based on Code Cleanliness by Robert C. Martin, translated by Han Lei.
Zhejiang Dahua Technology Co., Ltd.- Soft research – Smart City Product R&D Department Recruiting senior front end, welcome to contact, interested can send resume to [email protected], long-term effective
Ten, class
12. Superposition