JavaScript设想形式（代办形式）

2019-11-18杂谈搜奇网36°c

A⁺ A^-

一、简朴的代办情势：

1、未运用代办情势的状况：小明直接给女神送花

var Flower = function() {}
var xiaoming = {
  sendFlower: function( target ){
    var flower = new Flower();
    target.receiveFlower( flower ); 
  }
};
var A = {
  receiveFlower: function( flower ){
    console.log( '收到花 ' , flower ); 
  }
};
xiaoming.sendFlower( A );

2、运用简朴的代办情势：小明经由过程B给女神送花

var Flower = function() {}
var xiaoming = {
  sendFlower: function( target ){
    var flower = new Flower();
    target.receiveFlower( flower ); 
  }
};
var A = {
  receiveFlower: function( flower ){
    console.log( '收到花 ' , flower ); 
  }
};
var B = {
    receiveFlower: function( flower ){
      A.receiveFlower(flower)
    }
}
xiaoming.sendFlower( B );

二、庇护代办和假造代办

虽然这只是个假造的例子，但我们能够从中找到两种代办情势的身影。代办 B 能够协助 A 过滤掉一些要求，比方送花的人中岁数太大的或许没有宝马的，这类要求就能够直接在代办 B 处被谢绝掉。这类代办叫作庇护代办。A 和 B 一个充任白脸，一个充任黑脸。白脸 A 继承坚持优越的女神抽象，不愿望直接谢绝任何人，因而找了黑脸 B 来掌握对 A 的接见。

别的，假定实际中的花价格不菲，致使在顺序天下里，new Flower 也是一个价值高贵的操纵，那末我们能够把 new Flower 的操纵交给代办 B 去实行，代办 B 会挑选在 A 心情好时再实行 new Flower，这是代办情势的另一种情势，叫作假造代办。假造代办把一些开支很大的对象，延晚到真正须要它的时刻才去建立。

三、假造代办完成图片预加载

var myImage = (function(){
  var imgNode = document.createElement( 'img' ); 
  document.body.appendChild( imgNode );
  return {
    setSrc: function( src ){
      imgNode.src = src; 
    }
  } 
})();
myImage.setSrc('http:// imgcache.qq.com/music/photo/k/000GGDys0yA0Nk.jpg');

一般体式格局下，我们把网速调至 5KB/s，然后经由过程 MyImage.setSrc 给该 img 节点设置 src，能够看到，在图片被加载好之前，页面中有一段长长的空缺时候。

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); 
  }
  return {
    setSrc: function( src ){
      myImage.setSrc( 'file:// /C:/Users/svenzeng/Desktop/loading.gif' );
      img.src = src; 
    }
  } 
})();
proxyImage.setSrc( 'http:// imgcache.qq.com/music/photo/k/000GGDys0yA0Nk.jpg' );

代办情势革新后，如今最先引入代办对象 proxyImage，经由过程这个代办对象，在图片被真正加载好之前，页面中将涌现一张占位的菊花图 loading.gif, 来提醒用户图片正在加载。proxyImage 掌握了客户对 MyImage 的接见，而且在此过程当中到场一些分外的操纵，比方在真正的图片加载好之前，先把 img 节点的 src 设置为一张当地的 loading 图片。

四、假造代办兼并HTTP要求

<body>
  <input type="checkbox" id="1"></input>1
  <input type="checkbox" id="2"></input>2
  <input type="checkbox" id="3"></input>3
  <input type="checkbox" id="4"></input>4
  <input type="checkbox" id="5"></input>5
  <input type="checkbox" id="6"></input>6
  <input type="checkbox" id="7"></input>7
  <input type="checkbox" id="8"></input>8
  <input type="checkbox" id="9"></input>9
</body>

给这些 checkbox 绑定点击事宜，而且在点击的同时往另一台服务器同步文件:当我们选中3个checkbox 的时刻，顺次往服务器发送了3次同步文件的要求。而点击一个checkbox并非很庞杂的操纵。能够预感，云云频仍的网络要求将会带来相当大的开支。

var synchronousFile = function( id ){ 
  console.log( '最先同步文件，id 为: ' + id );
};
var checkbox = document.getElementsByTagName( 'input' );
for ( var i = 0, c; c = checkbox[ i++ ]; ){ 
  c.onclick = function(){
    if ( this.checked === true ){ 
      synchronousFile( this.id );
    } 
  }
};

解决方案是，我们能够经由过程一个代办函数 proxySynchronousFile 来网络一段时候以内的要求，末了一次性发送给服务器。比方我们守候 2 秒以后才把这 2 秒以内须要同步的文件 ID 打包发给服务器，假如不是对及时性要求异常高的体系，2 秒的耽误不会带来太大副作用，却能大大减轻服务器的压力。:

var synchronousFile = function( id ){ 
  console.log( '最先同步文件，id 为: ' + id );
};
var proxySynchronousFile = (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; // 清空 ID 鸠合
    }, 2000); 
  }
  // 2 秒后向本体发送须要同步的 ID 鸠合
})();
var checkbox = document.getElementsByTagName( 'input' ); 
for ( var i = 0, c; c = checkbox[ i++ ]; ){
  c.onclick = function(){
    if ( this.checked === true ){
      proxySynchronousFile( this.id ); 
    }
  }
}

五、用高阶函数动态建立缓存代办：

经由过程传入高阶函数这类越发天真的体式格局，能够为种种盘算方法建立缓存代办。如今这些盘算方法被看成参数传入一个特地用于建立缓存代办的工场中，这样一来，我们就能够为乘法、加法、减法等建立缓存代办:

/**************** 盘算乘积 *****************/ 
var mult = function(){
  var a = 1; 
  for ( i = 0, l = arguments.length; i < l; i++ ){ 
    var a = a* arguments[i];
  }
  return a; 
};

/**************** 盘算加和 *****************/
var plus = function(){
  var a = 1; 
  for ( i = 0, l = arguments.length; i < l; i++ ){ 
    var a = a + arguments[i];
  }
  return a; 
};

/**************** 建立缓存代办的工场 *****************/ 
var createProxyFactory = 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 ); 
  }
};

var proxyMult = createProxyFactory( mult ), 
proxyPlus = createProxyFactory( plus );

alert ( proxyMult( 1, 2, 3, 4 ) ); // 输出:24
alert ( proxyMult( 1, 2, 3, 4 ) ); // 输出:24
alert ( proxyPlus( 1, 2, 3, 4 ) ); // 输出:10
alert ( proxyPlus( 1, 2, 3, 4 ) ); // 输出:10