Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

preface

Design patterns are very important in our programming!

Design patterns represent best practices and are generally adopted by experienced object-oriented software developers. Design pattern is a solution to the common problems faced by software developers during software development. These solutions have been developed by numerous software developers over a long period of trial and error.

What are design patterns?

In software design, a concise and elegant solution to a specific problem.

It can solve practical problems by summarizing previous experience and applying it reasonably to a certain scene.

Five Principles of Design (SOLID)

  • S- Single responsibility principle

    A program only does one thing

  • O- Open and closed principle

    Extensible open, closed to modification

  • L- Richter substitution principle

    A subclass can override a parent class and appear where the parent class appears

  • I- Interface independence principle

    Keep interfaces single and separate

  • D- Dependence leads to principle

    Usage methods focus only on the interface and not on the implementation of concrete classes

Why are design patterns needed?

  • legibility

    Using design patterns improves the readability of our code and the efficiency of subsequent development

  • Can expand sex

    Decoupling the code with design patterns can greatly enhance the yi modifiability and extensibility of the code

  • reusability

    Use design patterns to reuse existing solutions without having to do the same work

  • reliability

    Using design patterns increases the robustness of the system and makes code authoring truly engineering

The proxy pattern

Definition: Provides a proxy or placeholder for an object to control access to it. A surrogate object can preprocess the request before deciding whether to forward it to the ontology object.

If an image in the project is too large and cannot be loaded in a short time, the user will only see a white screen and the experience will be very bad, then we can use a stand-in to temporarily replace the image.

When the real body is visited, we first visit the surrogate object and ask the surrogate to do something on behalf of the real body, which is then handed over to the real body for processing.

Application scenario: When direct access to an object is not convenient, or the requirements are not met, we can consider using a surrogate object to control access to the object.

Take a look at this code:

// Native functions
const rawImage = (() = > {
	const imgNode = document.createElement("img");
	document.body.appendChild(imgNode);
	return {
		setSrc:(src) = > {
			imgNode.src = "./loading.gif";
			const img = new Image();
			img.src = src;
			img.onload = () = > {
				imgNode.src = this.src; }}}}) (); rawImage.setSrc("http://xxx.gif");
Copy the code

The loading time of this XXX.gif may take about 10s. We first preload a loading diagram, and the user sees the loading process at the very beginning. After XXX is loaded, that is, after onload is executed, a replacement effect will be made to complete this function.

Think: Is this code too coupled?

Yes, the loading logic is coupled with the actual loading logic, we need to do two things, one is to set loading, the other is to set the image link. Then we separate it, use proxy function to do preprocessing, loading loading, and use native function to provide a function to set image link.

Implement:

// Native functions
const rawImage = (() = > {
	const imgNode = document.createElement("img");
	document.body.appendChild(imgNode);
	return {
		setSrc:(src) = >{ imgNode.src = src; }}; }) ();// proxy function
const proxyImage = (() = > {
	const img = new Image();
	img.onload = () = >{
		rawImage.setSrc(this.src);
	};
	return {
		setSrc:(src) = > {
			rawImage.setSrc("./loading.gif"); img.src = src; }}; }) (); proxyImage.setSrc("http://xxx.gif");
Copy the code

We usually use proxy mode when preprocessing some requests.