Today we will learn about the design pattern commonly used in JavaScript-- singleton pattern definition ensures that there is only one instance of a class and provides a global access point to it means that it is unique and can be accessed globally singletons correspond to multiple cases. Generally, we create a class that can instantiate many objects, which is multiple cases, while singleton patterns can instantiate only one object. This instance object can be cached and reused. Application scenario when you encounter something in development, it feels like it has been reused many times. If you can cache this object and use this instance object each time, instead of recreating one object, you can use singleton mode here. for example, in front-end page development, our login pop-up window is generally unique, no matter how many clicks, only one login pop-up window will be created. And the pop-up window should be cached, where the rendering efficiency of the page can be improved, so the login pop-up window can be created in singleton mode. before use We are going to create a login pop-up window // Business logic: create a login pop-up window function createLoginLayer(){ // create a login pop-up box const div = document.createElement("div"); div.innerHTML = Login pop-up window; // set the pop-up window style to invisible div.style.display = "none"; // add a box to the page document.body.appendChild(div); // return to this login pop-up box return div; }; then bind the click event to the login button, click on it, create a pop-up window, and display it on the page.…

Today, let's start to learn the common design patterns of JavaScript. In fact, design patterns, like algorithms, are universal and empirical ideas that deviate from the language. Front-end programmers are also software engineers, who need a solid professional foundation, and design pattern is also one of the important professional foundations of computer. what is a design pattern Design patterns are concise and elegant solutions to specific problems in the process of software design when developing business code, you are faced with a variety of different needs, and different situations will sum up different solutions. We can sum up these experiences , and make rational use of to different problems, so that we can use common solutions to solve problems . To keep it simple, design patterns can be understood as tricks and tricks when writing code. Design patterns have SOLID five design principles single function principle ( S ingle Responsibility Principle): a program only does one thing well Open and closed principle ( O pened Closed Principle): open to expansion, closed to modification Internal substitution principle ( L iskov Substitution Principle): subclasses can override the parent class and appear where the parent class appears Interface isolation principle ( I nterface Segregation Principle): keep the interface single and independent dependency inversion principle ( D ependency Inversion Principle): use methods to focus only on interfaces and not on the implementation of specific classes Front-end development uses JavaScript. We should focus on the first two principles, namely, single function principle and Open and closed principle Why do you need a design pattern Why…

on March 17, one year after the launch of the Beta version of the new React document, React finally officially released the new React official document! The new document enables a new domain name: react.dev/ . However, at present, the new document has only been released in English at present When accessing Beta documents ( beta.reactjs.org/ ) and English documents ( reactjs.org/ ) Will be redirected to the new domain name ( react.dev/ ). The new document does not currently provide access to documents in other languages. to access the old Chinese version of the document, you can visit zh-hans.reactjs.org/ . to access the old English version, you can visit legacy.reactjs.org/ . the new document mainly contains the following sections: tutorials and guides : a large number of tutorials and guides are available to help developers learn React from scratch or delve into specific topics. Code samples and demos : provides a series of code examples and demos that demonstrate the power and flexibility of React. Best practices and techniques : learn the latest React best practices and techniques and learn how to optimize your code for better performance. Community Forum : contact other React developers to get help on the project or share expertise in the community. News and updates : get the latest versions, updates, and news from the React development team for the first time. Let's take a look at the features of the new React document! full hug Hooks when Hooks was released in 2018, the Hooks document assumed that the reader was already familiar with…