2023年4月

aspect-ratio是CSS的一个新属性,用于设置一个元素的宽高比。它可以用于代替使用padding或伪元素实现的宽高比技术,使代码更简洁、可读性更高,并且可以让我们更轻松地控制元素的宽高比。

aspect-ratio属性有两个值:一个数字,表示宽高比,和一个可选的关键字auto,表示元素的高度应该自动计算以匹配元素的宽度和宽高比。例如,aspect-ratio: 16/9表示元素的宽高比为16:9。

使用aspect-ratio时,可以像这样将其应用于任何具有宽度的元素:

.container {
  aspect-ratio: 16/9;
}

这将使容器元素保持一个16:9的宽高比。如果容器元素的宽度为100px,那么它的高度将自动计算为100px * (9 / 16) = 56.25px,从而保持16:9的宽高比。

需要注意的是,aspect-ratio是一个比较新的属性,目前还不是所有浏览器都支持,因此在使用时需要进行兼容性考虑。

在 Vue 中连接 WebSocket 可以使用 WebSocket 对象,也可以使用第三方库如 socket.io-client、vue-native-websocket 等。

使用原生 WebSocket 对象连接 WebSocket 时,可以在 Vue 组件中通过 created() 或 mounted() 钩子函数创建 WebSocket 对象并进行连接:

created() {
  const wsUrl = 'ws://localhost:3000';
  this.ws = new WebSocket(wsUrl);
  this.ws.onopen = this.handleOpen;
  this.ws.onmessage = this.handleMessage;
  this.ws.onclose = this.handleClose;
  this.ws.onerror = this.handleError;
},
methods: {
  handleOpen() {
    console.log('WebSocket connected');
  },
  handleMessage(event) {
    console.log(`WebSocket received message: ${event.data}`);
  },
  handleClose() {
    console.log('WebSocket closed');
  },
  handleError(error) {
    console.error('WebSocket error', error);
  },
},
beforeDestroy() {
  this.ws.close();
},

在上面的代码中,我们在 created() 钩子函数中创建了一个 WebSocket 对象,并注册了 onopen、onmessage、onclose、onerror 四个事件的回调函数。在组件销毁时我们需要手动关闭 WebSocket 连接,以避免内存泄漏。

当然,为了避免代码重复和管理 WebSocket 连接状态,也可以把连接 WebSocket 的逻辑封装成一个 Vue 插件或 Mixin,供多个组件复用。

在封装axios时,可以通过添加请求拦截器和响应拦截器来处理不同域名的接口、参数和返回格式不统一的情况。在请求拦截器中,可以对请求做一些处理,如设置请求头、添加token等;在响应拦截器中,可以对响应做一些处理,如统一处理错误信息、返回的数据格式等。

以下是一个示例代码,假设有两个不同域名的接口,其中一个返回的数据格式是{status: 0, data: {}},另一个返回的数据格式是{code: 0, result: {}}:

import axios from 'axios'

const instance1 = axios.create({
  baseURL: 'http://api.example.com',
  timeout: 5000
})

const instance2 = axios.create({
  baseURL: 'http://api.anotherexample.com',
  timeout: 5000
})

// 添加请求拦截器
instance1.interceptors.request.use(
  config => {
    // 对请求做一些处理,如设置请求头、添加token等
    return config
  },
  error => {
    return Promise.reject(error)
  }
)

// 添加响应拦截器
instance1.interceptors.response.use(
  response => {
    const { status, data } = response.data
    // 统一处理返回的数据格式
    if (status === 0) {
      return data
    } else {
      return Promise.reject(response.data)
    }
  },
  error => {
    return Promise.reject(error)
  }
)

// 添加请求拦截器
instance2.interceptors.request.use(
  config => {
    // 对请求做一些处理,如设置请求头、添加token等
    return config
  },
  error => {
    return Promise.reject(error)
  }
)

// 添加响应拦截器
instance2.interceptors.response.use(
  response => {
    const { code, result } = response.data
    // 统一处理返回的数据格式
    if (code === 0) {
      return result
    } else {
      return Promise.reject(response.data)
    }
  },
  error => {
    return Promise.reject(error)
  }
)

export { instance1, instance2 }

在组件中使用时,可以根据不同的接口调用对应的实例:

import { instance1, instance2 } from './axios'

instance1.get('/api1/someEndpoint')
  .then(response => {
    console.log(response)
  })
  .catch(error => {
    console.log(error)
  })

instance2.post('/api2/someEndpoint', { someData: 'data' })
  .then(response => {
    console.log(response)
  })
  .catch(error => {
    console.log(error)
  })

这样就可以通过请求拦截器和响应拦截器来处理不同域名的接口、参数和返回格式不统一的情况。