分类前端技术下的文章

2024-08-18

Vue 3 是 Vue.js 框架的下一个主要版本，它引入了许多新特性和改进。

新特性：

Composition API: 使用 setup 函数来组合逻辑，而不是使用 mixins 和 extends。
Fragment, Teleport, Suspense: 提供了新的基础组件来处理片段、传送和异步渲染。
增强的TS支持: 更好地支持TypeScript，提供更好的类型推断和自动完成。
重构的虚拟DOM: 更快的渲染速度和更小的包体积。
新的生命周期钩子: 更简洁的生命周期钩子，如 onMounted 替代 mounted。
其他改进：如更新优化、服务端渲染改善、工具改进等。

安装Vue 3：

使用npm或yarn安装Vue 3。




npm install vue@next
# or
yarn add vue@next

创建Vue 3项目：

使用Vue CLI创建Vue 3项目。




npm install -g @vue/cli
vue create my-vue3-app
# 选择 Vue 3 版本

简单示例代码：




<template>
  <div>{{ message }}</div>
</template>
 
<script>
import { defineComponent, ref } from 'vue';
 
export default defineComponent({
  setup() {
    const message = ref('Hello Vue 3!');
    return { message };
  }
});
</script>

这个简单的示例展示了Vue 3中的Composition API的基本使用，通过ref函数创建一个响应式的数据。

Chart.js 和echarts.js 对比

2024-08-18

Chart.js 和 ECharts 都是流行的开源图表库，但它们有一些主要区别：

使用方式：Chart.js 更加简单直观，提供了基于画布（Canvas）的图表。而 ECharts 提供了更多高级功能，它可以运行在浏览器和 Node.js 环境中。
图表类型：ECharts 提供的图表类型更加丰富，包括柱状图、折线图、饼图、地图等，并且支持更复杂的交互和动画。Chart.js 在这方面可能缺少一些特色图表。
社区支持：ECharts 在 GitHub 上有更活跃的社区，提供了更多的例子和教程。Chart.js 的社区相对较小，但它的文档更为直接和简洁。
更新频率：ECharts 发布新版本的频率可能会更高，而 Chart.js 可能会更稳定一些。
许可证：ECharts 使用的是 MIT 许可证，而 Chart.js 使用的是 Apache 2.0 许可证。

对于选择哪一个库，你需要考虑你的项目需求和偏好。如果你需要一个包含多种图表类型和复杂交互的库，ECharts 可能更适合。如果你更关注简单易用和控制度，Chart.js 可能是更好的选择。

Js获取Url地址参数的几种方法

2024-08-18

在JavaScript中，获取URL地址参数可以通过以下几种方法实现：

使用window.location.search获取URL中的查询字符串，然后通过URLSearchParams对象解析参数。




const params = new URLSearchParams(window.location.search);
const paramValue = params.get('paramName'); // 替换paramName为你想获取的参数名称

使用正则表达式手动解析查询字符串。




function getQueryParam(param) {
  const search = window.location.search.substring(1); // 获取URL查询字符串
  const params = search.split('&'); // 分割成单个参数
 
  for (let i = 0; i < params.length; i++) {
    const pair = params[i].split('='); // 分割键值对
    if (decodeURIComponent(pair[0]) === param) { // 若找到匹配的键
      return decodeURIComponent(pair[1] || ''); // 返回其值
    }
  }
  return null; // 未找到则返回null
}
 
const paramValue = getQueryParam('paramName'); // 替换paramName为你想获取的参数名称

使用现代JavaScript库，如jQuery，可以使用其提供的$.param()函数序列化参数对象，或者$.ajax的data选项发送GET请求时解析查询参数。

以上方法可以根据实际需求选择使用。

JS中的异步async-await（秒懂异步编程模式）

2024-08-18




// 使用async/await简化Promise链式调用
async function fetchUserData() {
  try {
    const userId = await getUserId();
    const userDetails = await getUserDetails(userId);
    console.log(userDetails);
  } catch (error) {
    console.error('An error occurred:', error);
  }
}
 
// 模拟异步操作返回Promise
function getUserId() {
  return new Promise((resolve) => {
    setTimeout(() => resolve('user123'), 1000);
  });
}
 
function getUserDetails(userId) {
  return new Promise((resolve) => {
    setTimeout(() => resolve({ userId, name: 'John Doe' }), 1000);
  });
}
 
// 调用异步函数
fetchUserData();

这段代码展示了如何使用async/await来简化Promise的链式调用。通过将Promise的then和catch方法替换为async/await语法，代码变得更加直观和易读。异步操作（例如获取用户ID和用户详情）是通过返回Promise来进行的，然后使用await关键字来暂停执行，直至Promise解决。错误处理是通过在函数周围添加try/catch块来实现的。

js如何调用外部js的方法,调用外部js文件函数

2024-08-18

在JavaScript中，要调用一个外部JS文件中的方法，你需要先确保该文件已经被加载。这通常通过在HTML中使用<script>标签来引入外部JS文件实现。一旦文件加载完成，你就可以直接调用其中定义的方法。

例如，假设你有一个名为external.js的外部JavaScript文件，其中定义了一个函数sayHello():




// external.js
function sayHello() {
    console.log('Hello, world!');
}

要在另一个JS文件中调用这个函数，你需要先确保external.js已经被加载。这可以通过在HTML文件中添加<script>标签来实现：




<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="external.js"></script>
</head>
<body>
    <script>
        // 现在可以直接调用外部JS文件中定义的函数了
        sayHello();
    </script>
</body>
</html>

在上述index.html文件中，通过在<head>部分或<body>部分的<script>标签中引入external.js文件，确保了在执行sayHello()函数调用时，external.js已经加载完成。

如果你需要在页面加载完成后动态加载并执行外部JS文件中的函数，可以使用JavaScript的DOMContentLoaded事件或者load事件来确保在文档加载完成后再动态加载并调用外部JS文件的函数。

例如：




// main.js
document.addEventListener('DOMContentLoaded', (event) => {
    var script = document.createElement('script');
    script.src = 'external.js';
    script.onload = function() {
        sayHello(); // 调用外部JS文件中定义的函数
    };
    document.head.appendChild(script);
});

在上面的代码中，当DOM完全加载和解析完成后，我们动态创建一个<script>标签，指向external.js文件，并在文件加载完成后调用sayHello()函数。

【js】无限虚拟列表的原理及实现

2024-08-18




// 创建一个无限滚动的虚拟列表
function createInfiniteScrollList(options) {
  // 初始化参数
  const itemHeight = options.itemHeight || 20; // 每个条目的高度
  const start = options.start || 0; // 起始条目索引
  const total = options.total || 1000; // 总条目数
  const rowRenderer = options.rowRenderer; // 渲染函数
  const container = options.container; // 容器元素
 
  // 计算可视区域的高度
  const visibleHeight = container.offsetHeight;
 
  // 计算可以容纳的条目数
  const numItems = Math.ceil(visibleHeight / itemHeight);
 
  // 渲染函数，更新DOM
  function render() {
    for (let i = 0; i < numItems; i++) {
      const index = start + i;
      if (index < total) {
        rowRenderer(index, container);
      }
    }
  }
 
  // 初始渲染
  render();
 
  // 监听滚动事件
  container.addEventListener('scroll', () => {
    const scrollTop = container.scrollTop;
    const nextStart = Math.floor(scrollTop / itemHeight);
    if (nextStart !== start) {
      // 计算新的起始位置
      const newStart = Math.max(0, Math.min(nextStart, total - numItems));
      const diff = newStart - start;
 
      // 如果需要，移动所有条目来匹配新的起始位置
      const items = container.querySelectorAll('.list-item');
      for (let i = 0; i < items.length; i++) {
        items[i].style.transform = `translateY(${itemHeight * i + diff}px)`;
      }
 
      // 更新起始位置
      start = newStart;
    }
  });
}
 
// 使用示例
const listContainer = document.getElementById('list-container');
createInfiniteScrollList({
  container: listContainer,
  itemHeight: 50,
  total: 10000,
  rowRenderer: (index, container) => {
    const element = document.createElement('div');
    element.className = 'list-item';
    element.style.height = '50px';
    element.textContent = `Item ${index}`;
    container.appendChild(element);
  }
});

这段代码实现了一个无限滚动的虚拟列表。它通过监听滚动事件来动态渲染足够多的条目，以便在用户滚动时不会出现性能问题。每次滚动时，只需要移动容器内的条目来保持新的可视区域，而不是重新渲染整个列表。这种方法极大地提高了性能，并提供了流畅的滚动体验。

js保留两位小数最简单的6种方法

2024-08-18

在JavaScript中，要将数字保留两位小数，可以使用以下几种方法：

使用toFixed()方法：




let num = 123.456;
let fixedNum = num.toFixed(2); // "123.46" 返回字符串

使用Math.round()方法：




let num = 123.456;
let roundedNum = Math.round(num * 100) / 100; // 123.46

使用字符串模板：




let num = 123.456;
let strNum = `${num.toFixed(2)}`; // "123.46" 字符串

使用Number()和toFixed()结合：




let num = 123.456;
let numFixed = Number(num.toFixed(2)); // 123.46 返回数字

使用slice()方法：




let num = 123.456;
let slicedNum = Number(num.toString().slice(0, num.toString().indexOf('.') + 3)); // 123.46

使用正则表达式：




let num = 123.456;
let regexNum = Number(num.toString().replace(/(\d+\.\d{2})\d+/, '$1')); // 123.46

以上每种方法都可以将数字保留两位小数，选择合适的方法根据实际需求使用。注意，toFixed()方法返回的是字符串，如果需要得到数字类型的结果，可能需要额外处理。

2024-08-18

break 语句会立即退出当前正在执行的循环体，不再执行该循环体中后面的任何语句，也不会执行该循环体外的任何语句。

continue 语句会立即停止当前循环的执行，然后进入下一个循环迭代。它不会退出循环体，也不会影响其他循环。

return 语句会退出当前正在执行的函数，并可选地返回一个值。如果返回的是一个值，这个值就会成为函数调用的结果。如果函数的最后一个操作是return，那么可以省略return关键字。

示例代码：




// break 示例
for (let i = 0; i < 10; i++) {
  if (i === 5) {
    break; // 当 i 等于 5 时，跳出循环
  }
  console.log(i); // 输出 0 到 4
}
 
// continue 示例
for (let i = 0; i < 10; i++) {
  if (i === 5) {
    continue; // 当 i 等于 5 时，跳过当前迭代，继续下一个迭代
  }
  console.log(i); // 输出 0 到 4，然后跳过 5，再输出 6 到 9
}
 
// return 示例
function checkNumber(num) {
  for (let i = 0; i < 10; i++) {
    if (i === num) {
      return i; // 当 i 等于 num 时，返回 i 并退出函数
    }
  }
  return -1; // 如果 num 不存在于循环中，返回 -1
}
 
console.log(checkNumber(5)); // 输出 5

JS生成id的方法(多种解决方案)_js生成唯一id，看一遍就学会的人

2024-08-18

在JavaScript中，生成唯一ID的方法有多种。以下是几种常见的方法：

使用Date.now()或new Date()：




let id = 'id_' + Date.now();

或者




let id = 'id_' + new Date().getTime();

使用Math.random()：




let id = 'id_' + Math.random().toString(36).substring(2, 15);

结合Date.now()和Math.random()：




let id = 'id_' + Date.now() + Math.random().toString(36).substring(2, 15);

使用nanoid库（需要先安装nanoid）：




import { nanoid } from 'nanoid';
let id = nanoid();

使用uuid库（需要先安装uuid）：




const uuidv4 = require('uuid/v4');
let id = uuidv4();

每种方法都有其优点和适用场景。选择哪种方法取决于你的具体需求，例如需要ID的长度和唯一性要求。通常，结合Date.now()和Math.random()可以同时保证足够的唯一性和短的ID长度。

【React】React18 Hooks 之memo、useCallback

2024-08-18

在React18中，memo和useCallback是非常有用的工具，可以帮助优化React应用的性能。

memo是一个高阶组件，它可以防止在组件的props没有改变的情况下重新渲染组件。这可以帮助你避免在不需要的时候进行不必要的渲染，从而提高性能。




import React from 'react';
import { memo } from 'react';
 
const MyComponent = (props) => {
  // 你的组件逻辑
  return (
    <div>
      <h1>Hello, {props.name}</h1>
    </div>
  );
};
 
export default memo(MyComponent, (prevProps, nextProps) => {
  // 这里可以指定哪些props的变化会导致重新渲染
  return prevProps.name === nextProps.name;
});

useCallback是一个Hook，它返回一个记住的回调函数。当你传递props作为useCallback的依赖项，只有当依赖项改变的时候，回调函数才会更新。这可以帮助你避免在不需要的时候创建新的函数，从而提高性能。




import React, { useCallback } from 'react';
 
const MyComponent = (props) => {
  const memoizedCallback = useCallback(() => {
    console.log('This is a memoized callback');
  }, [props.someDependency]);
 
  return (
    <div>
      <button onClick={memoizedCallback}>Click me</button>
    </div>
  );
};
 
export default MyComponent;

在这个例子中，只有当props.someDependency改变的时候，memoizedCallback才会更新。这样可以防止在不需要的时候进行不必要的函数创建，从而提高性能。