每日三问-前端（第二十五期）

最新推荐文章于 2024-09-17 11:42:54 发布

伊泽瑞尔灬

最新推荐文章于 2024-09-17 11:42:54 发布

阅读量73

点赞数

文章标签：前端数学建模

本文链接：https://blog.csdn.net/qq_30811721/article/details/131255742

版权

先来回顾一下上期的问题及答案：

2023年6月16日

1. 问题：在前端开发中，什么是服务端渲染（Server-Side Rendering，SSR）和客户端渲染（Client-Side Rendering，CSR）？请比较它们的优缺点以及适用场景。

服务端渲染（Server-Side Rendering，SSR）和客户端渲染（Client-Side Rendering，CSR）是两种常见的前端渲染方式。

服务端渲染指的是在服务器端生成 HTML 内容，并将其发送到客户端进行展示。服务器端会将页面的初始状态和数据直接渲染成 HTML，然后将整个页面发送给客户端。客户端收到 HTML 后，只需要进行简单的静态资源加载和事件绑定，页面即可呈现。服务端渲染的主要优点是首次加载的速度快、对搜索引擎友好、对 SEO 优化效果好。但它也有一些缺点，如服务器压力大、前后端分离不彻底等。

客户端渲染是指在客户端浏览器中使用 JavaScript 动态生成页面内容。客户端接收到初始的 HTML 结构后，通过 JavaScript 请求数据并渲染页面。客户端渲染的主要优点是交互性强、前后端分离清晰、灵活性高。但它也面临着首次加载慢、对搜索引擎不友好等问题。

适用场景：

服务端渲染适用于对首屏加载速度要求较高、SEO 优化要求较高的场景，例如新闻网站、博客等。
客户端渲染适用于交互性较强、数据频繁变化、页面复杂度高的场景，例如大型应用程序、社交网络等。

代码示例：

服务端渲染示例（使用 Node.js 和 Express）：

// server.js
const express = require('express');
const app = express();

app.get('/', (req, res) => {
  const html = `
    <html>
      <head>
        <title>Server-Side Rendering</title>
      </head>
      <body>
        <h1>Hello, SSR!</h1>
      </body>
    </html>
  `;
  res.send(html);
});

app.listen(3000, () => {
  console.log('Server is running on port 3000');
});

客户端渲染示例：

<!-- index.html -->
<!DOCTYPE html>
<html>
  <head>
    <title>Client-Side Rendering</title>
  </head>
  <body>
    <div id="app"></div>
    <script src="main.js"></script>
  </body>
</html>

问题：介绍一下前端中的函数柯里化（Currying）是什么？它有什么作用和优势？请给出一个函数柯里化的示例。

函数柯里化（Currying）是一种将接受多个参数的函数转化为接受一个参数的函数序列的过程。通过函数柯里化，我们可以将原来接受多个参数的函数转化为一系列只接受一个参数的函数，每个函数返回一个新的函数，最终返回结果。函数柯里化的作用是可以部分应用函数，以创建更灵活的函数。

函数

柯里化的优势包括：

参数复用：通过柯里化，我们可以固定部分参数，生成一个新的函数，方便在不同场景下复用这些固定的参数。
延迟执行：柯里化可以延迟函数的执行，通过返回新的函数，可以在需要的时候再执行。

代码示例：

// 柯里化函数
function curry(fn) {
  return function curried(...args) {
    if (args.length >= fn.length) {
      return fn(...args);
    } else {
      return function (...nextArgs) {
        return curried(...args, ...nextArgs);
      };
    }
  };
}

// 原始函数
function add(a, b, c) {
  return a + b + c;
}

// 柯里化后的函数
const curriedAdd = curry(add);

console.log(curriedAdd(1)(2)(3)); // 输出 6
console.log(curriedAdd(1, 2)(3)); // 输出 6
console.log(curriedAdd(1)(2, 3)); // 输出 6

vue中，计算属性computed和监听watch有什么区别，应用场景是什么，各有什么优缺点。

在 Vue 中，计算属性（computed）和监听器（watch）都是用于观察数据变化并执行相应逻辑的方式，但它们有一些区别和应用场景。

计算属性（computed）：

计算属性是根据依赖的响应式数据动态生成的属性，具有缓存功能，只有依赖的响应式数据发生变化时才会重新计算。
计算属性适用于需要基于已有数据计算衍生数据的场景，例如根据商品价格和数量计算总价。
优点：简化模板中的计算逻辑，提高代码可读性和维护性；缓存计算结果，减少重复计算。
缺点：当计算属性依赖的响应式数据变化不频繁时，可能会造成缓存的计算结果浪费内存。

监听器（watch）：

监听器是用于观察特定数据的变化并执行回调函数的方式，可以执行更复杂的逻辑。
监听器适用于需要在数据变化时执行异步操作、复杂计算或触发其他操作的场景。
优点：更灵活地响应数据变化，可以执行异步操作、调用 API 或触发其他副作用。
缺点：在代码中需要显式声明监听器，增加了一定的代码复杂性。

代码示例：

<template>
  <div>
    <p>{{ totalPrice }}</p>
    <input v-model="price" />
    <input v-model="quantity" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      price: 0,
      quantity: 0,
    };
  },
  computed: {
    totalPrice() {
      return this.price * this.quantity;
    },
  },
  watch: {
    price(newPrice) {
      // 当 price变化时触发
      console.log('价格变化：', newPrice);
    },
    quantity(newQuantity) {
      // 当 quantity 变化时触发
      console.log('数量变化：', newQuantity);
    },
  },
};
</script>

在上述示例中，计算属性 totalPrice 基于 price 和 quantity 进行动态计算，每当 price 或 quantity 发生变化时，计算属性会自动更新并在模板中展示。而监听器 watch 用于监测 price 和 quantity 的变化，并执行相应的回调函数，可以在回调函数中处理其他逻辑，如发送请求或触发其他操作。

2023年6月17日

问题：在前端开发中，什么是单向数据流（One-Way Data Flow）和双向数据绑定（Two-Way Data Binding）？请比较它们的优缺点，并说明适用的场景。
问题：在前端开发中，什么是渐进式网页应用（Progressive Web Application，PWA）？请解释 PWA 的特点和优势，并举例说明它如何提供更好的用户体验。
问题：在前端开发中，什么是跨站点脚本攻击（Cross-Site Scripting，XSS）？请解释 XSS 的原理和常见的攻击方式，并提供一些防范 XSS 攻击的方法。

上面问题的答案会在第二天的公众号推文中公布，大家可以关注公众号：程序员每日三问，第一时间获得推送内容。