标签 Javascript 下的文章

2024-08-19

在Node.js中实现多线程，可以使用worker_threads模块。这个模块允许你创建多线程工作进程，每个进程都是Node.js的一个独立实例。

以下是一个使用worker_threads模块创建多线程的简单例子：

主线程文件 main.js：




const { Worker, isMainThread, parentPort, workerData } = require('worker_threads');
 
if (isMainThread) {
  const worker = new Worker('./worker.js', { workerData: { num: 5 } });
 
  worker.on('message', (msg) => {
    console.log('来自工作线程的消息:', msg);
  });
 
  worker.on('error', (error) => {
    console.error('工作线程发生错误:', error);
  });
 
  worker.on('exit', (exitCode) => {
    console.log('工作线程已退出，退出码:', exitCode);
  });
}

工作线程文件 worker.js：




const { parentPort, workerData } = require('worker_threads');
 
parentPort.on('message', (message) => {
  parentPort.postMessage(workerData.num * 2);
});
 
parentPort.on('error', (error) => {
  console.error(error);
});

在这个例子中，main.js 是主线程，它创建了一个新的工作线程 worker.js。主线程发送消息给工作线程，工作线程处理完数据后返回结果给主线程。

注意：在实际应用中，多线程的使用场景和复杂度远超示例代码，请确保线程安全，避免死锁和竞态条件等问题。

System

2024-08-19

所有,nodejs




// 引入Node.js的fs模块用于文件操作
const fs = require('fs');
const path = require('path');
 
// 定义NodeLocalStorage类
class NodeLocalStorage {
  constructor(name) {
    // 设置存储数据的文件路径
    this.storePath = path.join(__dirname, `${name}.localstorage`);
    // 初始化内存缓存
    this.cache = {};
    // 加载文件内容到缓存
    this.load();
  }
 
  // 加载数据方法
  load() {
    try {
      // 同步读取文件内容
      const data = fs.readFileSync(this.storePath, 'utf8');
      // 解析JSON字符串为对象，并更新缓存
      this.cache = JSON.parse(data);
    } catch (e) {
      // 如果文件不存在或其他错误，清空缓存
      this.cache = {};
    }
  }
 
  // 持久化数据方法
  save() {
    // 将缓存对象转换为JSON字符串
    const data = JSON.stringify(this.cache);
    // 同步写入数据到文件
    fs.writeFileSync(this.storePath, data, 'utf8');
  }
 
  // 设置键值对
  setItem(key, value) {
    // 更新缓存中的值
    this.cache[key] = value;
    // 保存到文件
    this.save();
  }
 
  // 获取键值
  getItem(key) {
    // 从缓存中返回值
    return this.cache[key] || null;
  }
 
  // 移除键值对
  removeItem(key) {
    // 删除缓存中的键值对
    delete this.cache[key];
    // 保存到文件
    this.save();
  }
 
  // 清空所有数据
  clear() {
    // 清空缓存对象
    this.cache = {};
    // 保存到文件
    this.save();
  }
 
  // 获取键名的数组
  key(index) {
    // 返回索引对应的键名，如果不存在返回null
    const keys = Object.keys(this.cache);
    return keys[index] || null;
  }
 
  // 获取存储长度
  get length() {
    return Object.keys(this.cache).length;
  }
}
 
// 导出NodeLocalStorage类
module.exports = NodeLocalStorage;

这段代码定义了一个NodeLocalStorage类，它提供了一个简化的接口，类似于浏览器中的localStorage。它使用Node.js的fs模块来同步读取和写入文件，以此来模拟本地存储。这个类可以在Node.js环境中用来存储和管理键值对数据。

System

2024-08-19

所有,html

报错问题：使用html2canvas和jspdf将前端页面进行截图并导出为PDF时，内容被截断。

可能原因及解决方法：

图片或内容未完全渲染：
- 确保html2canvas在DOM元素渲染完成后再进行截图。可以使用其提供的window.onload或document.ready方法，或者监听它的onrendered回调。
分辨率问题：
- 调整jspdf的单位设置，确保与屏幕分辨率相匹配。
内容超出页面边界：
- 检查jspdf的默认页面尺寸是否合适，如果内容超出，需要手动调整页面尺寸或添加新的页面。
样式问题：
- 确保所有样式都已正确加载，并且没有CSS样式导致内容溢出或不可见。
字体问题：
- 如果PDF中的字体不支持，可能会导致字符截断。确保导出的PDF中字体可用。
图片质量问题：
- 如果使用了低质量的图片，可能会出现模糊和内容截断。尝试使用高分辨率的图片。
兼容性问题：
- 检查html2canvas和jspdf是否为最新版本，以确保最好的兼容性。
性能问题：
- 如果页面内容过多，可能会导致html2canvas执行缓慢，需要适当增加超时时间或优化页面加载性能。

解决方案示例代码：




html2canvas(document.body).then(canvas => {
    // 创建jspdf实例，设置单位和页面大小
    const pdf = new jsPDF('p', 'mm', 'a4');
    const imgData = canvas.toDataURL('image/png');
    const imgProps= pdf.getImageProperties(imgData);
    const pdfWidth = pdf.internal.pageSize.getWidth();
    const pdfHeight = (imgProps.height * pdfWidth) / imgProps.width;
    pdf.addImage(imgData, 'PNG', 0, 0, pdfWidth, pdfHeight);
    pdf.save('download.pdf');
});

确保在实际环境中根据具体情况调整单位、页面尺寸和图片质量。如果问题依然存在，可以进一步检查html2canvas和jspdf的文档，寻找更详细的解决方案或者在社区寻求帮助。

- 阅读更多 -

html5&css&js代码 024 响应式布局示例

System

2024-08-19

所有,css




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive Layout Example</title>
    <style>
        .container {
            width: 100%;
            margin: auto;
        }
        .header, .footer {
            background-color: #ddd;
            padding: 10px 0;
            text-align: center;
        }
        .content {
            background-color: #f8f8f8;
            padding: 20px;
            margin-bottom: 20px;
        }
        @media (min-width: 768px) {
            .container {
                width: 750px;
            }
        }
        @media (min-width: 992px) {
            .container {
                width: 970px;
            }
        }
        @media (min-width: 1200px) {
            .container {
                width: 1170px;
            }
        }
    </style>
</head>
<body>
    <div class="header">
        <h1>Responsive Layout</h1>
    </div>
    <div class="container">
        <div class="content">
            <h2>Content goes here...</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
        </div>
    </div>
    <div class="footer">
        <p>Footer content here...</p>
    </div>
</body>
</html>

这个代码实例展示了如何使用CSS媒体查询来创建一个响应式的布局。.container类根据屏幕宽度的不同使用不同的宽度，从而适应不同的设备。同时，示例中的HTML结构保持简单，并且只包含了必要的内容，以便更好地教学。

- 阅读更多 -

js请求封装ajax、统一响应

System

2024-08-19

所有,ajax

以下是一个简单的JavaScript请求封装函数，使用fetch进行HTTP请求，并对响应结果进行统一处理的示例代码：




function fetchJSON(url, options) {
  // 默认的请求选项
  const defaults = {
    headers: {
      'Content-Type': 'application/json',
    },
  };
 
  // 合并默认选项和传入的选项
  options = { ...defaults, ...options };
 
  // 发起请求并处理响应
  return fetch(url, options)
    .then(response => {
      // 确保响应成功
      if (!response.ok) {
        throw new Error(`HTTP错误! 状态码: ${response.status}`);
      }
      // 解析JSON响应
      return response.json();
    })
    .catch(error => {
      console.error('请求出错:', error);
      // 这里可以根据需要返回一个错误处理的Promise或者抛出错误
      // 例如返回一个Promise.reject
      throw error;
    });
}
 
// 使用示例
fetchJSON('https://api.example.com/data', {
  method: 'POST',
  body: JSON.stringify({ key: 'value' })
})
.then(data => console.log('请求成功:', data))
.catch(error => console.error('请求失败:', error.message));

这段代码定义了一个fetchJSON函数，它接受一个URL和一个选项对象作为参数。它使用fetch方法发起请求，并确保响应是成功的。如果响应不成功，它会抛出一个错误。如果响应成功，它会解析JSON响应。在使用时，你可以通过传递不同的HTTP方法和数据来定制请求。如果请求成功，它会通过then链进一步处理数据；如果请求失败，它会通过catch链处理错误。

- 阅读更多 -

【JavaScript 漫游】【034】AJAX

System

2024-08-19

所有,ajax

AJAX（Asynchronous JavaScript and XML）是一种创建交互式网页的技术，可以在不重新加载整个网页的情况下，与服务器交换数据。

以下是使用原生JavaScript实现AJAX的示例代码：




// 创建一个新的 XMLHttpRequest 对象
var xhr = new XMLHttpRequest();
 
// 配置请求类型、URL 以及是否异步处理
xhr.open('GET', 'your-api-endpoint', true);
 
// 设置请求完成的回调函数
xhr.onreadystatechange = function () {
  // 请求完成并且响应状态码为 200
  if (xhr.readyState === XMLHttpRequest.DONE) {
    if (xhr.status === 200) {
      // 处理请求成功的响应数据
      console.log(xhr.responseText);
    } else {
      // 处理请求失败
      console.error('AJAX Request failed');
    }
  }
};
 
// 发送请求
xhr.send();

在这个例子中，我们创建了一个新的 XMLHttpRequest 对象，并对其进行了配置，以发送一个GET请求到指定的API端点。我们还定义了一个回调函数，当请求的状态发生变化时会被调用，它会检查请求是否完成并且响应状态码为200，这表示请求成功。如果成功，它会输出响应文本，如果失败，则会输出错误信息。最后，我们通过调用 send() 方法发送请求。

- 阅读更多 -

分享three.js实现粒子背景

System

2024-08-19

所有,javascript

以下是一个使用three.js创建粒子背景的简单示例代码：




// 引入three.js库
import * as THREE from 'three';
 
// 创建场景
const scene = new THREE.Scene();
 
// 创建相机
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
 
// 创建渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
 
// 创建粒子物体
const geometry = new THREE.Geometry();
const material = new THREE.PointsMaterial({ color: 0xffffff, size: 0.5 });
 
// 生成一些随机的粒子
for (let i = 0; i < 1000; i++) {
  const vertex = new THREE.Vector3();
  vertex.x = Math.random() * 2 - 1;
  vertex.y = Math.random() * 2 - 1;
  vertex.z = Math.random() * 2 - 1;
  geometry.vertices.push(vertex);
}
 
const points = new THREE.Points(geometry, material);
scene.add(points);
 
// 渲染循环
function animate() {
  requestAnimationFrame(animate);
 
  // 旋转粒子
  points.rotation.x += 0.001;
  points.rotation.y += 0.001;
 
  renderer.render(scene, camera);
}
 
animate();

这段代码创建了一个简单的三维场景，包含了一个由随机生成的粒子构成的点集，通过旋转和渲染，实现了动态的粒子背景效果。这个示例可以作为创建类似效果时的基础，开发者可以根据自己的需求进行扩展和定制。

- 阅读更多 -

js实现读取excel文件

System

2024-08-19

所有,javascript

在JavaScript中，可以使用第三方库xlsx来读取Excel文件。以下是一个简单的例子，展示如何使用xlsx库读取Excel文件：

首先，确保安装了xlsx库：




npm install xlsx

然后，使用以下代码读取Excel文件：




const XLSX = require('xlsx');
 
// 读取Excel文件
function readExcel(file) {
  const reader = new FileReader();
 
  reader.onload = function(e) {
    const data = new Uint8Array(e.target.result);
    const workbook = XLSX.read(data, { type: 'array' });
 
    // 假设我们只读取第一个工作表
    const firstSheetName = workbook.SheetNames[0];
    const worksheet = workbook.Sheets[firstSheetName];
    const json = XLSX.utils.sheet_to_json(worksheet);
 
    console.log(json);
  };
 
  reader.readAsArrayBuffer(file);
}
 
// 假设你有一个input元素来上传文件
const inputElement = document.getElementById('input-excel');
inputElement.addEventListener('change', function(e) {
  const file = e.target.files[0];
  readExcel(file);
});

在HTML中，你需要有一个文件输入元素来上传Excel文件：




<input type="file" id="input-excel" />

这段代码会在用户选择文件后，读取并转换Excel文件内容为JSON格式。注意，这个例子只读取第一个工作表的内容。如果需要读取其他工作表或者有更复杂的需求，可以根据xlsx库的文档进行相应的扩展。

- 阅读更多 -

【环境准备】NodeJs(压缩包版本)安装与配置

System

2024-08-19

所有,javascript

在Linux环境下，可以使用以下步骤安装和配置Node.js：

下载Node.js压缩包：
打开Node.js官方下载页面，选择适合你系统的版本。

使用wget或curl下载压缩包：




wget https://nodejs.org/dist/v14.16.0/node-v14.16.0-linux-x64.tar.xz

解压缩下载的文件：




tar -xJf node-v14.16.0-linux-x64.tar.xz

配置环境变量：
编辑你的.bashrc或.profile文件，添加以下内容：
```
export NODEJS_HOME=/path/to/node-v14.16.0-linux-x64
export PATH=$NODEJS_HOME/bin:$PATH
```
替换/path/to/为你的Node.js解压路径。
使配置生效：
```
source ~/.bashrc
```
验证安装：
```
node -v
npm -v
```

以上步骤会安装Node.js并将其添加到你的环境变量中，使得你可以在任何位置通过命令行运行Node.js和npm。记得替换下载链接和解压路径，使用与你系统匹配的Node.js版本。

- 阅读更多 -

node之vm2库，js沙盒环境

System

2024-08-19

所有,javascript

vm2 是一个 Node.js 模块，用于在一个隔离的沙箱环境中运行不信任的代码。以下是使用 vm2 创建沙箱并在其中运行代码的基本示例：

首先，安装 vm2：




npm install vm2

然后，使用 vm2 创建沙箱并执行代码：




const { VM } = require('vm2');
 
// 创建一个新的沙箱
const vm = new VM({
  timeout: 1000, // 设置代码执行的超时时间为1000毫秒
  sandbox: { // 定义沙箱中的初始数据
    secret: 'a secret code'
  }
});
 
// 在沙箱中执行代码
const result = vm.run('secretFunction(secret)', 'myScript.vm2');
 
console.log(result); // 输出代码执行的结果

在这个例子中，我们创建了一个新的 VM 实例，并设置了一些选项，如超时和初始化的沙箱环境。然后，我们在这个沙箱中执行了一个简单的函数，它使用了一个秘密信息。这个函数的定义不是在沙箱外定义的，而是在沙箱内部定义的。这样可以提供一定程度的代码隔离。

- 阅读更多 -