前端开发之代理模式

介绍

代理模式是一种结构型设计模式,它通过为一个对象提供一个代理对象来控制对该对象的访问。代理对象可以在访问真实对象之前或之后添加一些额外的操作。

TypeScript 复制代码
class RealImg {
  fileName: string;
  constructor(fileName: string) {
    this.fileName = fileName;
  }
  disPlay() {
    this.loadFromDist()
    console.log("disPlay:", this.fileName)
  }
  private loadFromDist(){
    console.log("loading:", this.fileName)
  }
}

class ProxyImg{
  realImg: RealImg

  constructor(fileName: string) {
    this.realImg = new RealImg(fileName)
  }
  display(){
    this.realImg.disPlay()
  }
}
const proxyImg = new ProxyImg('xxx.png')
proxyImg.display()
// loading: xxx.png
// disPlay: xxx.png

符合设计原则:

  • 代理和目标分离,解耦
  • 代理可自行扩展
  • 目标也可自行扩展

场景

(1)DOM事件代理(委托)

事件绑定到父容器上,而非目标节点。适合目标较多或者数量不确定(入无限加载的瀑布流图片列表)

TypeScript 复制代码
<div id="container">
  <a href="#">a1</a>
  <a href="#">a2</a>
  <a href="#">a3</a>
  <a href="#">a4</a>
</div>

const container = document.getElementById("container");
if (container) {
  // DOM 事件代理(委托)
  container.addEventListener("click", (event) => {
    const target = event.target as Element;
    if (target.nodeName === "A") {
      alert(target.innerHTML);
    }
  });
}

(2)webpack devServer proxy

正向代理(客户端代理)。开发环境,前端请求服务器 API,代理本地服务器,或者 mock 接口。

编辑vite.config.ts

TypeScript 复制代码
server: {
  port: 3000,
  proxy: {
    "/api": {
      target: "http://localhost:8888",
      /** 是否启用websockets */
      ws: true,
      /** 是否允许跨域 */
      changeOrigin: true
    }
  },
}

编辑 index.ts

TypeScript 复制代码
<script lang="ts" setup>
import { onMounted } from "vue";
import axios from "axios";

onMounted(() => {
  document.getElementById("btn1")?.addEventListener("click", () => {
    axios.get("/api/getInfo").then((res) => {
      console.log("res", res);
    });
  });
});
</script>
<template>
  <div id="container">
    <button id="btn1">发送请求</button>
  </div>
</template>

编辑服务 server.js 文件,执行 node server.js

javascript 复制代码
import http from "http";
http
  .createServer(function (req, res) {
    if (req.url === "/api/getInfo") {
      res.end("info");
    } else {
      res.end("hello");
    }
  })
  .listen(8888);

启动前端服务后,访问 http://localhost:3000 点击"发送请求"

(3)Nginx 反向代理(服务端代理)

  1. 将上述 vite+typescript 前端项目打包成 dist(vite.config.ts 配置 base: "dist"),放入nginx的 www 目录。

  2. 配置nginx

bash 复制代码
server {
    listen       8080;
    server_name  localhost;
    #charset koi8-r;
    #access_log  logs/host.access.log  main;
    location / {
        root   html;
        index  index.html index.htm;
    }
    location /api {
        proxy_pass http://127.0.0.1:8888;
    }
}
  1. 启动 nginx
bash 复制代码
> brew services start nginx 
==> Successfully started `nginx` (label: homebrew.mxcl.nginx)
  1. 控制台执行 node server.js,启动上述 server.js 文件。

  2. 页面访问 http://localhost:8080/dist

相关推荐
百万蹄蹄向前冲1 小时前
Trae分析Phaser.js游戏《洋葱头捡星星》
前端·游戏开发·trae
朝阳5812 小时前
在浏览器端使用 xml2js 遇到的报错及解决方法
前端
GIS之路2 小时前
GeoTools 读取影像元数据
前端
ssshooter3 小时前
VSCode 自带的 TS 版本可能跟项目TS 版本不一样
前端·面试·typescript
Jerry3 小时前
Jetpack Compose 中的状态
前端
dae bal4 小时前
关于RSA和AES加密
前端·vue.js
柳杉4 小时前
使用three.js搭建3d隧道监测-2
前端·javascript·数据可视化
lynn8570_blog4 小时前
低端设备加载webp ANR
前端·算法
LKAI.5 小时前
传统方式部署(RuoYi-Cloud)微服务
java·linux·前端·后端·微服务·node.js·ruoyi
刺客-Andy5 小时前
React 第七十节 Router中matchRoutes的使用详解及注意事项
前端·javascript·react.js