欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

每天一个设计模式·代理模式

程序员文章站 2022-07-05 14:31:34
"代理模式·原文地址" "更多《设计模式系列教程》" "更多免费教程" 博主按：《每天一个设计模式》旨在初步领会设计模式的精髓，目前采用 （_靠这吃饭_）和 （_纯粹喜欢_）两种语言实现。诚然，每种设计模式都有多种实现方式，但此小册只记录最直截了当的实现方式 :) 0. 项目地址 "本节课代码" " ......

博主按：《每天一个设计模式》旨在初步领会设计模式的精髓，目前采用javascript（靠这吃饭）和python（纯粹喜欢）两种语言实现。诚然，每种设计模式都有多种实现方式，但此小册只记录最直截了当的实现方式 :)

0. 项目地址

1. 什么是代理模式？

代理模式的定义：为一个对象提供一种代理以方便对它的访问。

代理模式可以解决避免对一些对象的直接访问，以此为基础，常见的有保护代理和虚拟代理。保护代理可以在代理中直接拒绝对对象的访问；虚拟代理可以延迟访问到真正需要的时候，以节省程序开销。

2. 代理模式优缺点

代理模式有高度解耦、对象保护、易修改等优点。

同样地，因为是通过“代理”访问对象，因此开销会更大，时间也会更慢。

3. 代码实现

3.1 python3 实现

class image:
  def __init__(self, filename):
    self.filename = filename

  def load_img(self):
    print("finish load " + self.filename)

  def display(self):
    print("display " + self.filename)

# 借助继承来实现代理模式
class imageproxy(image):
  def __init__(self, filename):
    super().__init__(filename)
    self.loaded = false

  def load_img(self):
    if self.loaded == false:
      super().load_img()
    self.loaded = true

  def display(self):
    return super().display()


if __name__ == "__main__":
  proxyimg = imageproxy("./js/image.png")

  # 只加载一次，其它均被代理拦截
  # 达到节省资源的目的
  for i in range(0,10):
    proxyimg.load_img()

  proxyimg.display()

3.2 javascript 实现

main.js :

// main.js
const myimg = {
  setsrc(imgnode, src) {
    imgnode.src = src;
  }
};

// 利用代理模式实现图片懒加载
const proxyimg = {
  setsrc(imgnode, src) {
    myimg.setsrc(imgnode, "./image.png"); // no1. 加载占位图片并且将图片放入<img>元素

    let img = new image();
    img.onload = () => {
      myimg.setsrc(imgnode, src); // no3. 完成加载后, 更新 <img> 元素中的图片
    };
    img.src = src; // no2. 加载真正需要的图片
  }
};

let imgnode = document.createelement("img"),
  imgsrc =
    "https://upload-images.jianshu.io/upload_images/5486602-5cab95ba00b272bd.png?imagemogr2/auto-orient/strip%7cimageview2/2/w/1000/format/webp";

document.body.appendchild(imgnode);

proxyimg.setsrc(imgnode, imgsrc);

main.html :

<!-- main.html -->
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <title>每天一个设计模式 · 代理模式</title>
</head>
<body>
  <script src="./main.js"></script>
</body>
</html>

4. 参考

  • 《javascript 设计模式和开发实践》

上一篇： python学习第一天关于编程介绍和计算机硬件介绍

下一篇： 03-箭头函数

推荐阅读