Today we will learn the design pattern commonly used in JavaScript-- proxy pattern In real life, an agent generally means that handles transactions on behalf of the authorized party . In law, it refers to the expression of intention of the agent, the authorized party, to act legally with a third party in his own name. A legal act committed as a result of authorization may have legal effect directly on the authorized party. that is, when it is not convenient for the customer to access an object directly, a proxy object can be provided for the customer to access. After a series of processing to the request, the proxy object transfers the request to the ontology object. definition provides a substitute or placeholder for each object to control access to it. The stand-in object can process the request in advance and then decide whether to transfer it to the ontology object. there are also many proxy modes, such as protection agents and virtual agents. Protection Agent is used to control access to target objects with different permissions; Virtual Agent refers to delaying the creation of expensive objects until they are really needed. Application scenario when we access an object directly, or when we are dissatisfied with our needs, we can consider using a stand-in object to control the access to that object. Let's look at the virtual proxy mode with an example of image preloading: before use first use a loaded picture to occupy space, then load the picture asynchronously, and then fill it into the img node when…

Today we are going to learn the common design pattern of JavaScript-- the strategy pattern definition defines a series of algorithms, encapsulating them individually, and making them interchangeable. extract and encapsulate seemingly unrelated code to make it easier to understand and expand. Let's understand it through an example: Application scenario there are different strategies to accomplish several things. For example, performance calculation, form validation rules calculate the year-end bonus after performance appraisal. S performance is four months' salary, A performance is three months' salary, B performance is two months' salary before use define a function to calculate bonus calculateBonus . The input parameters of the function are performance level and monthly salary function calculateBonus(level, salary) { switch (level) { case "s": { return salary * 4; } case "a": { return salary * 3; } case "b": { return salary * 2; } default: { return 0; } } }; calculate bonus calculateBonus('s', 10000); // 40000 calculateBonus('a', 5000); // 15000 if we want to modify the performance rules, we need to change the logic in the calculateBonus function, which violates the open and closed principle, so we can consider using the policy mode at this time. improve decouple all the logic function getS(salary){ return salary * 4 } function getA(salary){ return salary * 3 } function getB(salary){ return salary * 2 } function calculateBonus(level, salary) { switch (level) { case "s": { return getS(salary); } case "a": { return getA(salary); } case "b": { return getB(salary);; } default: { return 0; } } }; this is still a lot of…

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…

set up the environment every time you start a job or buy a new computer. Here are some of my essential software tools raycast www.raycast.com/   this is an efficiency tool on macOS. The body looks like this, similar to the native Spotlight, but it has a lot of features and third-party plug-ins. personal frequently used functions are: Software preset: Open APP, the most basic function File Search-File search Calculator-enter the formula in the input box to automatically calculate Coin conversion-enter the corresponding currency, such as 100usd Window Management-split, window management (instead of Rectangle) clipboard history-pasteboard history Snippets-Quick input fixed vocabulary it is easier to use third-party plug-ins: Easydict-look up words, translate IP-Geolocation-query IP View 2FA Code-SMS verification code (by reading iMessage) the above commonly used instructions I will add personal keyboard shortcuts to call, reducing the use of steps. notion www.notion.so/product this is an All-in-one note-taking tool with many templates built into it, including bookkeeping, reminders, etc., basically covering all aspects of life. at present, I am mainly used to record some ideas and summarize the knowledge system. Command Line iterm2 iterm2.com/ Mac command line tools, some keyboard shortcuts and display effects are better than native terminal, and are used to it. zsh & oh my zsh ohmyz.sh/#install provides command line beautification, syntax highlighting and automatic completion, and many convenient shortcut instructions can be added through plug-ins for example, there are gst, gco and other short commands in the git plug-in to facilitate input in addition, you can adjust the theme of the interface according to your personal preferences…

as the scale of the React application we develop is getting larger and larger, if all the components are still packaged into one bundle file, it may cause the application to load slowly. It is a common practice to package the components in the program into separate files to reduce the load time of the application, which is usually achieved by "loading on demand". In this article, you will learn about the dynamic import of components in React programs. 1.roomnbsp; what is a dynamic import component? dynamic import components refer to loading components when needed, rather than packaging all components into a single bundle file when the application loads. How do we implement it in React? React provides us with a & nbsp; lazy () & nbsp; method and & nbsp; Suspense & nbsp; component, which are the two main tools for dynamically importing components. using & nbsp; React.lazy () , we can easily load components on demand. The syntax is as follows: const MyComponent = React.lazy(() => import('./MyComponent')); in the code above, React.lazy () & nbsp; receives a function that returns a & nbsp; import () & nbsp; function call. import () & the nbsp; function is part of the ECMAScript dynamic import syntax, which allows us to load a module asynchronously at run time. By combining the & nbsp; React.lazy () & nbsp; with the & nbsp; import () & nbsp; function, we can load components on demand. when we use & nbsp; React.lazy () & nbsp;, React automatically wraps the returned component in a & nbsp; lazy…

what is cross-domain? Cross-domain is not a problem, it is a security mechanism. The browser has a policy called same origin policy, which stipulates that some requests cannot be accepted by the browser. it is worth mentioning that the cross-domain caused by the same origin policy is that the browser unilaterally refuses to respond to the data, and the server has finished processing and responded. what is homologous policy A url consists of three parts: protocol, domain name (ip address), and port . is called homologous only when the protocol, domain name, and port are the same. the same origin policy states that the browser will accept the response only if the sending side of the request and the receiving side are of the same origin. give me an example Send request address: http:47.96.127.5:8080/index accept request address: http:47.96.127.5:8081/index // different source ports are different Send request address: http:47.96.127.5:8080/index accept request address: http:47.96.127.6:8080/index // different source ip is different Send request address: http:47.96.127.5:8080/index accept request address: https:47.96.127.5:8080/index // different source protocols are different Send request address: http:47.96.127.5:8080/index accept request address: http:47.96.127.5:8080/login // same origin protocol, port, ip are all the same, it doesn't matter if the path is different. Undefined and when our request does not conform to the same origin policy. The following error often occurs: 👇 five common ways to solve cross-domain problems first: JQuery's ajax (recommended for JQuery projects) jq's ajax comes with a cross-domain solution. The underlying principle adopts the cross-domain solution of JSONP. As follows function callback(){ console.log("with a monthly salary of 1500 yuan, my heart…

background: when users open the page, they need to render different iterative versions according to the active id of the page. For example, the code used by activity An is v0.0.1 (featureA), and the version used by activity B is v0.0.2 (featureB) of course, the grayscale strategy is not only the active id, but may include the following situations by percentage of traffic by region user id activity id Press ip wait purpose Let product applications be put on the market step by step, find and modify problems step by step, and adapt to the market method: 1. nginx + lua + apollo recommendation index: ⭐️⭐️⭐️⭐️ modify cost: ⭐️⭐️⭐️ specific practice: the user requests nginx,nginx to determine the version that the user needs to render according to the grayscale policy and returns the corresponding version of html. The logic of judging the version is processed by nginx, and the grayscale policy is stored in a database or apollo (such as whitelist ip, whitelist id, percentage value) advantages: does not change the front-end business code, and is easy to maintain disadvantages: the cost of modification is slightly higher, and it requires backend or operation and maintenance support, lua language, and may need to modify the construction process. 2. bff + apollo recommendation index: ⭐️⭐️⭐️ modify cost: ⭐️⭐️⭐️⭐️ specific approach: similar to the first, only nginx is replaced with node.js, which is suitable for projects with bff layer and bff is responsible for rendering front-end pages advantages: does not change the front-end business code, and is easy to maintain disadvantages: for projects…

recently, in the process of promotion in the department, I encountered a question and answer session about front-end security, and I felt that I was lack of knowledge. Here is a summary of my learning experience. This paper summarizes the security strategies that you need to master as a front-end engineer. XSS XSS (Cross Site Scripting) is called a cross-site scripting attack, which uses the privileges of the logged-in user to inject a script into the page to fake the user's request backend. scenario of being attacked pages with unsafe form input Promotion of unknown links or pop-up window use ID theft tamper with, steal and delete enterprise information data illegal transfer DDos attacks on others using host ... attack type reflective XSS script is hidden in the connection, and after deceiving the user to click, it will execute the hacker's script, or take advantage of the loophole in the blog site to enter the attack script in the input box and trigger the user to click or access passively. Storage XSS scripts (for example: & lt;script>alert (document.cookie) & lt;/script> ) are stored on the server, such as online blogs, and the hacker script is executed every time the data is read from the server or when the user is induced to click after rendering. an example of storage + reflection is as follows: when you fill in the form and save it, when you open it for editing again, there will be not only a value field in the input, but also an additional onckick event. Each time you…

how to optimize the performance of web pages? For front-end performance optimization, here are five tips for improving website loading speed: compress and merge files: compress HTML, CSS, JavaScript, and then merge them to reduce HTTP requests. Latency loading: loads content only when needed. lazy loading: images and other media are loaded only when the user scrolls the page. use caching: use browser caching to reduce resource loading time. compressed images: use compressed image formats, such as JPEG, to reduce file size and speed up loading. 1. Compress and merge files you can use tools and plug-ins (such as Gulp, Grunt, Webpack, and so on) to automatically compress and merge files. HTML compression: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>HTML compression exampl</title> </head> <body> <h1>This is the title.</h1> <p>This is a passage.</p> </body> </html> CSS compression: body { background-color: #f8f8f8; font-family: Arial, sans-serif; font-size: 16px; } h1 { color: #333; font-size: 28px; } p { color: #666; font-size: 18px; } JavaScript compression: (function() { var message = "Hello World!"; console.log(message); }()); 2. Delayed loading delayed loading can be achieved using JavaScript. <img data-src="image.jpg" alt="Picture"> <script> // wait for the page to be fully loaded before executing the script window.onload = function() { // get all picture tags var images = document.querySelectorAll('img[data-src]'); // traversing the picture tag Array.prototype.forEach.call(images, function(image) { // modify src image.setAttribute('src', image.getAttribute('data-src')); }); }; </script> 3. Lazy load lazy loading can be implemented using JavaScript and plug-ins. Here we use the jQuery plug-in to implement lazy loading. <img data-src="image.jpg" alt="Picture"> <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.lazyload/1.9.1/jquery.lazyload.min.js"></script> <script> $(function() { $("img").lazyload({…