1. 首页
  2. 分类
  3. javascript
JS中防抖函数介绍与实现（秒懂如何手写防抖）
System
2024-08-15
所有,javascript

防抖函数通常用于优化高频率触发的事件，如输入框的输入事件。防抖函数会延迟执行事件处理器，直到最后一次触发事件经过了设定的等待时间。这样可以减少不必要的计算或DOM操作。

以下是一个简单的防抖函数的实现：




function debounce(fn, wait) {
    let timeout = null;
    return function() {
        let context = this;
        let args = arguments;
        if (timeout) clearTimeout(timeout);
        let callNow = !timeout;
        timeout = setTimeout(() => {
            timeout = null;
        }, wait);
        if (callNow) fn.apply(context, args);
    };
}

使用方法：




// 假设handleSearch是需要防抖的事件处理函数
let handleSearch = debounce(function() {
    // 实际的事件处理逻辑
    console.log('搜索事件被触发');
}, 200); // 200毫秒内不会重复触发
 
// 添加事件监听
window.addEventListener('scroll', handleSearch);

当滚动窗口时，handleSearch函数会每200毫秒才会执行一次，从而减少了高频率的函数调用。

- 阅读更多 -
nodejs 获取服务器文件夹里面图片，并前端进行幻灯展示
System
2024-08-15
所有,javascript

在Node.js中，你可以使用fs模块来读取服务器上的图片文件，并使用Express框架来创建一个简单的API，前端可以通过Ajax请求这个API来获取图片并实现幻灯片展示。

以下是一个简单的示例：

  1. 安装Express：



npm install express
  1. 创建一个简单的服务器，并添加一个API来读取图片：



const express = require('express');
const fs = require('fs');
const path = require('path');
const app = express();
const port = 3000;
 
// 读取图片并返回二进制数据
app.get('/api/images', (req, res) => {
  const directoryPath = path.join(__dirname, 'images'); // 假设'images'是存放图片的文件夹
  fs.readdir(directoryPath, (err, files) => {
    if (err) {
      return res.status(500).send('Unable to scan images!');
    }
    const imageFiles = files.filter(file => file.endsWith('.jpg') || file.endsWith('.png'));
    const imageUrls = imageFiles.map(file => `http://localhost:3000/images/${file}`);
    res.json(imageUrls);
  });
});
 
// 静态文件服务
app.use('/images', express.static('images'));
 
app.listen(port, () => {
  console.log(`Server running on http://localhost:${port}`);
});
  1. 前端使用JavaScript和Ajax请求这个API，并展示幻灯片：



<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Image Slider</title>
<style>
  #slider {
    width: 640px;
    height: 480px;
    overflow: hidden;
  }
  img {
    width: 640px;
    height: 480px;
  }
</style>
</head>
<body>
<div id="slider"></div>
 
<script>
  function fetchImages() {
    fetch('/api/images')
      .then(response => response.json())
      .then(imageUrls => {
        const slider = document.getElementById('slider');
        imageUrls.forEach(url => {
          const img = document.createElement('img');
          img.src = url;
          slider.appendChild(img);
        });
      })
      .catch(error => console.error('Unable to fetch images.', error));
  }
 
  // 调用函数获取图片并创建幻灯片
  fetchImages();
</script>
</body>
</html>

在这个例子中，前端通过Ajax请求/api/images接口来获取图片列表，然后动态创建<img>元素并添加到幻灯片中。确保你的图片存放在服务器的images文件夹内，并且服务器运行这段Node.js代码。

- 阅读更多 -
使用exceljs导出luckysheet表格(合并，边框，行高，列宽，冻结，行列隐藏，筛选，图片）
System
2024-08-15
所有,javascript

要使用exceljs导出包含多种复杂设置（如合并单元格、边框、行高、列宽、冻结、行列隐藏以及筛选）的Luckysheet表格，您需要创建一个Excel工作簿，并使用exceljs提供的API来设置这些属性。以下是一个简化的示例代码，展示了如何使用exceljs创建一个包含这些常见设置的Excel工作表。




const ExcelJS = require('exceljs');
 
async function createLuckysheetWorkbook() {
  // 创建一个新的工作簿
  const workbook = new ExcelJS.Workbook();
  const worksheet = workbook.addWorksheet('LuckysheetSheet1');
 
  // 添加合并单元格
  worksheet.addMerges([{
    s: { r: 0, c: 0 }, // 起始单元格
    e: { r: 1, c: 1 }  // 结束单元格
  }]);
 
  // 设置边框
  worksheet.getRow(0).getCell(0).border = { top: { style: 'thin' }, left: { style: 'thin' }, bottom: { style: 'thin' }, right: { style: 'thin' } };
 
  // 设置行高和列宽
  worksheet.getRow(0).height = 20;
  worksheet.getColumn('A').width = 10;
 
  // 冻结窗格
  worksheet.views = [
    { state: 'frozen', xSplit: 1, ySplit: 1 }
  ];
 
  // 隐藏行列
  worksheet.getRow(2).hidden = true; // 隐藏第三行
  worksheet.getColumn(2).hidden = true; // 隐藏第三列
 
  // 添加筛选
  worksheet.autoFilter = {
    from: { row: 1, column: 'A' },
    to: { row: 5, column: 'B' }
  };
 
  // 添加图片
  const imageId = workbook.addImage({
    base64: '...', // 图片的Base64编码
    extension: 'png',
  });
  worksheet.addImage(imageId, {
    tl: { col: 0, row: 0 }, // Top left cell of the image
    br: { col: 1, row: 1 }, // Bottom right cell of the image
    editAs: 'oneCell'
  });
 
  // 写入文件
  await workbook.xlsx.writeFile('Luckysheet.xlsx');
}
 
createLuckysheetWorkbook();

请注意，上述代码是一个简化示例，并不包括所有Luckysheet支持的特性。您需要根据实际需求调整单元格坐标、样式和属性。此外，exceljs可能不支持所有Luckysheet的高级功能，如复杂的公式和更高级的条件格式。对于这些特性，您可能需要使用Luckysheet的专用导出功能或者寻找其他库来实现。

- 阅读更多 -
JS(JavaScript) 实现延迟等待（sleep方法）
System
2024-08-15
所有,javascript

在JavaScript中，实现延迟等待的最简单方式是使用setTimeout函数。以下是一个简单的sleep函数实现：




function sleep(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}
 
// 使用方法
async function delayedAction() {
  console.log('Start');
  await sleep(2000); // 等待2000毫秒
  console.log('Finished waiting');
}
 
delayedAction();

在这个例子中，sleep函数返回一个Promise对象，在指定的毫秒数之后，通过setTimeout函数调用Promise的resolve方法来解决该Promise。使用async/await可以使异步代码看起来像同步代码。

- 阅读更多 -
Vue3通透教程setup语法糖、computed函数、watch函数
System
2024-08-15
所有,javascript



<template>
  <div>
    <h1>Vue3 教程</h1>
    <p>{{ count }}</p>
    <button @click="increment">增加</button>
  </div>
</template>
 
<script>
import { ref, reactive, computed, watch, watchEffect } from 'vue';
 
export default {
  setup() {
    // 响应式状态
    const count = ref(0);
 
    // 响应式状态
    const state = reactive({
      count: 0,
    });
 
    // 计算属性
    const doubleCount = computed(() => count.value * 2);
 
    // 监听响应式状态变化
    watch(count, (newCount, oldCount) => {
      console.log(`count变化了，新的值为: ${newCount}, 旧的值为: ${oldCount}`);
    });
 
    // 监听响应式状态变化，使用函数
    watch(() => state.count, (newCount, oldCount) => {
      console.log(`state.count变化了，新的值为: ${newCount}, 旧的值为: ${oldCount}`);
    });
 
    // 监听响应式对象的变化
    watchEffect(() => {
      console.log(`state对象的变化导致的count值为: ${state.count}`);
    });
 
    // 方法
    function increment() {
      count.value++;
      state.count++;
    }
 
    // 返回到模板中使用的响应式数据和方法
    return {
      count,
      doubleCount,
      increment,
    };
  },
};
</script>

这个代码示例展示了如何在Vue3组件中使用setup函数来定义响应式数据、计算属性、监听响应式数据的变化以及定义方法。它演示了如何使用ref和reactive来创建响应式状态，如何使用computed来创建计算属性，以及如何使用watch和watchEffect来监听响应式状态的变化。

- 阅读更多 -
JS浮点数精度问题及高精度小数运算：BigNumber解决方案
System
2024-08-15
所有,javascript



// 引入big.js库
const BigNumber = require('bignumber.js');
 
// 使用BigNumber处理高精度小数运算
function calculateYield(deposit, rate, days) {
    // 创建BigNumber实例
    let depositBN = new BigNumber(deposit);
    let rateBN = new BigNumber(rate).dividedBy(100); // 把百分比转换为小数
    let daysBN = new BigNumber(days);
 
    // 执行计算
    let interest = depositBN.multipliedBy(rateBN).multipliedBy(daysBN).dividedBy(365);
 
    // 格式化输出结果
    return interest.toNumber(); // 如果需要JavaScript原生数值类型，可以使用toNumber()
}
 
// 示例：计算存款10000，年利率为5%，持有365天的情况下产生的收益
let yieldValue = calculateYield(10000, 5, 365);
console.log(yieldValue); // 使用toNumber()输出结果

这段代码使用了bignumber.js库来处理浮点数的高精度计算。通过创建BigNumber实例，并进行四舍五入的小数运算，可以有效避免JavaScript浮点数计算时的精度问题。这是一个实用的解决方案，对于需要进行复杂金融计算或科学计算的开发者来说非常有用。

- 阅读更多 -
ammo.js - 一个基于WebGL的3D物理引擎
System
2024-08-15
所有,javascript

Ammo.js 是一个用于WebGL的3D物理引擎，它可以模拟碰撞检测、碰撞响应、流体动力学等复杂的物理效果。以下是一个使用Ammo.js创建一个简单的物理世界的例子：




// 引入Ammo库
<script src="ammo.js"></script>
 
// 初始化Ammo，创建物理世界
function initAmmo() {
    // 创建Ammo.btDiscreteDynamicsWorld对象，这是物理世界的核心
    var collisionConfiguration = new Ammo.btSoftBodyRigidBodyCollisionConfiguration();
    var dispatcher = new Ammo.btCollisionDispatcher(collisionConfiguration);
    var broadphase = new Ammo.btDbvtBroadphase();
    var solver = new Ammo.btSequentialImpulseConstraintSolver();
    var world = new Ammo.btDiscreteDynamicsWorld(dispatcher, broadphase, solver, collisionConfiguration);
    world.setGravity(new Ammo.btVector3(0, -9.8, 0));
 
    // 创建一个形状，并为其指定几何数据和密度
    var shape = new Ammo.btBoxShape(new Ammo.btVector3(1, 1, 1));
    shape.setMargin(0.05);
 
    // 创建几何体，设置位置和角度
    var startTransform = new Ammo.btTransform();
    startTransform.setIdentity();
    startTransform.setOrigin(new Ammo.btVector3(0, 10, 0));
 
    // 创建带有形状和几何体的固体
    var mass = 1;
    var localInertia = new Ammo.btVector3(0, 0, 0);
    shape.calculateLocalInertia(mass, localInertia);
    var rbInfo = new Ammo.btRigidBodyConstructionInfo(mass, null, shape, localInertia);
    var body = new Ammo.btRigidBody(rbInfo);
 
    // 设置几何体的初始状态
    body.setWorldTransform(startTransform);
 
    // 将物体添加到物理世界中
    world.addRigidBody(body);
 
    // 模拟物理
    var timeStep = 1 / 60;
    var maxSubSteps = 3;
    return function stepPhysics(deltaTime) {
        var numSteps = Math.floor(deltaTime / timeStep);
        numSteps = numSteps < 1 ? 1 : numSteps > maxSubSteps ? maxSubSteps : numSteps;
        for (var i = 0; i < numSteps; ++i) {
            world.stepSimulation(timeStep, maxSubSteps, timeStep);
            // 更新物体位置等
        }
    };
}
 
// 在渲染循环中调用stepPhysics函数
function animate() {
    var step = initAmmo();
    function render() {
        step(1 / 60);
        requestAnimationFrame(render);
    }
    requestAnimationFrame(render);
}
 
animate();

这段代码首先创建了一个物理世界，然后定义了一个形状并为它创建了几何数据。接着，它设置了几何体的位置和密度，并创建了一个带有这些几何体的固体。最后，将这个物体添加到物理世界中，并

- 阅读更多 -
React官网力荐Next.js：为何它取代了Create-React-App？
System
2024-08-15
所有,javascript

Create-React-App（CRA）是一个命令行工具，用于设置新的React单页应用程序的脚手架。它提供了开箱即用的现代功能，例如自动化的生产构建过程、热模块重新加载、路由配置等。

Next.js是一个框架，它提供了一套完整的解决方案，用于构建服务器端渲染的web应用程序。它旨在为React应用提供更好的开发体验，包括生产环境的优化、路由预加载、静态导出等功能。

Create-React-App可能不适合需要SSR（服务器端渲染）或特定的开发工具链的应用程序。Next.js提供了一个更全面的解决方案，它可能会成为取代CRA的一种情况。

以下是Next.js官方文档中提供的一些理由，说明为何Next.js可能取代CRA：

  1. SSR（服务器端渲染）：Next.js提供了内置的SSR支持，可以提高搜索引擎优化（SEO）和更好的用户体验。
  2. 静态导出：Next.js可以将应用程序静态导出为HTML文件，适合部署到像Netlify或Gatsby这样的静态站点托管服务。
  3. 自动路由预加载：Next.js可以基于用户的浏览器预加载页面，以便更快地响应用户的操作。
  4. 生命周期函数：Next.js提供了更丰富的生命周期函数，例如getInitialProps，使组件可以更容易地处理服务器端数据。
  5. Plugins和工具链定制：Next.js允许使用插件扩展其功能，并允许开发者自定义工具链。
  6. 更新和维护：Next.js是由一个活跃的社区维护，并且随着React语言的发展而持续更新。

以下是一个基本的Next.js页面的例子：




// pages/index.js
function Home() {
  return <div>Hello World!</div>;
}
 
export default Home;

Next.js的安装和初始化：




npm install --save next react react-dom

创建一个pages/index.js文件，并添加上面的代码。

然后，通过运行next命令启动开发服务器：




npx next

访问http://localhost:3000，你将看到一个显示"Hello World!"的页面。

- 阅读更多 -
Three.JS教程5 threejs中的材质
System
2024-08-15
所有,javascript

在Three.js中，材质定义了对象表面的外观，例如颜色、纹理、反射率等。以下是创建材质的代码示例：




// 创建一个新的材质
var material = new THREE.MeshBasicMaterial({
    color: 0x00ff00, // 设置材质的颜色为绿色
    wireframe: false // 不使用线框模式
});
 
// 创建一个立方体，并应用刚创建的材质
var cubeGeometry = new THREE.BoxGeometry(1, 1, 1);
var cube = new THREE.Mesh(cubeGeometry, material);
 
// 将立方体添加到场景中
scene.add(cube);

在这个例子中，我们创建了一个MeshBasicMaterial材质，并将其颜色设置为绿色。然后我们创建了一个立方体，并将刚创建的材质应用到这个立方体上。最后，我们将立方体添加到Three.js的场景中。

Three.js提供了多种材质类型，例如MeshBasicMaterial, MeshLambertMaterial, MeshPhongMaterial, MeshStandardMaterial等，每种材质根据物理上的原理会有不同的反射和材质外观。

- 阅读更多 -
NODEJS复习（ctfshow334-344）
System
2024-08-15
所有,javascript

由于原问题中包含了多个CTF题目，我将为每个题目提供简要的解答和示例代码。

  1. ctfshow334: 这是一个Node.js的安全性问题，涉及到了child_process模块的不安全使用。



const { exec } = require('child_process');
 
exec('cat flag.txt', (error, stdout, stderr) => {
  if (error) {
    console.error(`exec error: ${error}`);
    return;
  }
  console.log(`stdout: ${stdout}`);
  console.error(`stderr: ${stderr}`);
});

解决方法: 避免直接执行用户输入的命令，可以使用白名单或者更安全的方法来执行外部命令。

  1. ctfshow335: 这是一个Node.js的安全性问题，涉及到了child_process模块的不安全使用。



const { exec } = require('child_process');
const cmd = process.argv[2] || 'ls';
 
exec(cmd, (error, stdout, stderr) => {
  if (error) {
    console.error(`exec error: ${error}`);
    return;
  }
  console.log(`stdout: ${stdout}`);
  console.error(`stderr: ${stderr}`);
});

解决方法: 对用户输入的命令进行严格的过滤和校验，避免执行潜在危险的命令。

  1. ctfshow336: 这是一个Node.js的安全性问题，涉及到了child_process模块的不安全使用。



const { exec } = require('child_process');
const cmd = process.argv[2] || 'ls';
 
exec(cmd, { shell: '/bin/bash' }, (error, stdout, stderr) => {
  if (error) {
    console.error(`exec error: ${error}`);
    return;
  }
  console.log(`stdout: ${stdout}`);
  console.error(`stderr: ${stderr}`);
});

解决方法: 使用exec的选项参数来指定shell，并确保只使用安全的shell。

  1. ctfshow337: 这是一个Node.js的安全性问题，涉及到了child_process模块的不安全使用。



const { exec } = require('child_process');
const cmd = process.argv[2] || 'ls';
 
exec(cmd, { uid: 501, gid: 20 }, (error, stdout, stderr) => {
  if (error) {
    console.error(`exec error: ${error}`);
    return;
  }
  console.log(`stdout: ${stdout}`);
  console.error(`stderr: ${stderr}`);
});

解决方法: 使用exec的选项参数来设置uid和gid，避免以root权限执行命令。

  1. ctfshow338: 这是一个Node.js的安全性问题，涉及到了child_process模块的不安全使用。



const { exec } = require('child_process');
const cmd = process.argv[2] || 'ls';
 
exec(cmd, { env: { PATH: '/usr/bin:' } }, (error, stdout, stderr) => {
  if (error) {
    console.error(`exec error: ${error}`);
    return;
  }
  console.log(`stdout: ${stdout}`);
  console.error(`stderr: ${stderr}`);
});

解决方法: 通过exec的选项参数env来设置环境变量，限制执行命令时的环境。

  1. ctfshow339: 这是一个Node.js的安全性问题，涉及到了
- 阅读更多 -
Copyright © 2025 Tech Blog
All Right Reserved | 京ICP备19053165号