前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >JavaScript设计模式之代理模式

JavaScript设计模式之代理模式

作者头像
FinGet
修改2019-07-03 17:35:17
2870
修改2019-07-03 17:35:17
举报
文章被收录于专栏:FinGet前端之路FinGet前端之路

代理模式简介

使用者无权访问目标对象,中间加代理,通过代理做授权和控制

什么Nginx代理、JSONP、访问外国网站…,你平时的工作中可能都用了代理模式,只是你不知道。

模式作用:

  1. 远程代理(一个对象将不同空间的对象进行局部代理)
  2. 虚拟代理(根据需要创建开销很大的对象如渲染网页暂时用占位图代替真图)
  3. 安全代理(控制真实对象的访问权限,经纪人一般都是暴露自己的电话,明星的电话一般情况都不会泄漏)
  4. 智能指引(调用对象代理处理另外一些事情如垃圾回收机制)

UML类图

代码示例

代码语言:javascript
复制
// 代理模式需要三方(买房的过程)
// 1.买家
function buyer() {
  this.name = 'FinGet'
}
// 2.中介
function agency(){

}
// 卖房
agency.prototype.sellhouse = function (){
  new seller(new buyer()).sell('100W')
}

// 3.卖家
function seller(buyer) {
  this.buyerName = buyer.name
  this.sell = function(money) {
    console.log(`收到了${this.buyerName}的${money},房子卖出`)
  }
}

ES6 Proxy

阮一峰ES6,http://es6.ruanyifeng.com/#docs/proxy Proxy 可以理解成,在目标对象之前架设一层“拦截”,外界对该对象的访问,都必须先通过这层拦截,因此提供了一种机制,可以对外界的访问进行过滤和改写。Proxy 这个词的原意是代理,用在这里表示由它来“代理”某些操作,可以译为“代理器”。

代码语言:javascript
复制
// 明星
let star = {
  name: '张XX',
  age: 25,
  phone: '13910733521'
}

// 经纪人
let agent = new Proxy(star, {
  get: function (target, key) {
    if (key === 'phone') {
      // 返回经纪人自己的手机号
      return '18611112222'
    }
    if (key === 'price') {
      // 明星不报价,经纪人报价
      return 120000
    }
    return target[key]
  },
  set: function (target, key, val) {
    if (key === 'customPrice') {
      if (val < 100000) {
        // 最低 10w
        throw new Error('价格太低')
      } else {
        target[key] = val
        return true
      }
    }
  }
})

// 主办方
console.log(agent.name)
console.log(agent.age)
console.log(agent.phone)
console.log(agent.price)

// 想自己提供报价(砍价,或者高价争抢)
agent.customPrice = 150000
// agent.customPrice = 90000  // 报错:价格太低
console.log('customPrice', agent.customPrice)

比较

适配器模式与代理模式:

  • 适配器模式:提供一个不同的接口(如不同的插头)
  • 代理模式: 提供一模一样的接口 装饰器模式与代理模式:
  • 装饰器模式: 扩展功能,原有功能不变且可以直接使用
  • 代理模式: 显示原有功能,但是经过限制或者是阉割之后的
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2018-11-28,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 代理模式简介
  • 代码示例
  • ES6 Proxy
  • 比较
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档