Home > Developer > JavaScript
I. Definition
Agent Mode: provides a substitute or placeholder for an object to control access to it.
agent is divided into: protection agent and virtual agent
Protection agents: access to target objects for objects that control different permissions, it is difficult to determine who has access to an object in JavaScript, so protection agents are difficult to implement.
Second, the picture preload (the most common virtual agent application scenario)
Picture preload is a common technology, if you set the SRC attribute directly to an IMG tag node, because the picture is too large or the network is not good, the location of the picture is often a period of time will be blank. The common practice is to use a loading picture in advance, then load the picture asynchronously, and then load the picture into the IMG node.
Implementation principle:
Create an Image object: var a = new image ();
Defines the SRC:A.SRC = "xxx.gif" of the image object;
Doing so would be equivalent to caching a picture for the browser.
The image object's complete property can be used to detect whether the images are loaded and completed. Each image object has a complete property that is false when the image is in the loading process, and when any one of the onload, onerror, onabort events occurs, the image loading process ends, and the complete property 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
Create a picture dom
var myimage = (function () {
var imgnode = document.createelement ("img");
Document.body.appendChild (Imgnode);
return {
setsrc:function (src) {
imgnode.src = src;
}}
;
}) ();
Agent
var proxyimage = (function () {
var img = new Image ();
Img.onload = function () {
myimage.setsrc (THIS.SRC); This points to img! After the IMG loading is completed, the IMG.SRC is passed to the MyImage
};
return {
setsrc:function (src) {
myimage.setsrc ("./images/loading.gif"); Loading
img.src = src;
}}
;
();
Proxyimage.setsrc ("./images/originimg.png");
The benefits of using proxy mode: Make each function single, achieve the object design of the "single Responsibility Principle"!
Third, 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"/> file 1
<input type= "checkbox" id= "2"/> File 2
< Input type= "checkbox" id= "3"/> file 3
<input type= "checkbox" id= "4"/> file 4
<input type= "checkbox" Id= " 5 "/> File 5
<input type=" checkbox "id=" 6 "/> File 6
</body>
It's obviously not reasonable to sync once without selecting a checkbox. Because in web development, the biggest overhead is network requests.
Solution: collect requests over a period of time through an agent function and send them to the server at once.
var synchronousfile = function (id) {
console.log ("Start synchronizing file, ID:" + ID);
var Proxysynchonousfile = (function () {
var cache = [], ///Save the ID timer that needs to sync the file this time
; Timer return
function (ID) {
cache.push (ID);
if (timer) {
//does not overwrite a timed return that has started
;
}
Timer = settimeout (function () {
synchronousfile (Cache.join (","));
Cleartimeout (timer);
timer = null;
cache.length = 0; Empty Cache
}, Watts);
}
();
var checkboxs = document.getelementsbytagname ("input");
for (var i = 0, c; c = checkboxs[i]; i++) {
C.onclick = function () {
if (this.checked = = True) {
Proxysyncho Nousfile (this.id);}}
Cache proxy-Compute product (exact sequence)
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));
Transformation:
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 help you learn about JavaScript programming.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
