面试题：Solid.js事件监听与生命周期在复杂业务场景下的设计与实现

事件监听与生命周期关联设计

组件挂载阶段

在购物车组件挂载时（使用 onMount 钩子，这是Solid.js提供的用于组件挂载时执行副作用的函数），从后端获取购物车的初始数据。例如：

import { createSignal, onMount } from'solid-js';

const Cart = () => {
  const [cartItems, setCartItems] = createSignal([]);
  onMount(async () => {
    const response = await fetch('/api/cart');
    const data = await response.json();
    setCartItems(data);
  });
  return (
    // 购物车组件的渲染内容
  );
};

同时，为商品添加、删除、数量变更等DOM元素添加事件监听器。例如，对于添加商品按钮：

const addButton = document.getElementById('add - product - button');
addButton.addEventListener('click', () => {
  // 执行添加商品逻辑，如向购物车数组添加新商品，并更新后端数据
});

用户操作事件处理

商品添加：当用户点击添加商品按钮，在前端更新购物车数据（通过 setCartItems 更新 cartItems 信号），并发起POST请求到后端同步数据。

const addProduct = (product) => {
  setCartItems(prevItems => {
    const newItems = [...prevItems, product];
    fetch('/api/cart', {
      method: 'POST',
      headers: {
        'Content - Type': 'application/json'
      },
      body: JSON.stringify(newItems)
    });
    return newItems;
  });
};

商品删除：当用户点击删除按钮，从前端购物车数据中移除商品（更新 cartItems 信号），并发起DELETE请求到后端。

const deleteProduct = (productId) => {
  setCartItems(prevItems => {
    const newItems = prevItems.filter(item => item.id!== productId);
    fetch(`/api/cart/${productId}`, {
      method: 'DELETE'
    });
    return newItems;
  });
};

数量变更：当用户变更商品数量，更新前端购物车数据，并发起PUT请求到后端同步数量变化。

const changeQuantity = (productId, newQuantity) => {
  setCartItems(prevItems => {
    const newItems = prevItems.map(item => {
      if (item.id === productId) {
        item.quantity = newQuantity;
      }
      return item;
    });
    fetch(`/api/cart/${productId}`, {
      method: 'PUT',
      headers: {
        'Content - Type': 'application/json'
      },
      body: JSON.stringify({ quantity: newQuantity })
    });
    return newItems;
  });
};

组件更新阶段
- 当购物车数据由于用户操作或后端数据同步而更新时，Solid.js会自动重新渲染相关部分。无需额外手动处理更新生命周期，但可以在更新时执行一些副作用操作，例如重新计算总价等。
```
const [totalPrice, setTotalPrice] = createSignal(0);
createEffect(() => {
  const items = cartItems();
  const price = items.reduce((acc, item) => acc + item.price * item.quantity, 0);
  setTotalPrice(price);
});
```

组件卸载阶段

在组件卸载时（使用 onCleanup 钩子），移除在挂载阶段添加的事件监听器，防止内存泄漏。例如：

onCleanup(() => {
  const addButton = document.getElementById('add - product - button');
  addButton.removeEventListener('click', () => {
    // 添加商品逻辑
  });
});

兼容性问题及解决方案

事件监听兼容性

问题：在旧版本浏览器（如IE系列）中，addEventListener 方法存在兼容性问题，IE8及以下版本使用 attachEvent 方法。
解决方案：可以使用一个兼容函数来处理不同浏览器的事件绑定。

function addEvent(target, eventType, handler) {
  if (target.addEventListener) {
    target.addEventListener(eventType, handler);
  } else if (target.attachEvent) {
    target.attachEvent('on' + eventType, handler);
  }
}

然后在挂载阶段使用这个兼容函数添加事件监听器：

const addButton = document.getElementById('add - product - button');
addEvent(addButton, 'click', () => {
  // 执行添加商品逻辑
});

Fetch API兼容性
- 问题：旧版本浏览器（如IE系列）不支持Fetch API，它是现代浏览器提供的用于发起HTTP请求的接口。
- 解决方案：可以引入 whatwg - fetch 库进行polyfill。在项目中安装 whatwg - fetch 后，在入口文件（如 index.js）中引入：
```
import 'whatwg - fetch';
```
- 这样即使在不支持Fetch API的浏览器中，也能使用 fetch 发起请求，确保购物车数据与后端正常同步。
ES6+语法兼容性
- 问题：Solid.js使用了ES6+的语法（如箭头函数、async/await 等），一些旧版本浏览器可能无法解析这些语法。
- 解决方案：使用工具如Babel进行转码。在项目中安装Babel相关依赖（如 @babel/core, @babel/preset - env 等），并配置 .babelrc 文件：
```
{
  "presets": [
    [
      "@babel/preset - env",
      {
        "targets": {
          "browsers": ["ie >= 11"]
        }
      }
    ]
  ]
}
```
- 这样可以将ES6+语法转译为ES5语法，提高在旧版本浏览器中的兼容性。

星途面试题库

面试题：Solid.js事件监听与生命周期在复杂业务场景下的设计与实现

知识考点

面试题答案

事件监听与生命周期关联设计

兼容性问题及解决方案