1. Getting to know the proxy mode for the first time
Agent Modeis to provide an object with a substitute or placeholder to control access to it. Its purpose is to provide a substitute object to control access to this object when the customer is inconvenient to directly access an object or does not meet the needs. In layman's terms, the agent is an intermediary who is responsible for passing information between customers and sellers, filtering useless information, and passing information that is conducive to the successful transaction to the seller, thereby increasing the success rate of the transaction.
2. Implementation of agent model
Now let’s implement the proxy mode through an example of Xiao Ming sending flowers to the goddess.
No proxy mode is used
let Flower = function () {};
let xiaomingFirst = {
sendFlower ( target ) {
let flower = new Flower();
( flower );
}
}
let A = {
receiveFlower ( flower ) {
('Received Flowers')
}
}
(A);Refactoring using proxy mode
Set a requirement：AAFor Xiao Ming's goddess,AAThe chance of accepting Xiao Minghua when you are in a good mood is greater, andByesAAA good friend with Xiao Ming, so Xiao Ming gave the flowers toB,letBexistAA Tell yourself what you want when you are in a good mood.
analyze: The refactored code adds a new objectB , at this timeB forAA agent,B MonitorAA Good mood, the code assumes that it will take 5 seconds laterAA Better mood,B Send the flowers.
let xiaomingSencend = {
sendFlower ( target ) {
let flower = new Flower();
( flower );
}
}
let AA = {
receiveFlower () {
('Received Flowers');
},
listenGoodMood ( fn ) {
setTimeout(()=>{
fn();
}, 5000);
}
}
let B = {
receiveFlower ( flower ) {
( ()=>{
( flower );
} );
}
}
(B);3. Agent model classification
The agent pattern in the above code may not be so important, but it reflects the agent's idea. If the goddess has some requirements, the boy who gives him flowers must be handsome and rich, but cannot appear so powerful. Therefore, the agent can help him filter out these boys who do not meet the requirements, reduce a lot of trouble for himself, and maintain his beautiful image. This is the use of the agent. Besides, buying a flower is expensive, not justnew It is so simple that boys don’t want to waste their money, so they want to first determine whether the goddess accepts her own flowers, so they ask the agent to help ask. If the goddess accepts it, ask the agent to help buy one for the goddess, which reduces the boy’s losses but also achieves the goal, which leads to the following two agent models.
- Protection Agent: The requirements of the ontology are directly implemented in the proxy to filter out the requests of visitors to the ontology that do not meet the requirements.
- Virtual Agent: Wait for some operations with high overhead until they are ready to request from the ontology (mainly used for actual development)
IV. The practical application of virtual proxy mode
1. Virtual agent implements image preloading
analyze: First load the local image, then start to initiate a request to obtain the image. When the image is successfully loaded, call itmyImageReplace the image with the image displayed when preloaded.
let myImage = function () {
let img = ('img');
(img);
return {
setSrc ( src ) {
= src;
}
}
}();
proxyImage = function () {
let img = new Image;
= function () {
( );
}
return {
setProxyImage( src ) {
("/community/@1280w_1l_2o_100sh.jpg"); // Here is the loading image, used to occupy place, local image (the author uses network image) = src;
}
}
}();
("/community/@1280w_1l_2o_100sh.jpg");2. Cache proxy
analyze: Caches the results of ontology calculations in the proxy. If you encounter the same request next time, you will directly obtain them from the cache to reduce access to the ontology and reduce performance consumption.
// Function that calculates product let mult = function (...arg) {
('I executed')
let m = 1;
for(let i = 0,l = ; i <l; i++){
m *= arg[i];
}
return m;
}
// Cache proxy let proxyMult = function( fn ) {
let cache = {};
return function (...arg) {
let argS = (',');
if( cache[argS] ) {
return cache[argS];
}
return cache[argS] = ( this, arg);
}
};
let proxymult = proxyMult(mult);
(proxymult(1,2,4))3. Virtual proxy merges Http requests
Use scenarios:Click the check box to initiate a request to synchronize files to the server. Each time you click the check box, a request is initiated, causing huge network overhead. At this time, our optimization method is to cache the files you want to synchronize and send them to the server through a request after 3 seconds.
<input type="checkbox" >1
<input type="checkbox" >2
<input type="checkbox" >3
<input type="checkbox" >4
<input type="checkbox" >5
<input type="checkbox" >6
<input type="checkbox" >7
<input type="checkbox" >8
<script>
// Synchronize files let synchronousFile = function ( id ) {
("Start Synchronize Files" + id);
}
// Agent implements synchronous files let proxySynchronousFile = function ( ) {
let cache = [];
let time;
return function ( id ) {
( id );
if( time ) {
return;
}
time = setInterval(() => {
synchronousFile((','));
clearInterval(time);
time = null;
= 0;
}, 3000);
}
}()
// Add click to execute let checkboxList = ('input');
for(let i = 0, l = ; i < l; i++) {
checkboxList[i].onclick = function() {
if( === true ) {
proxySynchronousFile(i+1);
}
}
}V. Significance and requirements of the use of agents
significance:First, we introduce the principle of object-oriented design.Single responsibility principle, an object should assume as few responsibilities as possible, preferably one, if it assumes too much responsibilities, it will increase the coupling of the code, resulting in a fragile and low cohesive design. When changes occur, the design may be accidentally damaged. Even if the implementation requires the same requirement to encapsulate the code into a function, the best way to deal with it is to introduce the proxy mode
Require:The proxy and ontology interface must be consistent, and a proxy can be used instead of any place where the ontology is used.
VI. Summary
The proxy mode includes many small modules, the most commonly used one isCache proxyandVirtual AgentAlthough the proxy mode is very useful, we do not need to guess in advance whether we need to use the proxy mode when writing business code. It is not too late to directly access an object when it is found that it is inconvenient to use it.
That’s all for this article. I hope it can help you and I hope you can pay more attention to more of my content!