This is the 28th day of my participation in the First Challenge 2022

introduce

In this issue we will talk about the proxy model, which is designed to solve the problem of accessing objects directly, sometimes for different purposes either for convenience, such as desktop shortcuts in our Windows system, or for security, such as firewall proxies. The proxy mode is a very common mode in programs.

For example, when fans are chasing stars, they often ask stars to sign for them. They are so excited that you sign and I sign, too. If there are so many fans, then the star doesn’t have to do anything for a day. As a result, the star thought of a way, I am not busy come over to find an assistant, if I have no time to tell him, fans of the card can not pass over, he stopped the fans. The assistant here is to complete the business of acting on behalf of stars, receiving cards for signature, to solve the problem of signing anxiety of stars.

concept

The proxy pattern is a structural pattern. Representation is often the ability of one class to represent another class in order to provide a proxy for other objects to control access to that object.

case

Next, is to achieve what we just chestnut in the chasing star agent business.

var fans = {
	name:"Fans".sendCard:function(target){
		console.log(this.name + ": Request signature") target.receiveCard(); }}var star = {
	name:"Star".receiveCard:function(){
		console.log(this.name + ": Completed signature")}}var agent = {
	name:"Agent".receiveCard:function(){
		if(window.confirm("Do you have time to sign?")) {console.log(this.name + ": submit to"+ star.name)
			star.receiveCard();
		}
		else{
			console.log(this.name + "Sorry!"+ star.name +"No time.")}}}Copy the code

Here we have fans send a sign request to the target, and the target receives the request and completes the sign. Here, agent is used to represent star and protect star from disturbance.

fans.sendCard(agent)
Copy the code

Sign if you have time:

If not available, I will not sign:

Now you can see the benefits of this proxy in the business of filtering out requests and protecting star objects.

Agents in ES6

ES6 natively provides a Proxy constructor, which can generate a Proxy instance to complete the Proxy.

var jsmask = new Proxy({}, {
  get: function(target, propKey) {
    return "jsmask"; }}); jsmask.name// jsmask
jsmask.name = 'superman' // superman
jsmask.name // jsmask
Copy the code

In terms of compatibility, Internet Explorer on PC is completely dead, and the lower versions of Android on mobile are not very good either.

The purpose of this issue is to describe the intention of proxy mode. For detailed use of proxy, please see Ruan Yifeng’s ES6 introduction tutorial.

conclusion

See just now, proxy mode is far more than these, such as can do cache proxy, protection proxy, write copy proxy and so on, there are many ways to write, but the form is to add the middle layer, to solve the direct access to the object brought by the problem. It is not hard to find that its benefits are clear responsibilities and good scalability. Of course, the disadvantage is obvious, because of the presence of the middle layer, the processing will do some extra work, and the processing will certainly be slower than before.