缓存

概述

在前端开发中，Cookies、LocalStorage 和 SessionStorage 是三种常用的客户端存储机制，
它们用于在用户浏览器中存储数据。每种机制有不同的特性和用途，以下是它们的详细介绍：

Cookies

特点

存储数据：通常用于存储少量数据（每个 Cookie 最大 4KB）。
有效期：可以设置过期时间。如果未设置过期时间，Cookie 在浏览器关闭时失效。
数据共享：每次 HTTP 请求都会将所有相关的 Cookies 发送到服务器，因此可以在客户端和服务器之间共享数据。
安全性：可以设置 HttpOnly 和 Secure 属性，增加安全性。HttpOnly 阻止客户端脚本访问 Cookie，Secure 确保 Cookie 只在 HTTPS 协议下传输。

风不止About 2 min

闭包(closure)

闭包

概述

闭包是 JavaScript 中一个非常重要且常用的概念。它是指在一个函数内部定义的另一个函数，
该内部函数可以访问其外部函数的作用域（即使外部函数已经执行完毕）。
闭包可以用来创建私有变量、避免全局变量污染、实现封装等。

闭包的特性

函数内部定义函数：闭包是在一个函数内部定义的另一个函数。
函数可以访问其外部函数的变量：内部函数可以访问其外部函数的作用域中的变量。
变量的持久化：外部函数的变量在闭包中会被持久化，不会在外部函数执行完毕后销毁

风不止About 2 min

Responsive Design

响应式设计(Responsive Design)

你可以使用 document.body.clientWidth / 375 * 16 来根据设备的实际宽度动态计算字体大小。这种方法特别适用于移动设备页面，以 375 像素作为基准宽度（例如 iPhone 6/7/8 的屏幕宽度），然后根据实际的设备宽度动态调整字体大小。

实例代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Responsive Font Size</title>
  <style>
    body {
      font-family: Arial, sans-serif;
    }
    .content {
      padding: 20px;
    }
  </style>
</head>
<body>
  <div class="content">
    <h1>这是一个标题</h1>
    <p>这是一些文本内容，根据视口宽度自动调整字体大小。</p>
  </div>

  <script>
    function adjustFontSize() {
      const baseWidth = 375;
      const baseFontSize = 16; // 基准字体大小为 16px
      const currentWidth = document.body.clientWidth;
      const fontSize = (currentWidth / baseWidth) * baseFontSize;
      document.documentElement.style.fontSize = fontSize + 'px';
    }

    // 初次加载时调用
    adjustFontSize();

    // 监听窗口大小变化事件
    window.addEventListener('resize', adjustFontSize);
  </script>
</body>
</html>

风不止About 1 min

WeakMap and WeakSet

图片拖动及放大缩小

概述

`WeakMap` 和 `WeakSet` 是 ECMAScript 2015（ES6）中引入的两种新的数据结构。
它们的键（对于 WeakMap）或值（对于 WeakSet）是弱引用，即如果没有其他对这些对象的引用，
它们可以被垃圾回收。这对于避免内存泄漏特别有用。

WeakMap

WeakMap 是一个键值对的集合，其中的键必须是对象，而值可以是任意类型。
当键不再被其他引用持有时，键值对会自动被垃圾回收。

风不止About 1 min

Image Scale

图片拖动及放大缩小

概述

使用原生html,js，在指定区域内实现图片的放大缩小，以及拖动效果。
也可用canvas绘制，演示效果为canvas

代码演示

风不止About 1 min

Table Drag

表格拖拽功能

概述

使用原生html,js，实现表格拖动，动态改变列宽。

风不止About 3 min

Math()

JavaScript中的算术

概述

JavaScript程序使用语言提供的算术操作符来操作数值，包括表示加法的 + ，表示减法的 - ，表示乘法的 *，表示除法的 //和表示取模（做除后的余数）的 %。ES2016 增加了取幂的 **。
除了上述基本的算术操作符之外，JavaScript还通过Math对象的属性提供了一组函数和常量，以支持更复杂的数学计算。

风不止About 2 min