JavaScript设计模式之代理模式

栏目: JavaScript · 发布时间: 5年前

内容简介:使用者无权访问目标对象,中间加代理,通过代理做授权和控制什么Nginx代理、JSONP、科学上网…,你平时的工作中可能都用了代理模式,只是你不知道。模式作用:

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

什么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 这个词的原意是代理,用在这里表示由它来“代理”某些操作,可以译为“代理器”。

// 明星
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)

比较

适配器模式与代理模式:

  • 适配器模式:提供一个不同的接口(如不同的插头)
  • 代理模式: 提供一模一样的接口
    装饰器模式与代理模式:
  • 装饰器模式: 扩展功能,原有功能不变且可以直接使用
  • 代理模式: 显示原有功能,但是经过限制或者是阉割之后的

最后

创建了一个前端学习交流群,感兴趣的朋友,一起来嗨呀!

JavaScript设计模式之代理模式

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

PHP Cookbook

PHP Cookbook

Adam Trachtenberg、David Sklar / O'Reilly Media / 2006-08-01 / USD 44.99

When it comes to creating dynamic web sites, the open source PHP language is red-hot property: used on more than 20 million web sites today, PHP is now more popular than Microsoft's ASP.NET technology......一起来看看 《PHP Cookbook》 这本书的介绍吧!

随机密码生成器
随机密码生成器

多种字符组合密码

Base64 编码/解码
Base64 编码/解码

Base64 编码/解码

正则表达式在线测试
正则表达式在线测试

正则表达式在线测试