【实例总结】前端八股文面试

综合实例

1. 后台管理权限鉴定方法有哪些？

在后台管理系统中，权限鉴定是非常重要的环节，它可以确保用户只能访问其被授权的功能和数据。

以下是一些常见的后台管理权限鉴定方法：

1）基于角色的访问控制（Role-Based Access Control，RBAC）

• 概念：
  • RBAC 将用户分配到不同的角色，每个角色具有特定的权限集合。系统根据用户所属的角色来确定其可以访问的资源和执行的操作。
• 实现步骤：
  • 定义角色：确定系统中的不同角色，如管理员、普通用户、编辑等。每个角色对应不同的权限级别。
  • 分配权限：为每个角色分配相应的权限，例如读取、写入、删除数据，访问特定页面等。
  • 用户分配角色：将用户与特定的角色进行关联。可以在用户注册或管理界面中进行角色分配。
  • 权限鉴定：在用户请求访问某个资源或执行某个操作时，系统检查用户所属的角色是否具有相应的权限。
• 示例：
  • 假设一个博客管理系统，有管理员、作者和读者三种角色。管理员可以管理所有文章和用户，作者可以创建、编辑和删除自己的文章，读者只能阅读文章。
  • 当用户登录后，系统根据其角色确定可以访问的页面和执行的操作。如果用户尝试访问超出其权限的页面，系统会显示错误信息或重定向到其他页面。

2）访问控制列表（Access Control List，ACL）

• 概念：
  • ACL 为每个资源（如文件、数据库记录、页面等）定义一个访问控制列表，其中列出了哪些用户或角色可以对该资源进行访问以及具体的访问权限。
• 实现步骤：
  • 定义资源：确定系统中的各种资源，如页面、数据表格、文件等。
  • 分配权限：为每个资源创建一个访问控制列表，指定哪些用户或角色可以对该资源进行访问以及具体的访问权限（如读取、写入、删除等）。
  • 权限鉴定：当用户请求访问某个资源时，系统检查该资源的访问控制列表，确定用户是否具有相应的权限。
• 示例：
  • 例如，在一个文件管理系统中，每个文件都有一个访问控制列表，指定哪些用户可以读取、写入或删除该文件。
  • 当用户尝试访问某个文件时，系统会检查该文件的访问控制列表，以确定用户是否具有相应的权限。

3）基于属性的访问控制（Attribute-Based Access Control，ABAC）

• 概念：
  • ABAC 根据用户的属性、资源的属性、环境条件和操作等多个因素来确定用户是否具有访问资源的权限。
• 实现步骤：
  • 定义属性：确定系统中涉及的各种属性，如用户属性（如用户 ID、角色、部门等）、资源属性（如资源类型、所有者、敏感性等）、环境属性（如时间、地点、设备等）和操作属性（如读取、写入、删除等）。
  • 制定策略：根据属性定义访问控制策略，例如“只有属于特定部门的用户在工作时间内可以访问敏感数据”。
  • 权限鉴定：当用户请求访问某个资源时，系统根据用户的属性、资源的属性、环境条件和操作等因素，评估是否符合访问控制策略。
• 示例：
  • 假设一个企业内部的文档管理系统，只有在特定项目组的用户在项目期间可以访问相关的文档。
  • 系统会根据用户的所属项目组、当前时间是否在项目期间等因素来确定用户是否具有访问文档的权限。

4）令牌（Token）和身份验证

• 概念：
  • 通过使用令牌（如 JSON Web Token，JWT）进行身份验证和授权。
  • 用户在登录后，服务器颁发一个包含用户信息和权限的令牌。
  • 客户端在后续的请求中携带该令牌，服务器验证令牌的有效性并根据其中的权限信息进行权限鉴定。
• 实现步骤：
  • 用户登录：用户提供用户名和密码进行登录。服务器验证用户身份后，生成一个包含用户信息和权限的令牌，并将其返回给客户端。
  • 客户端存储令牌：客户端（如浏览器）将令牌存储在本地（如使用 localStorage 或 Cookie）。
  • 请求携带令牌：在后续的请求中，客户端将令牌添加到请求头中，以便服务器进行身份验证和权限鉴定。
  • 服务器验证令牌：服务器接收到请求后，验证令牌的有效性。如果令牌有效，服务器可以从令牌中获取用户的信息和权限，并根据权限进行相应的处理。
• 示例：
  • 例如，在一个基于 RESTful API 的后台管理系统中，用户登录后，服务器返回一个 JWT 令牌。客户端在每次请求 API 时，将令牌添加到请求头的“Authorization”字段中。
  • 服务器在接收到请求后，验证令牌的有效性，并根据令牌中的权限信息确定用户是否可以访问特定的 API 资源。

2. 用户登录失效会返回怎么样的结果？

1）前端页面显示

• 提示信息：
  • 弹出一个提示框，告知用户“登录已失效，请重新登录”。
  • 在页面上显示一个明显的错误消息，例如“您的登录状态已过期，请重新登录以继续操作”。
• 重定向：
  • 将用户重定向到登录页面，以便用户重新登录。可以使用 JavaScript 的window.location.href进行重定向。
  • 例如：window.location.href = '/login';

2）后端 API 返回

• 状态码：
  • 返回一个特定的 HTTP 状态码，如 401（未授权）或 403（禁止访问），以表示用户登录失效。
  • 客户端可以根据状态码判断登录状态，并采取相应的处理措施。
• 错误消息：
  • 在 API 的响应中包含一个详细的错误消息，说明登录已失效的原因。例如：“登录令牌已过期，请重新登录”。
  • 客户端可以读取这个错误消息并在前端进行展示。

3）移动应用场景

• 推送通知：
  • 如果是移动应用，当登录失效时，可以通过推送通知提醒用户重新登录。
  • 例如：“您的登录已过期，请打开应用重新登录以继续使用。”
• 应用内提示：
  • 在移动应用的界面上显示一个提示，告知用户登录已失效，并提供一个按钮引导用户重新登录。

3.怎么样将配置项设置到 Echarts 中?

1）直接在初始化选项中设置

• 基本用法：
  • 在初始化 Echarts 图表时，可以直接将配置项对象作为参数传递给echarts.init方法。
  • 例如：

    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));
    var option = {
      title: {
        text: 'Echarts 示例'
      },
      tooltip: {},
      xAxis: {
        data: ['苹果', '香蕉', '橙子']
      },
      yAxis: {},
      series: [{
        name: '销量',
        type: 'bar',
        data: [12, 23, 15]
      }]
    };
    myChart.setOption(option);
    

• 动态更新：
  • 如果需要动态更新图表，可以直接修改配置项对象，然后调用setOption方法更新图表。
  • 例如：

    // 更新图表数据
    option.series[0].data = [20, 30, 25];
    myChart.setOption(option);
    

2）通过方法设置配置项

• setOption方法：
• setOption方法不仅可以用于初始化图表，还可以在任何时候用来更新图表的配置项。
• 例如：

  myChart.setOption({
    series: [{
      data: [30, 40, 35]
    }]
  });
  

• mergeOption方法：
• 如果只需要更新部分配置项，可以使用mergeOption方法。它会合并新的配置项到现有配置项中，而不是完全替换。
• 例如：

  myChart.mergeOption({
    series: [{
      data: [40, 50, 45]
    }]
  });
  

3）从外部获取配置项

• 从 JSON 文件加载：
  • 可以将配置项保存为一个 JSON 文件，然后通过 AJAX 请求加载这个文件，并将其设置到图表中。
  • 例如：

    $.getJSON('chartConfig.json', function(data) {
      myChart.setOption(data);
    });
    

• 从服务器端获取：
  • 在后端服务器上生成配置项数据，然后通过 API 接口返回给前端。前端使用 AJAX 或其他方式调用这个接口获取配置项，并设置到图表中。
  • 例如：

    $.ajax({
      url: '/api/getChartConfig',
      method: 'GET',
      success: function(data) {
        myChart.setOption(data);
      }
    });
    

4.在js中，数组中的数组项是一个对象，如何实现根据对象的某一属性进行排序？

1）使用 sort() 方法

sort() 方法会修改原数组并返回已排序的数组。要根据对象的属性进行排序，需要提供一个比较函数。

2）比较函数的实现

比较函数接收两个参数（数组中的两个对象），并返回一个数字：
如果返回值小于 0，a 会排在 b 之前。
如果返回值大于 0，b 会排在 a 之前。
如果返回值为 0，a 和 b 的顺序保持不变。

3）示例代码

假设有一个包含多个对象的数组，每个对象都有一个 age 属性，想要根据 age 进行升序排序。

let people = [ { name: "John", age: 25 }, { name: "Jane", age: 20 }, { name: "Mike", age: 30 } ]; 
// 根据 age 升序排序 
people.sort((a, b) => a.age - b.age); console.log(people); 
// 输出: [{ name: "Jane", age: 20 }, { name: "John", age: 25 }, { name: "Mike", age: 30 }]

4）字符串属性的排序

如果要根据对象的字符串属性（如 name）进行排序，可以在比较函数中使用字符串的 localeCompare 方法：

let people = [ { name: "John", age: 25 }, { name: "Jane", age: 20 }, { name: "Mike", age: 30 } ];
 // 根据 name 升序排序 
people.sort((a, b) => a.name.localeCompare(b.name)); 
console.log(people); 
// 输出: [{ name: "Jane", age: 20 }, { name: "John", age: 25 }, { name: "Mike", age: 30 }]

5）逆序排序

如果需要按照属性进行降序排序，可以反转比较函数的返回值：

// 根据 age 降序排序 
people.sort((a, b) => b.age - a.age); 
console.log(people); 
// 输出: [{ name: "Mike", age: 30 }, { name: "John", age: 25 }, { name: "Jane", age: 20 }]
	
var arr = [
					{"name":"JackeLove","age":20},
					{"name":"Uzi","age":25},
					{"name":"CloearLove","age":99},
					{"name":"Rookie","age":10},
					{"name":"Ming","age":22}
				]
	var newArrByStr = sortByStr(arr,"name")
	console.log("按name(字符串)排序：",newArrByStr)

	var newArrByInt = sortByInt(arr,"age")
	console.log("按age ( 数字 )排序：",newArrByInt)
	
	// 按类型为String的属性排序
	function sortByStr (array, key) {
      return array.sort(function (b, a) {
        var x = (a[key].substr(0, 1)).charCodeAt()
        var y = (b[key].substr(0, 1)).charCodeAt()
        return y - x
      })
    }
	// 按类型为Number的属性排序
	function sortByInt (array, key) {
      return array.sort(function (b, a) {
        var x = a[key]
        var y = b[key]
        return y - x
      })
    }

5.用原生js，css，html实现轮播图？如何控制下一张轮播图的显示？

1）HTML部分

首先，创建一个基础的HTML结构。包括轮播图的容器、图片列表、左右控制按钮及底部的指示点

<div id="carousel">
    <div class="carousel-images">
        <img src="img1.jpg" alt="Image 1" />
        <img src="img2.jpg" alt="Image 2" />
        <img src="img3.jpg" alt="Image 3" />
    div>
    <button id="prev">❮button>
    <button id="next">❯button>
    <div class="indicators">
        <span class="indicator active">span>
        <span class="indicator">span>
        <span class="indicator">span>
    div>
div>

2）CSS样式

接下来，使用CSS来设置轮播图的样式，使图片处于同一位置，并对轮播图进行布局。

#carousel {
    position: relative;
    width: 600px; /* 根据需要设置 */
    overflow: hidden;
}

.carousel-images {
    display: flex;
    transition: transform 0.5s ease;
}

.carousel-images img {
    width: 600px; /* 根据需要设置 */
    height: auto;
}

button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(255, 255, 255, 0.7);
    border: none;
    cursor: pointer;
}

#prev {
    left: 10px;
}

#next {
    right: 10px;
}

.indicators {
    text-align: center;
    padding-top: 10px;
}

.indicator {
    display: inline-block;
    width: 10px;
    height: 10px;
    background-color: gray;
    border-radius: 50%;
    margin: 0 5px;
    cursor: pointer;
}

.indicator.active {
    background-color: darkgray;
}

3）JavaScript部分

最后，实现JavaScript逻辑，控制轮播图的切换。可以通过增加和减少当前显示的图片索引来实现。

const images = document.querySelectorAll('.carousel-images img');
const prevButton = document.getElementById('prev');
const nextButton = document.getElementById('next');
const indicators = document.querySelectorAll('.indicator');

let currentIndex = 0;

function updateCarousel() {
    // 更新图片位置
    const offset = -currentIndex * 600; // 600是图片宽度
    document.querySelector('.carousel-images').style.transform = `translateX(${offset}px)`;

    // 更新指示点
    indicators.forEach((indicator, index) => {
        indicator.classList.toggle('active', index === currentIndex);
    });
}

nextButton.addEventListener('click', () => {
    currentIndex = (currentIndex + 1) % images.length; // 循环切换
    updateCarousel();
});

prevButton.addEventListener('click', () => {
    currentIndex = (currentIndex - 1 + images.length) % images.length; // 循环切换
    updateCarousel();
});

// 自动播放
setInterval(() => {
    currentIndex = (currentIndex + 1) % images.length; // 自动切换
    updateCarousel();
}, 3000); // 每3秒切换

6.脱离vue的情况下，如何把dom动态加载到页面？

• 在脱离 Vue 的情况下，可以使用原生 JavaScript 来动态加载 DOM 元素到页面中。
• 通过使用 DOM API，如 createElement、appendChild、insertBefore 等。

以下是一些常见的方法来动态加载 DOM 元素：

1）示例 1: 使用 createElement 和 appendChild

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动态加载DOMtitle>
head>
<body>
    <div id="app">
        <h1>动态加载DOM示例h1>
    div>
    <button id="loadButton">加载新元素button>

    <script>
        document.getElementById('loadButton').addEventListener('click', function () {
            // 创建新的元素
            const newElement = document.createElement('div');
            newElement.innerHTML = '
这是新加载的元素!
';
            newElement.style.border = '1px solid black';
            newElement.style.margin = '10px 0';
            newElement.style.padding = '10px';

            // 将新元素添加到页面中
            const appDiv = document.getElementById('app');
            appDiv.appendChild(newElement);
        });
    script>
body>
html>

2）示例 2: 动态加载多个元素

可以通过循环来添加多个元素：

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动态加载多个DOM元素title>
head>
<body>
    <div id="app">
        <h1>动态加载多个DOM元素示例h1>
    div>
    <button id="loadButton">加载新元素button>

    <script>
        document.getElementById('loadButton').addEventListener('click', function () {
            for (let i = 1; i <= 5; i++) {
                // 创建新的元素
                const newElement = document.createElement('div');
                newElement.innerHTML = `
这是新加载的元素 ${i}!`;
                newElement.style.border = '1px solid black';
                newElement.style.margin = '10px 0';
                newElement.style.padding = '10px';

                // 将新元素添加到页面中
                const appDiv = document.getElementById('app');
                appDiv.appendChild(newElement);
            }
        });
    script>
body>
html>

3）示例 3: insertAdjacentHTML。

如果需要插入 HTML 字符串（例如来自 AJAX 请求或模板），可以使用 insertAdjacentHTML 方法。

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动态插入HTMLtitle>
head>
<body>
    <div id="app">
        <h1>动态插入HTML示例h1>
    div>
    <button id="loadButton">加载新元素button>

    <script>
        document.getElementById('loadButton').addEventListener('click', function () {
            const appDiv = document.getElementById('app');
            appDiv.insertAdjacentHTML('beforeend', '
这是插入的HTML元素!
');
        });
    script>
body>
html>

创建元素：使用 document.createElement 创建新的 DOM 元素。
填充内容：设置新元素的内容、属性和样式。
添加元素：使用 appendChild、insertBefore 等方法将新元素添加到现有 DOM 中。
插入HTML：使用 insertAdjacentHTML 方法将 HTML 字符串直接插入 DOM。

7.如何实现组件循环调用自己？

1）在vue中：

• 指定组件名称
  为了让组件能够递归调用自身，最重要的一步是为该组件指定一个 name 属性。这个名称将用于在模板中引用组件自身。
• 创建递归组件
  在组件内的模板中，使用 name 属性引用组件。根据是否有条件（如数据的存在）来决定是否继续嵌套调用。
• 示例代码
  以下是一个简单的示例代码，展示如何实现一个递归组件（如树形结构）：

<template>
  <div>
    <h3>{{ item.name }}h3>
    
    <div v-if="item.children && item.children.length">
      <recursive-component
        v-for="child in item.children"
        :key="child.id"
        :item="child"
      />
    div>
  div>
template>

<script>
export default {
  name: 'RecursiveComponent', // 指定组件名称
  props: {
    item: {
      type: Object,
      required: true
    }
  }
}
script>

• 使用递归组件
  在父组件中，可以使用这个递归组件，并传入一个数据对象，该对象包含其子项：

<template>
  <div>
    <recursive-component :item="treeData" />
  div>
template>

<script>
import RecursiveComponent from './RecursiveComponent.vue';

export default {
  components: {
    RecursiveComponent
  },
  data() {
    return {
      treeData: {
        name: 'Root',
        children: [
          { id: 1, name: 'Child 1', children: [] },
          { 
            id: 2, 
            name: 'Child 2', 
            children: [
              { id: 3, name: 'Grandchild 1', children: [] }
            ] 
          }
        ]
      }
    };
  }
}
script>

• 条件判断
  在递归调用时一定要确保有条件判断，以避免无限递归。例如上面的代码中，v-if="item.children && item.children.length" 确保只有当当前项有子项时，才会继续递归调用自身。

通过赋予组件名称并在模板中使用这个名称调用自身，结合适当的条件判断，可以实现 Vue 组件的递归调用。这种方式特别适合用于展示层次结构的数据，如树形视图或目录结构等。

2）用原生html，css，js：

• 创建 HTML 结构
  首先，需要一个容器来放置动态生成的组件。例如，可以使用一个
  来作为列表的容器。

DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>循环渲染组件title>
    <style>
        .item {
            border: 1px solid #ccc;
            padding: 10px;
            margin: 5px;
        }
    style>
head>
<body>

<div id="item-container">div>

<script src="script.js">script>
body>
html>

• 准备数据
  在 script.js 中，定义一个数组来存储想要循环渲染的数据。

const items = [
    { id: 1, name: "Item 1" },
    { id: 2, name: "Item 2" },
    { id: 3, name: "Item 3" },
    { id: 4, name: "Item 4" }
];

• 动态生成组件
  接下来，使用循环遍历数组，创建每个组件，最后将其添加到HTML中。

const container = document.getElementById('item-container');

items.forEach(item => {
    const div = document.createElement('div');
    div.className = 'item';
    div.innerHTML = `${item.name}`;
    container.appendChild(div);
});

完整代码示例
将上述各部分结合在一起，形成一个完整的 HTML 文件。

DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>循环渲染组件title>
    <style>
        .item {
            border: 1px solid #ccc;
            padding: 10px;
            margin: 5px;
        }
    style>
head>
<body>

<div id="item-container">div>

<script>
    const items = [
        { id: 1, name: "Item 1" },
        { id: 2, name: "Item 2" },
        { id: 3, name: "Item 3" },
        { id: 4, name: "Item 4" }
    ];

    const container = document.getElementById('item-container');

    items.forEach(item => {
        const div = document.createElement('div');
        div.className = 'item';
        div.innerHTML = `${item.name}`;
        container.appendChild(div);
    });
script>

body>
html>

HTML结构：定义了一个用于显示组件的

。
CSS样式：为组件添加了一些基本样式，让每个项目有边框和间距。
JavaScript逻辑：通过forEach方法遍历items数组，为每个项目创建一个新的

，并设置其内容和样式，最后将其添加到容器中。

8.简要的说说，小程序的登录流程？

1）用户打开小程序

• 当用户首次打开小程序时，小程序会加载并显示欢迎页面或引导页面。

2）检查登录状态

• 小程序自动检查本地是否存储有有效的登录凭证（如 token）。
  • 如果有有效的登录凭证，小程序可能会尝试使用该凭证向服务器验证用户的登录状态。
  • 如果登录凭证有效，小程序可以直接进入已登录状态，显示相应的用户界面和功能。

3）用户操作触发登录请求

• 如果没有有效的登录凭证或登录凭证已过期，当用户进行需要登录才能进行的操作（如查看个人信息、下单等）时，小程序会提示用户进行登录。
• 用户点击登录按钮或触发登录操作后，小程序启动登录流程。

4）调用微信登录接口

• 小程序通过调用微信提供的登录接口wx.login()获取临时登录凭证（code）。
  • 这个临时登录凭证是由微信服务器生成的，用于后续向小程序的服务器换取用户的唯一标识和会话密钥。

5）将临时登录凭证发送到小程序服务器

• 小程序将获取到的临时登录凭证发送到自己的服务器端。
  • 通常会通过 AJAX 请求或其他网络通信方式将临时登录凭证和一些必要的参数（如小程序的 appId 等）发送到服务器的特定接口。

6）服务器端处理

• 小程序服务器接收到临时登录凭证后，会结合小程序的 appId 和 appSecret 等信息，向微信服务器的特定接口发送请求，以换取用户的唯一标识（openid）和会话密钥（session_key）。
• 服务器可以根据 openid 在数据库中查找是否已经存在该用户的记录。如果是新用户，可能会创建新的用户记录。
• 服务器生成自己的登录凭证（如 token），并将其与用户信息一起返回给小程序。

7）小程序存储登录凭证

• 小程序接收到服务器返回的登录凭证后，将其存储在本地存储（如wx.setStorageSync）中。
• 可以设置一定的过期时间，以便在凭证过期时重新进行登录流程。

8）登录成功后的操作

• 小程序根据登录成功后的用户信息，更新用户界面，显示用户的个性化内容和功能。
• 用户可以继续进行需要登录的操作。

9.适配不同端页面屏幕的流程

1）需求分析

• 确定目标设备：
  • 明确需要适配的设备类型，如桌面电脑、笔记本、平板电脑、手机等。
  • 不同设备的屏幕尺寸、分辨率、操作方式等都有所不同。
• 功能需求：
• 了解不同设备上页面需要实现的功能和用户体验要求。
• 例如，手机端可能更注重简洁的布局和快速的交互，而桌面端可能需要更丰富的内容展示和复杂的操作。

2）设计响应式布局

• 弹性布局：
  • 使用相对单位（如百分比、em、rem 等）代替固定像素单位来定义元素的尺寸和间距。这样可以使页面元素根据屏幕大小自动调整比例。
  • 例如，使用width: 50%来定义一个元素的宽度为父元素宽度的一半，而不是使用固定的像素值。
• 媒体查询：
  • 通过媒体查询可以根据不同的屏幕尺寸、设备方向等条件应用不同的 CSS 样式。
  • 例如：

    /* 当屏幕宽度小于 768px 时应用的样式 */
    @media screen and (max-width: 768px) {
      body {
        font-size: 14px;
      }
     .container {
        width: 100%;
      }
    }
    

• 流式布局：
  • 让页面元素按照流式布局排列，即元素会自动适应容器的宽度，避免出现水平滚动条。
  • 例如，使用float: left或display: inline-block等方式让元素在一行内排列，当空间不足时自动换行。

3）测试和优化

• 在不同设备上进行测试：
  • 使用真实的设备进行测试，包括各种尺寸的手机、平板电脑、笔记本和桌面电脑。
  • 可以使用浏览器的开发者工具模拟不同的设备尺寸和分辨率，但真实设备测试更能反映实际情况。
  • 检查页面在不同设备上的显示效果、交互性和性能。确保页面在不同设备上都能正常加载、布局合理、功能可用。
• 优化性能：
  • 对于移动设备，优化页面加载速度是关键。可以通过压缩图片、减少 HTTP 请求、使用懒加载等技术来提高性能。
  • 确保页面在不同设备上的交互响应速度快，避免出现卡顿和延迟。
• 持续改进：
  • 根据用户反馈和实际使用情况，不断改进和优化页面的适配效果。随着新设备的不断出现和技术的发展，持续关注前端适配的最新趋势和方法，及时更新和改进页面。

10.怎么处理列表的渲染？

1）使用原生 JavaScript

• 创建列表容器：
  • 在 HTML 中创建一个容器元素，如
    或
    ，用于容纳列表项。
    例如：
  • 数据准备：
    • 准备要渲染的列表数据，可以是一个数组或对象集合。
    • 例如：const data = ['Item 1', 'Item 2', 'Item 3'];
  • 循环渲染：
    • 使用循环遍历数据，为每个数据项创建相应的 HTML 元素并添加到列表容器中。
    • 例如：

      const listContainer = document.getElementById('myList');
      data.forEach(item => {
        const listItem = document.createElement('li');
        listItem.textContent = item;
        listContainer.appendChild(listItem);
      });
      

  2）使用模板字符串和 innerHTML

  • 创建模板：
    • 在 JavaScript 中定义一个模板字符串，包含列表项的 HTML 结构。
    • 例如：const listItemTemplate = '
    • ${item}
    ';
  • 数据准备和渲染：
    • 准备数据并使用模板字符串和innerHTML将列表项渲染到容器中。
    • 例如：

      const data = ['Item 1', 'Item 2', 'Item 3'];
      const listContainer = document.getElementById('myList');
      const listHTML = data.map(item => listItemTemplate.replace('${item}', item)).join('');
      listContainer.innerHTML = listHTML;
      

  3）使用前端框架（如 React、Vue.js）

  • 在 React 中：
    • 使用map函数遍历数据数组，为每个数据项创建一个组件或元素。
    • 例如：

      import React from 'react';
      
      const ListComponent = ({ data }) => (
        
      
          {data.map(item => (
            
      {item}
          ))}
        
      );
      
      export default ListComponent;
      

  • 在 Vue.js 中：
    • 使用v-for指令遍历数据数组，创建列表项。
    • 例如：

      <template>
        <ul>
          <li v-for="item in data" :key="item">{{ item }}li>
        ul>
      template>
      
      <script>
      export default {
        data() {
          return {
            data: ['Item 1', 'Item 2', 'Item 3']
          };
        }
      };
      script>
      

  4）性能优化

  • 虚拟列表：
    • 当列表数据非常庞大时，一次性渲染整个列表可能会导致性能问题。可以使用虚拟列表技术，只渲染可见部分的列表项，当用户滚动时动态加载和渲染其他部分。
    • 有一些现成的虚拟列表库可供使用，如react-virtualized和vue-virtual-scroll-list。
  • 懒加载：
    • 对于包含大量图片或其他资源的列表，可以使用懒加载技术，只在列表项进入可视区域时加载资源。
    • 可以使用Intersection Observer API 或懒加载库来实现懒加载。