Learn JavaScript design patterns - proxy pattern_javascript skills
- Celebrities are represented by managers. If you ask a celebrity to host a commercial performance, you can only contact his agent. The agent will negotiate the details and remuneration of the commercial performance, and then give the contract to the celebrity to sign.
1. Definition
Proxy pattern: Provide a surrogate or placeholder for an object in order to control access to it.
Agents are divided into: Protection agents and virtual agents
Protection agent: is used to control the access of objects with different permissions to the target object. It is difficult to judge who has accessed an object in JavaScript, so the protection agent is difficult to implement.
2. Image preloading (the most common virtual agent application scenario)
Image preloading is a common technology. If you directly set the src attribute for an img tag node, the image position will often be blank for a period of time due to the image being too large or the network being poor. A common approach is to use a loading image as a placeholder in advance, and then load the image asynchronously. After the image is loaded, fill it into the img node.
Implementation principle:
Create an Image object: var a = new Image();
Define the src of the Image object: a.src = “xxx.gif”;
Doing so is equivalent to caching an image for the browser.
You can check whether the image is loaded through the complete attribute of the Image object. Each Image object has a complete attribute. When the image is in the loading process, the attribute value is false. When any of the onload, onerror, and onabort events occurs, it means that the image loading process is over. At this time, the complete attribute is true. .
(1) Non-proxy implementation
var myImage = (function() {
var imgNode = document.createElement("img");
document.body.appendChild(imgNode);
var img = new Image();
img.onload = function() {
imgNode.src = img.src;
};
return {
setSrc: function(src) {
imgNode.src = "./images/loading.gif";
img.src = src;
}
}
})();
myImage.setSrc("./images/originImg.png");
(2) Proxy implementation
// 创建图片DOM
var myImage = (function() {
var imgNode = document.createElement("img");
document.body.appendChild(imgNode);
return {
setSrc: function(src) {
imgNode.src = src;
}
};
})();
// 代理
var proxyImage = (function() {
var img = new Image();
img.onload = function() {
myImage.setSrc(this.src); // this指向img！img加载完成后，将img.src传递给myImage
};
return {
setSrc: function(src) {
myImage.setSrc("./images/loading.gif"); // loading
img.src = src;
}
};
})();
proxyImage.setSrc("./images/originImg.png");
The benefits of using the proxy mode: making each function single-function and realizing the "single responsibility principle" of object design!
3. File synchronization
Suppose we are doing a file synchronization function. When the checkbox is selected, its corresponding file will be synchronized to another server.
<body>
<input type="checkbox" id="1" />文件1
<input type="checkbox" id="2" />文件2
<input type="checkbox" id="3" />文件3
<input type="checkbox" id="4" />文件4
<input type="checkbox" id="5" />文件5
<input type="checkbox" id="6" />文件6
</body>It is obviously unreasonable to synchronize once without selecting a checkbox. Because in web development, the biggest overhead is network requests.
Solution: Use a proxy function to collect requests within a period of time, and then send them to the server all at once.
var synchronousFile = function(id) {
console.log("开始同步文件，id为：" + id);
};
var proxySynchonousFile = (function() {
var cache = [], // 保存本次需要同步文件的id
timer; // 定时器
return function(id) {
cache.push(id);
if(timer) {
// 不要覆盖已经启动的定时
return;
}
timer = setTimeout(function(){
synchronousFile(cache.join(","));
clearTimeout(timer);
timer = null;
cache.length = 0; // 清空缓存
}, 2000);
}
})();
var checkboxs = document.getElementsByTagName("input");
for(var i = 0, c; c = checkboxs[i]; i++) {
c.onclick = function() {
if(this.checked === true) {
proxySynchonousFile(this.id);
}
}
}
4. Caching proxy – calculating the product (the sequence is exactly the same)
var mult = function() {
var result = 1;
for(var i = 0, l = arguments.length; i < l; i++) {
result= result * arguments[i];
}
return result;
};
var proxyMult = (function() {
var cache = {}; // {"1,2,3": 6}
return function() {
var args = Array.prototype.join.call(arguments, ",");
if(args in cache) {
return cache[args];
}
return cache[args] = mult.apply(this, arguments);
}
})();
console.log(proxyMult(1, 2, 3));
// 改造：
var proxyFactory = function(fn) {
var cache = {};
return function() {
var args = Array.prototype.join.call(arguments, ",");
if(args in cache) {
return cache[args];
}
return cache[args] = fn.apply(this, arguments);
}
};
console.log(proxyFactory(mult)(1, 2, 3));
I hope this article will be helpful to everyone learning JavaScript programming.
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
AI Hentai Generator
Generate AI Hentai for free.
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
1359
52
The difference between design patterns and architectural patterns in Java framework
Jun 02, 2024 pm 12:59 PM
In the Java framework, the difference between design patterns and architectural patterns is that design patterns define abstract solutions to common problems in software design, focusing on the interaction between classes and objects, such as factory patterns. Architectural patterns define the relationship between system structures and modules, focusing on the organization and interaction of system components, such as layered architecture.
The wonderful use of the adapter pattern in Java design patterns
May 09, 2024 pm 12:54 PM
The Adapter pattern is a structural design pattern that allows incompatible objects to work together. It converts one interface into another so that the objects can interact smoothly. The object adapter implements the adapter pattern by creating an adapter object containing the adapted object and implementing the target interface. In a practical case, through the adapter mode, the client (such as MediaPlayer) can play advanced format media (such as VLC), although it itself only supports ordinary media formats (such as MP3).
What are the advantages and disadvantages of proxy mode in java framework?
Jun 03, 2024 am 09:34 AM
The proxy pattern is a Java framework design pattern that mediates between the client and the target object by creating a proxy object. Its advantages include: protecting target objects, providing data integrity and security; controlling access to the target, implementing permission control and security measures; enhancing target behavior, adding additional functions such as logging, caching and transaction management; simplifying testing and facilitating mocking and stubbing goals. However, the proxy pattern also has disadvantages: Overhead: Creating and maintaining proxy objects may reduce performance; Complexity: Requires a deep understanding of the design pattern; Restricted access to targets, which may not be appropriate in some cases.
Analysis of the Decorator Pattern in Java Design Patterns
May 09, 2024 pm 03:12 PM
The decorator pattern is a structural design pattern that allows dynamic addition of object functionality without modifying the original class. It is implemented through the collaboration of abstract components, concrete components, abstract decorators and concrete decorators, and can flexibly expand class functions to meet changing needs. In this example, milk and mocha decorators are added to Espresso for a total price of $2.29, demonstrating the power of the decorator pattern in dynamically modifying the behavior of objects.
PHP design pattern practical case analysis
May 08, 2024 am 08:09 AM
1. Factory pattern: Separate object creation and business logic, and create objects of specified types through factory classes. 2. Observer pattern: allows subject objects to notify observer objects of their state changes, achieving loose coupling and observer pattern.
How design patterns deal with code maintenance challenges
May 09, 2024 pm 12:45 PM
Design patterns solve code maintenance challenges by providing reusable and extensible solutions: Observer Pattern: Allows objects to subscribe to events and receive notifications when they occur. Factory Pattern: Provides a centralized way to create objects without relying on concrete classes. Singleton pattern: ensures that a class has only one instance, which is used to create globally accessible objects.
What are the advantages and disadvantages of using design patterns in java framework?
Jun 01, 2024 pm 02:13 PM
The advantages of using design patterns in Java frameworks include: enhanced code readability, maintainability, and scalability. Disadvantages include complexity, performance overhead, and steep learning curve due to overuse. Practical case: Proxy mode is used to lazy load objects. Use design patterns wisely to take advantage of their advantages and minimize their disadvantages.
PHP Design Patterns: Test Driven Development in Practice
Jun 03, 2024 pm 02:14 PM
TDD is used to write high-quality PHP code. The steps include: writing test cases, describing the expected functionality and making them fail. Write code so that only the test cases pass without excessive optimization or detailed design. After the test cases pass, optimize and refactor the code to improve readability, maintainability, and scalability.
