标签 Javascript 下的文章

2024-08-15




// 假设我们有一个名为mathUtils.js的模块文件，它提供数学相关的工具函数
// mathUtils.js
function add(a, b) {
  return a + b;
}
 
function subtract(a, b) {
  return a - b;
}
 
// 使用ES6的export关键字来暴露函数
export { add, subtract };
 
// 另一个JavaScript文件，我们将导入并使用这些函数
// main.js
import { add, subtract } from './mathUtils.js';
 
console.log(add(1, 2)); // 输出: 3
console.log(subtract(3, 2)); // 输出: 1

这个例子展示了如何使用ES6的模块导出和导入特性来组织代码。mathUtils.js文件中定义了两个函数add和subtract，并通过export关键字将它们暴露出去。在main.js中，我们使用import语句来导入这些函数，并调用它们执行相应的数学运算。这是一种简洁且易于理解的模块化代码组织方式。

- 阅读更多 -

js监听网页iframe里面元素变化其实就是监听iframe变化

System

2024-08-15

所有,javascript

要监听iframe里面元素的变化，可以使用MutationObserver API。以下是一个示例代码，它会监听iframe内部的DOM变化，并在变化发生时输出信息。




// 确保在iframe加载完成后再进行操作
document.addEventListener('DOMContentLoaded', function() {
  // 获取iframe元素
  var iframe = document.getElementById('my-iframe');
  // 确保同源策略（Same-origin policy）不会阻止我们的访问
  iframe.contentWindow.postMessage('', '*');
 
  // 选择需要观察变动的节点
  var targetNode = iframe.contentDocument || iframe.contentWindow.document;
 
  // 创建一个观察者对象
  var observer = new MutationObserver(function(mutations) {
    mutations.forEach(function(mutation) {
      console.log(mutation);
      // 这里可以添加你想要的响应变化的代码
    });
  });
 
  // 观察者的配置（观察目标节点的子节点的变化）
  var config = { childList: true, subtree: true };
 
  // 传入目标节点和观察选项并开始观察
  observer.observe(targetNode, config);
});

请注意，由于浏览器的安全限制，如果iframe加载的页面不是同源的，你可能需要设置iframe的src为about:blank，然后通过postMessage与其内部页面通信，以确保可以正常监听其变化。

此外，MutationObserver 不能跨文档（即iframe）工作，除非你能够在iframe内部进行操作。如果iframe的内容是由另一个域提供的，你可能需要使用window.postMessage与那个域下的脚本进行通信，然后在那个域下进行MutationObserver的监听。

- 阅读更多 -

如何使用js运行python文件？

System

2024-08-15

所有,javascript

在JavaScript中运行Python文件通常需要借助外部库或工具。一个常用的库是child_process，它可以用来执行外部命令。以下是一个使用child_process运行Python文件的例子：




const { exec } = require('child_process');
 
// 假设你的Python文件名为script.py
const pythonScriptPath = 'path/to/your/script.py';
 
exec(`python ${pythonScriptPath}`, (error, stdout, stderr) => {
  if (error) {
    console.error(`执行的错误: ${error}`);
    return;
  }
  console.log(`stdout: ${stdout}`);
  if (stderr) {
    console.log(`stderr: ${stderr}`);
  }
});

确保你的系统中已经安装了Python，并且在环境变量中配置了Python的路径，以便能够在命令行中直接调用python命令。如果Python不在环境变量中，你需要指定Python的完整路径。

此外，如果你想要在前端JavaScript代码中直接在浏览器中运行Python代码，你将需要使用WebAssembly或者在服务器端运行Python代码，并通过API接口与前端进行交互。但是，由于安全性和性能的原因，后者通常是更好的选择。

- 阅读更多 -

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来获取图片并实现幻灯片展示。

以下是一个简单的示例：

安装Express：




npm install express

创建一个简单的服务器，并添加一个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}`);
});

前端使用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代码。

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可以使异步代码看起来像同步代码。

- 阅读更多 -

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();

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

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：

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

- 阅读更多 -