Front-end design pattern concepts
What are design patterns
Solution models for common problems in software design
- Summary of historical experience
- Language-agnostic
design pattern background
Design pattern classification
23 design patterns
- Creation type - how to create an object
- Structural type - how to flexibly assemble objects into larger structures
- Behavioral - responsible for efficient communication and division of responsibilities between objects
Design patterns in browsers
Singleton pattern
definition
Globally unique access object
Application scenarios
Caching, global state management, etc.
Implement request cache demo
publish-subscribe model
definition
A subscription mechanism that notifies subscribers when the subscribed object changes.
Application scenarios
From the decoupling between system architectures to some implementation patterns in business, such as email subscription, online subscription, etc., they are widely used.
Implement user online subscription
Design Patterns in JavaScript
Prototype pattern
definition
Copy existing objects to create new objects
Application scenarios
Basic patterns of object creation in JS
Create users in online subscriptions
code pattern
definition
The access method to the original object can be customized and controlled, and some additional processing can be done before and after the update.
Application scenarios
Monitoring, proxy tools, front-end framework implementation, etc.
Implement user status subscription
iterative mode
definition
Access data in a collection without exposing the data type
Application scenarios
There are multiple data types in the data structure, such as lists, trees, etc., which provide common operation interfaces.
Use for of to iterate over all components
Design patterns in front-end
Vue component implements counter
Proxy for DOM operations in front-end framework
Hooks before and after Dom update
Combination mode
definition
Can be used in combination with multiple objects, or a single object can be used independently
Application scenarios
DOM, front-end components, file directories, departments
Summarize
Design patterns are not a silver bullet
- It is relatively easy to summarize abstract patterns, but it is very difficult to apply abstract patterns to scenes.
- More possibilities brought by the multiple programming paradigms of modern programming languages
- Really excellent open source projects learn design patterns and continue to practice them