First, what is the design pattern?
A design pattern is a set of repeatedly used, widely known, catalogued code design lessons.
Why use design patterns? Design patterns reuse code, make it easier for others to understand, and ensure code reliability. Design patterns make code authoring truly engineering.
Where do design patterns come from? The concept of design patterns was developed by the Gang of Four (the authors of Design Patterns (The Foundation of Reusable Object-oriented Software)) and is divided into three types and 23 patterns.
Second, Javascript design pattern system explanation and application
Finally, a design patterns course for the front end! The process from “writing good code” to “designing code” is not only the improvement of technology, but also the improvement of programming thinking, among which the most critical is the design pattern, whether to understand and master the design pattern is also one of the standards to measure the ability of programmers.
As far as JS design mode course is concerned, this is almost the unique system video course in the whole network. 1, with JS code to explain the design pattern, look for design pattern information, most are Java, on JS you can hardly find such a unified comprehensive. 2, Knowledge coverage + interview questions analysis, covering all the models, especially the front-end common model, and take you to analyze the classic object-oriented interview questions of well-known companies. 3, combined with daily work use scenarios, teach you how to apply design ability to work, design and write more reasonable and extensible code, really improve the design ability. 4, knowledge + case combat knowledge at the same time supporting a comprehensive combat case, let you see through the specific application of the design pattern.
Chapter 1 introduces the necessity of learning design mode, knowledge points included in the course, course arrangement and learning prerequisites.
Chapter 2 introduces object-oriented concepts in javascript, including ES6 Class syntax, UML class diagrams, and object-oriented elements.
Chapter 3 Design Principles Design principles are the basis for understanding design patterns, the transition from design to pattern. This chapter introduces what design is, the five Principles of design, plus two real-world interview questions about object-oriented and design principles.
Chapter 4 Factory Model Factory model is the most commonly used instantiation object model. In this chapter, we introduce the basic concepts of factory model, take fast-food burger as a living example, explain and draw the UML class diagram, and finally list the common usage scenarios in JS, such as $, React.createElement in jquery. Vue asynchronous components, etc.
Chapter 5 Singleton Pattern The singleton pattern contains only one special class called a singleton in its core structure. Concepts, UML class diagrams are still required, and this chapter uses a scenario where there is only one $in jquery, redux and Vuex store, and only one set of logon logic in a system.
Chapter 6 adaptor Patterns ADAPTS the interface of a class to what the user expects, which is called an adapter. Replacing jquery’s $. Ajax in the old project, and using the computer property computed in vUE, can be seen as adapter patterns.
Chapter 7 Decorator Pattern The decorator pattern is a structural pattern that acts as a wrapper around existing classes, allowing you to add new functionality to an existing object without changing its structure. This chapter also introduces concepts, UML. Rich/useful scenario examples are also used, including ES7 decorators, core-decorators modules, and so on.
Chapter 8 proxy Patterns provide a proxy for other objects to control access to that object. The network agent, star/agent scenario is just right.
Chapter 9 Appearance Patterns This chapter explains appearance patterns, concepts, and examples.
The Observer pattern is the most common and important design pattern on the front end. If you had to master only one design pattern, it would be the Observer pattern!! Starbucks coffee ordering is a close life scene, and custom events in jquery and NodeJs are classic uses.
In Chapter 11, the iterator pattern is used for sequential access to the elements of a collection object, yes, loops. The self-wrapping, general-purpose loop method is a classic implementation of the iterator pattern.
Chapter 12. State Patterns For complex state management, if you only use if… Else, scalability is very poor. State pattern presents a design idea with good scalability to deal with complex state changes. Finite state machine, self Promise and other scenarios explained, classic and in-depth.
Chapter 13 Other Design Patterns This chapter covers some design patterns that are not used very often in JS. Although not commonly used, it is important to understand its concept and meaning.
Chapter 14 Comprehensive Application Design patterns are easy to learn but not easy to use. The hardest part is not knowing what patterns to use in what scenarios. This chapter uses a simple shopping cart synthesis example to demonstrate how several common design patterns can be put to use, including project analysis, design, coding, and design pattern parsing. Chapter 15 Course Summary: Review the course and summarize the course content. Get the Javascript Design Pattern system project video tutorial at home Micro X: Bright1688
Create a type:
Abstract Factory model 2. Builder model 3. Factory Method (Prototype) 5. SingletonCopy the codeStructured:
Adapter mode 2. Bridge mode 3. Compositor 4. Decorator 5. Facade 6. Flyweight 7. Proxy modeCopy the codeBehavior:
1. Chain of Responsibility 2. Command mode 3. Interpreter mode 4. Iterator 5. Mediator 6. Memento mode 7. Observer mode 8. State Mode 9. Strategy mode 10. Template Method 11. Visitor ModelCopy the codeWe may not use these patterns in development, nor do we need to master so many patterns, but understanding and mastering these patterns is a necessary step for every developer to improve themselves. Get a shared JavaScript video tutorial that explains the actual project in detail.