AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

策略模式 在JavaScript中的实现

2024-10-17 32
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 策略模式 在JavaScript中的实现

策略模式（Strategy Pattern）是一种行为设计模式，它允许在运行时根据不同的情况选择不同的算法或行为。该模式将算法封装成独立的

策略对象，使得这些策略对象可以互相替换，从而使得算法的变化独立于使用算法的客户端。 -- 来自查特著迪皮

需求

想要实现一个功能，点击不同按钮实现不同样式

G}}Z%])HM3]D{98P0~33ALR.png

原始代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    section {
      display: flex;
      padding: 10px;
    }
    button {
      margin: 0 10px;
      background-color: slateblue;
      outline: none;
      color: #fff;
      width: 100px;
      height: 100px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    div {
      width: 100px;
      height: 100px;
      margin: 50px auto;
      background-color: gray;
    }
  </style>
</head>
<body>
  <section>
    <button id="blue">蓝色 高度30</button>
    <button id="red">红色 高度40</button>
    <button id="green">绿色 高度50</button>
    <button id="purple">紫色 高度60</button>
    <button id="yellow">黄色 高度70</button>
  </section>
  <div>div</div>
  <script>
    const buttons = document.querySelectorAll("button");
    const div = document.querySelector("div");
    buttons.forEach(button => button.addEventListener('click', function (e) {
      const idType = button.id;
      // 重点代码=======================
      if (idType === "blue") {
        div.style.backgroundColor = "blue";
        div.style.height = "30px";
      }
      if (idType === "red") {
        div.style.backgroundColor = "red";
        div.style.height = "40px";
      }
      if (idType === "green") {
        div.style.backgroundColor = "green";
        div.style.height = "50px";
      }
      if (idType === "purple") {
        div.style.backgroundColor = "purple";
        div.style.height = "60px";
      }
      if (idType === "yellow") {
        div.style.backgroundColor = "yellow";
        div.style.height = "70px";
      }
      // 重点代码=======================
    }))
  </script>
</body>
</html>

问题

以上代码，明显存在冗余、不方便维护的问题。也就是违背了 开放-封闭原则 （Open-Close Principle，OCP）

LM11]3PMW~``F@LMP1OD]D6.png

分析

以上问题就很适合使用 策略模式

在JavaScript中，策略模式可以通过以下方式理解：

  1. 定义策略对象：首先，你需要定义一组策略对象，每个策略对象代表一种算法或行为。
  2. 使用策略对象：在需要使用算法或行为的地方，你可以通过选择合适的策略对象来实现不同的功能。这样可以在不修改客户端代码的情况下改变算法或行为。
  3. 切换策略：由于策略对象具有相同的接口，你可以根据不同的情况或条件来切换使用不同的策略对象。这使得你可以根据需要动态地选择合适的策略。

根据以上的分析，其实我们只需要换一个优雅的方式来替代高频率的 if-else即可。因为以上过程只需要表示为

%OB%R[R`Z)`KKA3P80CE3BY.png

解决方案 1 普通对象

在JavaScript中，对象 object 天然具备 判断哪种策略 - 使用策略能力


对象[策略]();
obj[key]();
// 定义策略对象
const strategy = {
  blue(dom) {
    dom.style.backgroundColor = "blue";
    dom.style.height = "30px";
  },
  red(dom) {
    dom.style.backgroundColor = "red";
    dom.style.height = "40px";
  },
  green(dom) {
    dom.style.backgroundColor = "green";
    dom.style.height = "50px";
  },
  purple(dom) {
    dom.style.backgroundColor = "purple";
    dom.style.height = "60px";
  },
  yellow(dom) {
    dom.style.backgroundColor = "yellow";
    dom.style.height = "70px";
  },
}
buttons.forEach(button => button.addEventListener('click', function (e) {
  const idType = button.id;
  // 重点代码=======================
  // 判断和使用策略
  strategy[idType](div);
  // 重点代码=======================
}))

解决方案 2 prototype

以上代码，可以实现 es5基于构造函数的面向对象的思想来实现

定义策略对象


// 定义策略对象
const StrategyBlue = function () { }
const StrategyRed = function () { }
const StrategyGreen = function () { }
const StrategyPurple = function () { }
const StrategyYellow = function () { }

定义策略对应的行为


StrategyBlue.prototype.setStyle = function (dom) {
  dom.style.backgroundColor = "blue";
  dom.style.height = "30px";
}
StrategyRed.prototype.setStyle = function (dom) {
  dom.style.backgroundColor = "red";
  dom.style.height = "40px";
}
StrategyGreen.prototype.setStyle = function (dom) {
  dom.style.backgroundColor = "green";
  dom.style.height = "50px";
}
StrategyPurple.prototype.setStyle = function (dom) {
  dom.style.backgroundColor = "purple";
  dom.style.height = "60px";
}
StrategyYellow.prototype.setStyle = function (dom) {
  dom.style.backgroundColor = "yellow";
  dom.style.height = "70px";
}

定义不同的按钮和策略的映射关系

定义负责消费策略的对象

js

const mapStrategyType = {
  blue() {
    return new StrategyBlue()
  },
  red() {
    return new StrategyRed()
  },
  green() {
    return new StrategyGreen()
  },
  purple() {
    return new StrategyPurple()
  },
  yellow() {
    return new StrategyYellow()
  },
}
// 负责使用策略的对象
function DomElement() {
  this.dom = "";
  this.strategy = "";
}
DomElement.prototype.setDom = function (dom) {
  this.dom = dom;
}
DomElement.prototype.setStrategy = function (strategy) {
  this.strategy = strategy;
}
DomElement.prototype.executeStrategy = function (strategy) {
  this.strategy.setStyle(this.dom);
}

完整代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    section {
      display: flex;
      padding: 10px;
    }
    button {
      margin: 0 10px;
      background-color: slateblue;
      outline: none;
      color: #fff;
      width: 100px;
      height: 100px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    div {
      width: 100px;
      height: 100px;
      margin: 50px auto;
      background-color: gray;
    }
  </style>
</head>
<body>
  <section>
    <button id="blue">蓝色 高度30</button>
    <button id="red">红色 高度40</button>
    <button id="green">绿色 高度50</button>
    <button id="purple">紫色 高度60</button>
    <button id="yellow">黄色 高度70</button>
  </section>
  <div>div</div>
  <script>
    const buttons = document.querySelectorAll("button");
    const div = document.querySelector("div");
    // 定义策略对象
    const StrategyBlue = function () { }
    const StrategyRed = function () { }
    const StrategyGreen = function () { }
    const StrategyPurple = function () { }
    const StrategyYellow = function () { }
    // 定义策略映射关系
    const mapStrategyType = {
      blue() {
        return new StrategyBlue()
      },
      red() {
        return new StrategyRed()
      },
      green() {
        return new StrategyGreen()
      },
      purple() {
        return new StrategyPurple()
      },
      yellow() {
        return new StrategyYellow()
      },
    }
    StrategyBlue.prototype.setStyle = function (dom) {
      dom.style.backgroundColor = "blue";
      dom.style.height = "30px";
    }
    StrategyRed.prototype.setStyle = function (dom) {
      dom.style.backgroundColor = "red";
      dom.style.height = "40px";
    }
    StrategyGreen.prototype.setStyle = function (dom) {
      dom.style.backgroundColor = "green";
      dom.style.height = "50px";
    }
    StrategyPurple.prototype.setStyle = function (dom) {
      dom.style.backgroundColor = "purple";
      dom.style.height = "60px";
    }
    StrategyYellow.prototype.setStyle = function (dom) {
      dom.style.backgroundColor = "yellow";
      dom.style.height = "70px";
    }
    // 负责使用策略的对象
    function DomElement() {
      this.dom = "";
      this.strategy = "";
    }
    DomElement.prototype.setDom = function (dom) {
      this.dom = dom;
    }
    DomElement.prototype.setStrategy = function (strategy) {
      this.strategy = strategy;
    }
    DomElement.prototype.executeStrategy = function (strategy) {
      this.strategy.setStyle(this.dom);
    }
    // 负责消费策略的实例
    const domelement = new DomElement();
    buttons.forEach(button => button.addEventListener('click', function (e) {
      const idType = button.id;
      const strategy = mapStrategyType[idType]();// 根据type返回对应策略实例
      // 重点代码=======================
      domelement.setDom(div);// 设置要操作的dom
      domelement.setStrategy(strategy);// 设置策略
      domelement.executeStrategy();// 调用策略
      // 重点代码=======================
    }))
  </script>
</body>
</html>

解决方案 3 class

该版本使用 es6的class来替换面向对象的语法

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    section {
      display: flex;
      padding: 10px;
    }
    button {
      margin: 0 10px;
      background-color: slateblue;
      outline: none;
      color: #fff;
      width: 100px;
      height: 100px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    div {
      width: 100px;
      height: 100px;
      margin: 50px auto;
      background-color: gray;
    }
  </style>
</head>
<body>
  <section>
    <button id="blue">蓝色 高度30</button>
    <button id="red">红色 高度40</button>
    <button id="green">绿色 高度50</button>
    <button id="purple">紫色 高度60</button>
    <button id="yellow">黄色 高度70</button>
  </section>
  <div>div</div>
  <script>
    const buttons = document.querySelectorAll("button");
    const div = document.querySelector("div");
    // 定义策略对象
    class StrategyBlue {
      setStyle(dom) {
        dom.style.backgroundColor = "blue";
        dom.style.height = "30px";
      }
    }
    class StrategyRed {
      setStyle(dom) {
        dom.style.backgroundColor = "red";
        dom.style.height = "40px";
      }
    }
    class StrategyGreen {
      setStyle(dom) {
        dom.style.backgroundColor = "green";
        dom.style.height = "50px";
      }
    }
    class StrategyPurple {
      setStyle(dom) {
        dom.style.backgroundColor = "purple";
        dom.style.height = "60px";
      }
    }
    class StrategyYellow {
      setStyle(dom) {
        dom.style.backgroundColor = "yellow";
        dom.style.height = "70px";
      }
    }
    // 定义策略映射关系
    const mapStrategyType = {
      blue() {
        return new StrategyBlue()
      },
      red() {
        return new StrategyRed()
      },
      green() {
        return new StrategyGreen()
      },
      purple() {
        return new StrategyPurple()
      },
      yellow() {
        return new StrategyYellow()
      },
    }
    // 负责使用策略的对象
    class DomElement {
      constructor() {
        this.dom = "";
        this.strategy = "";
      }
      setDom(dom) {
        this.dom = dom;
      }
      setStrategy(strategy) {
        this.strategy = strategy;
      }
      executeStrategy = function (strategy) {
        this.strategy.setStyle(this.dom);
      }
    }
    // 负责消费策略的实例
    const domelement = new DomElement();
    buttons.forEach(button => button.addEventListener('click', function (e) {
      const idType = button.id;
      const strategy = mapStrategyType[idType]();// 根据type返回对应策略实例
      // 重点代码=======================
      domelement.setDom(div);// 设置要操作的dom
      domelement.setStrategy(strategy);// 设置策略
      domelement.executeStrategy();// 调用策略
      // 重点代码=======================
    }))
  </script>
</body>
</html>

优化 神奇canvas 实现魔法摄像头的代码

传送门

可以看到，而已根据自身项目情况来考虑使用哪个版本的策略模式 以下提供优化后的代码

<!DOCTYPE html>
<html>
<head>
  <title>Canvas Demo</title>
  <style>
    button {
      border-radius: 10px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      overflow: hidden;
      user-select: none;
      outline: none;
      border: none;
      padding: 16px;
      background-color: #1d93ab;
      color: #fff;
    }
    button:focus {
      background-color: #e88f21
    }
  </style>
</head>
<body>
  <div>
    <button data-type="gray">反转</button>
    <button data-type="blackwhite">黑白</button>
    <button data-type="brightness">亮度</button>
    <button data-type="sepia">复古</button>
    <button data-type="redMask">红色</button>
    <button data-type="greenMask">绿色</button>
    <button data-type="blueMask">蓝色</button>
    <button data-type="opacity">透明</button>
    <button data-type="mosaic">马赛克</button>
    <button data-type="linearGradient">渐变</button>
    <button id="takePhoto">拍摄</button>
  </div>
  <video id="videoElement" autoplay></video>
  <canvas id="canvasElement"></canvas>
  <script>
    // 获取视频元素和画布元素
    const video = document.getElementById('videoElement');
    const canvas = document.getElementById('canvasElement');
    const ctx = canvas.getContext('2d');
    const buttons = document.querySelectorAll("button[data-type]");
    const takePhoto = document.querySelector("#takePhoto")// 截图 按钮
    let drawType = ""
    // 当视频元素加载完成后执行
    video.addEventListener('loadedmetadata', function () {
      // 设置画布大小与视频尺寸相同
      canvas.width = video.videoWidth;
      canvas.height = video.videoHeight;
    });
    // 操作类型
    const editType = {
      dataTypeList: ["gray", "blackwhite", "brightness", "sepia", "redMask", "greenMask", "blueMask", "opacity", "linearGradient"],
      // 后续继续补充
    }
    const handleData = {
      gray(data) {  // 反转
        for (let i = 0; i < data.length; i += 4) {
          data[i + 0] = 255 - data[i + 0];
          data[i + 1] = 255 - data[i + 1];
          data[i + 2] = 255 - data[i + 2];
        }
        return data
      },
      blackwhite(data) {
        for (let i = 0; i < data.length; i += 4) {
          const average = (data[i + 0] + data[i + 1] + data[i + 2] + data[i + 3]) / 3;
          data[i + 0] = average;//红
          data[i + 1] = average; //绿
          data[i + 2] = average; //蓝
        }
        return data
      },
      brightness(data) {
        for (let i = 0; i < data.length; i += 4) {
          const a = 50;
          data[i + 0] += a;
          data[i + 1] += a;
          data[i + 2] += a;
        }
        return data
      },
      sepia(data) {
        for (let i = 0; i < data.length; i += 4) {
          const r = data[i + 0];
          const g = data[i + 1];
          const b = data[i + 2];
          data[i + 0] = r * 0.39 + g * 0.76 + b * 0.18;
          data[i + 1] = r * 0.35 + g * 0.68 + b * 0.16;
          data[i + 2] = r * 0.27 + g * 0.53 + b * 0.13;
        }
        return data
      },
      redMask(data) {
        for (let i = 0; i < data.length; i += 4) {
          const r = data[i + 0]
          const g = data[i + 1]
          const b = data[i + 2]
          const average = (r + g + b) / 3
          data[i + 0] = average
          data[i + 1] = 0
          data[i + 2] = 0
        }
        return data
      },
      greenMask(data) {
        for (let i = 0; i < data.length; i += 4) {
          const r = data[i + 0]
          const g = data[i + 1]
          const b = data[i + 2]
          const average = (r + g + b) / 3
          data[i + 0] = 0
          data[i + 1] = average
          data[i + 2] = 0
        }
        return data
      },
      blueMask(data) {
        for (let i = 0; i < data.length; i += 4) {
          const r = data[i + 0]
          const g = data[i + 1]
          const b = data[i + 2]
          const average = (r + g + b) / 3
          data[i + 0] = 0
          data[i + 1] = 0
          data[i + 2] = average
        }
        return data
      },
      opacity(data) {
        for (let i = 0; i < data.length; i += 4) {
          data[i + 3] = data[i + 3] * 0.3;
        }
        return data
      },
      linearGradient(data) {
        for (let i = 0; i < data.length; i += 4) {
          const x = (i / 4) % canvas.width; // 当前像素的 x 坐标
          const y = Math.floor(i / (4 * canvas.width)); // 当前像素的 y 坐标
          // 计算当前像素的颜色值
          const r = x / canvas.width * 255; // 红色分量
          const g = y / canvas.height * 255; // 绿色分量
          const b = 128; // 蓝色分量
          const a = 100; // 不透明度
          // 设置当前像素的颜色值
          data[i] = r; // 红色分量
          data[i + 1] = g; // 绿色分量
          data[i + 2] = b; // 蓝色分量
          data[i + 3] = a; // 不透明度
        }
        return data
      },
      mosaic(ctx, canvas) {
        ctx.imageSmoothingEnabled = false; // 禁用图像平滑处理
        const tileSize = 10; // 马赛克块的大小
        // 缩小马赛克块
        ctx.drawImage(canvas, 0, 0, canvas.width, canvas.height, 0, 0, canvas.width / tileSize, canvas.height / tileSize);
        // 放大回原来的大小
        ctx.drawImage(canvas, 0, 0, canvas.width / tileSize, canvas.height / tileSize, 0, 0, canvas.width, canvas.height);
      },
    }
    // 在每一帧绘制视频画面到画布上
    function drawFrame() {
      ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
      const imageObj = ctx.getImageData(0, 0, canvas.width, canvas.height);
      if (editType.dataTypeList.includes(drawType)) {
        imageObj.data = handleData[drawType](imageObj.data);
        ctx.putImageData(imageObj, 0, 0);
      } else if (drawType === "mosaic") {
        // 马赛克
        handleData[drawType](ctx, canvas);
      }
      requestAnimationFrame(drawFrame);
      // setTimeout(drawFrame, 1000);
    }
    // 检查浏览器是否支持 getUserMedia API
    if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
      // 请求访问摄像头
      navigator.mediaDevices.getUserMedia({ video: true })
        .then(function (stream) {
          // 将视频流绑定到视频元素上
          video.srcObject = stream;
          // 开始绘制视频画面到画布上
          requestAnimationFrame(drawFrame);
        })
        .catch(function (error) {
          console.error('无法访问摄像头:', error);
        });
    } else {
      console.error('浏览器不支持 getUserMedia API');
    }
    buttons.forEach(button => {
      button.addEventListener("click", function (e) {
        drawType = e.target.dataset.type;
      })
    })
    takePhoto.addEventListener('click', function (e) {
      // 绘制原始 Canvas 的内容到新的 Canvas 上
      ctx.drawImage(canvas, 0, 0, canvas.width, canvas.height);
      // 将内容转换为数据 URL
      const dataURL = canvas.toDataURL();
      // 创建一个 <a> 元素并设置属性
      const link = document.createElement('a');
      link.href = dataURL;
      link.download = 'screenshot.png'; // 设置要保存的文件名
      // 模拟点击 <a> 元素来触发下载
      link.click();
    })
  </script>
</body>
</html>

文章标签：
JavaScript
前端开发
算法
关系型数据库
设计模式
万少！
目录
相关文章
如夜了我衣衫太薄便归家靠路灯
|
4月前
|
设计模式 存储 JavaScript
5种常见设计模式讲解（javascript篇）
5种常见设计模式讲解（javascript篇）
如夜了我衣衫太薄便归家靠路灯
38 1
夏天49597
|
5月前
|
设计模式 JavaScript 前端开发
JavaScript进阶 - JavaScript设计模式
【7月更文挑战第7天】在软件工程中，设计模式是解决常见问题的标准解决方案。JavaScript中的工厂模式用于对象创建，但过度使用可能导致抽象过度和缺乏灵活性。单例模式确保唯一实例，但应注意避免全局状态和过度使用。观察者模式实现了一对多依赖，需警惕性能影响和循环依赖。通过理解模式的优缺点，能提升代码质量。例如，工厂模式通过`createShape`函数动态创建对象；单例模式用闭包保证唯一实例；观察者模式让主题对象通知多个观察者。设计模式的恰当运用能增强代码可维护性。
夏天49597
85 0
非同质前端札记
|
设计模式 JavaScript 前端开发
JavaScript程序设计模式小技巧——策略模式，快看快用！！！（下）
JavaScript程序设计模式小技巧——策略模式，快看快用！！！（下）
非同质前端札记
53 1
非同质前端札记
|
设计模式 算法 JavaScript
JavaScript程序设计模式小技巧——策略模式，快看快用！！！（上）
JavaScript程序设计模式小技巧——策略模式，快看快用！！！（上）
非同质前端札记
71 0
yma16
|
缓存 JavaScript
javaScript_单例模式
javaScript_单例模式
yma16
63 0
熊的猫
|
设计模式 前端开发 JavaScript
常见 JavaScript 设计模式 — 原来这么简单（二）
常见 JavaScript 设计模式 — 原来这么简单
熊的猫
103 0
熊的猫
|
设计模式 存储 JavaScript
常见 JavaScript 设计模式 — 原来这么简单（三）
常见 JavaScript 设计模式 — 原来这么简单
熊的猫
63 0
熊的猫
|
设计模式 JavaScript 前端开发
常见 JavaScript 设计模式 — 原来这么简单（一）
常见 JavaScript 设计模式 — 原来这么简单
熊的猫
119 0
赵小左
|
JavaScript 前端开发
JavaScript之观察者模式
JavaScript之观察者模式
赵小左
167 0
JavaScript之观察者模式
言程序
|
设计模式 存储 JavaScript
23种JavaScript设计模式
23种JavaScript设计模式
言程序
93 0

热门文章

最新文章

  • 1
    Hive之数据倾斜的原因和解决方法
  • 2
    【Java】留下没有基础眼泪的面试题
  • 3
    四大触点，教你从“用户视角”构建数据分析体系
  • 4
    CentOS7 yum的一次报错" 14: curl#56 - "Recv failure: Connection reset by peer" "
  • 5
    [软件工程导论(第六版)]第5章 总体设计（课后习题详解）
  • 6
    同步、异步、阻塞、非阻塞
  • 7
    ArcEngine控制台应用程序
  • 8
    perl学习笔记(10)
  • 9
    新疆电信新疆联通签网络合作协议
  • 10
    epoll是如何监控多个描述符及如何获得通知(2)
  • 1
    《C++数据降维之道：PCA 与 t - SNE 助力信息留存》
    38
  • 2
    「Mac畅玩鸿蒙与硬件44」UI互动应用篇21 - 随机励志语录生成器
    53
  • 3
    《C++赋能智能摄像头：开启实时视频分析新纪元》
    41
  • 4
    MV-Adapter：上交大、北航和 VAST 等联合开源多视图一致图像生成模型，将预训练的文生图扩散模型转为多视图生成器
    47
  • 5
    《C++与 BLAS、LAPACK：加速人工智能算法的线性代数秘籍》
    42
  • 6
    Manga Image Translator：开源的漫画文字翻译工具，支持多语言翻译并嵌入原图，保持漫画的原始风格和布局
    33
  • 7
    NodeTool：AI 工作流可视化构建器，通过拖放节点设计复杂的工作流，集成 OpenAI 等多个平台
    34
  • 8
    《C++与 Armadillo：线性代数助力人工智能算法简化之路》
    24
  • 9
    ColorFlow：腾讯和清华大学联合推出的图像序列着色模型，通过参考图像的颜色对黑白漫画进行着色生成彩色漫画
    35
  • 10
    《C++与 ONNX：构建跨平台推理引擎的智慧融合》
    22

    • 相关课程

    更多
  • JavaScript入门与实战

    • 相关电子书

    更多
  • JavaScript面向对象的程序设计
  • Javascript中的对象
  • JavaScript异步编程
    • 下一篇
    阿里云oss存储简介和如何使用