前端必须懂的设计模式-代理模式

  // 改进前
  const Request = function () {};
    const client = {
   requestTo: (server) => {
     const req = new Request();
     server.receiveRequest(req);
    },
  };
    const server = {
   handleRequest: (request) => {
     console.log('receive request: ', request);
    },
  };
    const proxy = {
   receiveRequest: (request) => {
     console.log('proxy request: ', request);
     server.handleRequest(request);
    },
  };
    client.requestTo(proxy);

  // 改进后
  const proxy = {
   receiveRequest: (request) => {
     // 校验身份
     const pass = validatePassport(request);
     if (pass) {
       // 监听服务端 ready 后代理请求
       server.listenReady(() {
         console.log('proxy request: ', request);
         server.handleRequest(request);
       });
     }
    },
  };

// 图片懒加载
  const img = (() => {
    const imgNode = document.createElement('img');
    imgNode.style.width = '200px'
    document.body.appendChild(imgNode);
    return {
      setSrc: (src) => {
        imgNode.src = src;
      },
      setLoading: () => {
        imgNode.src = './img/loading.gif'
      }
    };
  })();
  const proxyImg = ((source) => {
    // 替身图片对象
    const tempImg = new Image();
    // 监听资源加载完成，将资源替换给实体图片对象
    tempImg.onload = function () {
      source.setSrc(this.src);
    };
    return {
      // 代理开始将实体对象设置为loading状态，使用替身对象开始加载图片资源
      setSrc:(src)=>{
        source.setLoading()
        tempImg.src = src;
      }
    }
  })(img);
  proxyImg.setSrc('https://static-prod.retech.us/onder-cender/DoorDash.svg')

  // ------------------------------------------------------------

  // 合并http请求
  //上传请求
  let upload = function(ids){
      $.ajax({
          data: {
              id:ids
          }
      })
  }

  //代理合并请求
  let proxy = (function(){
    let cache = [],
      timer = null;
    return function(id){
      cache[cache.length] = id;
      if(timer) return false;
      timer = setTimeout(function(){
        upload(cache.join(','));
        clearTimeout(timer);
        timer = null;
        cache = [];
      },2000);
    }    
  })();

  // 绑定点击事件
  let checkbox = document.getElementsByTagName( "input" );
  for(var i= 0, c; c = checkbox[i++];){
    c.onclick = function(){
      if(this.checked === true){
        proxy(this.id);
      }
    }
  }

  let fibonacci = function(n){
    if(n === 1 || n === 0 ) return n;
    return fibonacci(n-1) + fibonacci(n-2);
  }

  //缓存代理
  let proxy = (function(fn){
    let cache = {};
    return function(){
      let args = Array.prototype.join.call(arguments,',');
      if(args in cache){
        return cache[args];
      }
      return cache[args] = fn.apply(this,arguments);
    }
  })(fibonacci);

  proxy(3)

// 将数据、方法、计算属性等代理到组件实例上
  let vm = new Vue({
   data: {
     msg: 'hello',
     vue: 'vue'
    },
   computed:{
     helloVue(){
       return this.msg + ' ' + this.vue
     }
    },
   mounted(){
     console.log(this.helloVue)
    }
  })

export function proxy (target: Object, sourceKey: string, key: string) {
  sharedPropertyDefinition.get = function proxyGetter () {
    return this[sourceKey][key]
  }
  sharedPropertyDefinition.set = function proxySetter (val) {
    this[sourceKey][key] = val
  }
  Object.defineProperty(target, key, sharedPropertyDefinition)
}

export function initState (vm: Component) {
  vm._watchers = []
  const opts = vm.$options
  if (opts.props) initProps(vm, opts.props)
  if (opts.methods) initMethods(vm, opts.methods)
  if (opts.data) {
    initData(vm)
  } else {
    observe(vm._data = {}, true )
  } 
  if (opts.computed) initComputed(vm, opts.computed)
  if (opts.watch && opts.watch !== nativeWatch) {
    initWatch(vm, opts.watch)
  }
}

function initData (vm: Component) {
  let data = vm.$options.data
  // 初始化 _data，组件中 data 是函数，调用函数返回结果
  // 否则直接返回 data
  data = vm._data = typeof data === 'function'
    ? getData(data, vm)
    : data || {}
  if (!isPlainObject(data)) {
    data = {}
    process.env.NODE_ENV !== 'production' && warn(
      'data functions should return an object:\n' +
      'https://vuejs.org/v2/guide/components.html#data-Must-Be-a-Function',
      vm
    )
  }
  // proxy data on instance
  // 获取 data 中的所有属性
  const keys = Object.keys(data)
  // 获取 props / methods
  const props = vm.$options.props
  const methods = vm.$options.methods
  let i = keys.length
  // 判断 data 上的成员是否和  props/methods 重名
  while (i--) {
    const key = keys[i]
    if (process.env.NODE_ENV !== 'production') {
      if (methods && hasOwn(methods, key)) {
        warn(
          `Method "${key}" has already been defined as a data property.`,
          vm
        )
      }
    }
    if (props && hasOwn(props, key)) {
      process.env.NODE_ENV !== 'production' && warn(
        `The data property "${key}" is already declared as a prop. ` +
        `Use prop default value instead.`,
        vm
      )
    } else if (!isReserved(key)) {
      proxy(vm, `_data`, key)
    }
  }
  // observe data
  // 响应式处理
  observe(data, true )
}