标签 Javascript 下的文章

2024-08-14

报错解释：

这个错误表示 npm 遇到了一个操作系统级别的权限错误（EPERM），当试图打开一个文件或目录时发生。通常是因为 npm 试图写入一个它没有足够权限的文件或目录。

解决方法：

确认你是否以管理员身份运行命令行工具。在 Windows 上，你可以通过右键点击命令行程序并选择 "以管理员身份运行"。
如果你正在使用 npm 的全局安装功能，尝试使用 --no-sudo 选项。例如，使用 npm install -g <package> --no-sudo。
检查路径 D:Program Files 是否正确。如果 npm 试图访问一个不存在的路径，你可能需要修正它。
清理 npm 缓存。使用 npm cache clean --force 可以清理缓存并解决潜在的问题。
如果上述方法都不行，可能需要检查文件系统权限或者查看更详细的错误日志来获取更多线索。

JS监听浏览器关闭、刷新及切换标签页触发事件

2024-08-14

在JavaScript中，可以使用window对象的beforeunload事件来监听浏览器的关闭和刷新操作。同时，可以使用visibilitychange事件来监听标签页的切换。

以下是实现这些功能的示例代码：




// 监听关闭和刷新
window.addEventListener('beforeunload', (event) => {
  // 设置returnValue属性可以显示提示信息
  event.returnValue = '您可能有未保存的更改！';
  
  // 这里可以执行其他关闭/刷新的逻辑
  console.log('浏览器正在关闭或刷新');
});
 
// 监听标签页可见性变化
document.addEventListener('visibilitychange', () => {
  if (document.hidden) {
    console.log('标签页不可见');
  } else {
    console.log('标签页变为可见');
  }
});

这段代码首先为beforeunload事件添加了一个事件监听器，这样当用户尝试关闭或刷新页面时，就会触发这个事件。在事件处理函数中，可以执行任何需要的清理操作或者提示用户保存数据。

其次，为visibilitychange事件添加了监听器，这样当页面的标签页变为不可见或可见时，就会触发这个事件，这对于理解用户是否在使用应用程序是很有帮助的。

react框架，使用vite和nextjs构建react项目

2024-08-14

React框架下，使用Vite和Next.js都是构建React项目的有效工具。Vite主要是一个基于ES模块的快速启动和开发服务器，而Next.js是一个SSR（服务器端渲染）和静态站点生成的框架。

使用Vite创建React项目：

首先，确保你已经安装了Node.js（建议v12.0.0或更高版本）。然后，全局安装Vite：




npm install -g create-vite

接着，使用Vite创建一个新的React项目：




create-vite my-react-app --template react

然后进入项目目录并安装依赖：




cd my-react-app
npm install

最后，启动开发服务器：




npm run dev

使用Next.js创建React项目：

首先，安装Next.js的命令行工具：




npm install -g next

然后，创建一个新的Next.js项目：




npx create-next-app my-react-app --typescript

如果你不需要TypeScript，可以去掉--typescript选项。

接下来，进入项目目录并启动开发服务器：




cd my-react-app
npm run dev

以上两种方式都可以用来构建React项目，选择哪一种取决于你的具体需求和团队的技术偏好。

2024-08-14

在macOS上，您可以使用Homebrew来升级Node.js和npm，并安装Node.js的多版本管理器n。以下是步骤和示例代码：

打开终端。

如果尚未安装Homebrew，请安装它：




/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

更新Homebrew的公式：
```
brew update
```
升级Node.js和npm：
```
brew upgrade node
```
安装多版本管理器n：
```
brew install n
```
使用n安装新版本的Node.js：
```
n latest
```
切换到新安装的版本：
```
n
```

以上步骤将使您能够在macOS上升级Node.js和npm，并且能够安装和管理多个Node.js版本。

JS中的Day.js（秒懂如何快速处理日期以及手写Day.js）

2024-08-14

Day.js 是一个轻量级的 JavaScript 日期处理库，它和 Moment.js 类似，但是 Day.js 的 API 设计更现代，更简洁，并且在 Moment.js 的基础上进行了优化，使其更快，更少占用空间。

以下是如何使用 Day.js 来处理日期的示例代码：




// 引入 Day.js 库
const dayjs = require('dayjs');
 
// 获取当前日期时间
let now = dayjs();
console.log(now.format()); // 输出当前日期时间（ISO格式）
 
// 创建指定日期时间
let specificDate = dayjs('2021-01-01');
console.log(specificDate.format('YYYY-MM-DD')); // 输出格式化的日期
 
// 日期时间操作
let nextYear = specificDate.add(1, 'year');
console.log(nextYear.format('YYYY-MM-DD')); // 输出下一年的日期
 
let isBefore = specificDate.isBefore(now);
console.log(isBefore); // 判断指定日期是否在当前日期之前

如果你想要手动实现一个简化版的 Day.js，可以参考下面的代码：




function Dayjs(date) {
  this.date = date instanceof Date ? date : new Date(date);
}
 
Dayjs.prototype.format = function(formatString) {
  // 实现 formatString 对应的格式化逻辑
  // 例如: 'YYYY-MM-DD' 转换为 'yyyy/mm/dd'
  // 简化版本，仅作为示例
  return this.date.toISOString();
};
 
Dayjs.prototype.add = function(value, unit) {
  // 实现日期时间的增加逻辑
  // 简化版本，仅作为示例
  this.date.setFullYear(this.date.getFullYear() + value);
  return this;
};
 
Dayjs.prototype.isBefore = function(date) {
  // 实现日期比较逻辑
  // 简化版本，仅作为示例
  return this.date < date.date;
};
 
// 使用示例
const now = new Dayjs();
console.log(now.format());
 
const specificDate = new Dayjs('2021-01-01');
console.log(specificDate.format('YYYY-MM-DD'));
 
const nextYear = specificDate.add(1, 'year');
console.log(nextYear.format('YYYY-MM-DD'));
 
const isBefore = specificDate.isBefore(now);
console.log(isBefore);

这个示例提供了 Dayjs 类的基本框架，包括 format、add 和 isBefore 方法，并展示了如何使用它们。在实际应用中，你需要根据需求来实现这些方法的完整功能。

Js sort()核心用法，有了它，你无需再为数组排序而发愁

2024-08-14

JavaScript 的 sort() 方法用于对数组的元素进行排序。它会改变原数组，默认情况下，排序顺序为字符串Unicode码点。

解决方案

使用 sort() 方法对数值数组进行排序：




let numbers = [4, 2, 9, 3, 5, 1];
numbers.sort((a, b) => a - b);
console.log(numbers); // 输出: [1, 2, 3, 4, 5, 9]

使用 sort() 方法对字符串数组进行排序：




let fruits = ['apple', 'banana', 'mango', 'cherry'];
fruits.sort();
console.log(fruits); // 输出: ['apple', 'banana', 'cherry', 'mango']

使用 sort() 方法对对象数组进行排序：




let users = [
  { name: 'John', age: 34 },
  { name: 'Alice', age: 25 },
  { name: 'Bob', age: 22 }
];
 
users.sort((a, b) => a.age - b.age);
console.log(users); // 输出: [ { name: 'Bob', age: 22 }, { name: 'Alice', age: 25 }, { name: 'John', age: 34 } ]

解释

sort() 方法接受一个可选参数，即比较函数。当需要对对象数组进行排序时，必须提供比较函数，以指明如何比较两个对象。

比较函数接受两个参数，通常命名为 a 和 b，并返回一个数值。如果 a 小于 b，返回负数；如果 a 等于 b，返回0；如果 a 大于 b，返回正数。这样 sort() 方法就可以根据比较函数的结果来确定元素的排序。

如何把已安装的nodejs高版本降级为低版本

2024-08-14

要将已安装的Node.js版本降级，您可以使用Node Version Manager (nvm)，这是一个通用的版本管理工具，不仅适用于Node.js，也适用于其他语言的版本管理。以下是使用nvm降级Node.js版本的步骤：

如果您还没有安装nvm，请根据官方文档安装nvm：https://github.com/nvm-sh/nvm#install--update-script
打开终端或命令提示符。
查看当前安装的Node.js版本：
```
node -v
```
查看可安装的Node.js版本列表：
```
nvm list-remote
```
安装特定版本的Node.js（以Node.js v10.16.0为例）：
```
nvm install 10.16.0
```
切换到已安装的特定版本：
```
nvm use 10.16.0
```
再次检查版本以确认切换成功：
```
node -v
```

以上步骤将帮助您使用nvm将Node.js版本降级到低版本。如果您已经有nvm安装好了，直接执行第5和第6步即可。

3D地图大屏（Three.js + Vue3）

2024-08-14

以下是一个使用Three.js和Vue 3创建3D地图大屏的简化示例代码：




<template>
  <div ref="threeContainer"></div>
</template>
 
<script setup>
import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
import { RGBELoader } from 'three/examples/jsm/loaders/RGBELoader.js';
import { TWEEN } from 'three/examples/jsm/libs/tween.module.min.js';
 
// 创建场景、相机和渲染器
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 loader = new RGBELoader();
loader.loadAsync('./textures/envMap.hdr').then((texture) => {
  scene.environment = texture;
  texture.mapping = THREE.EquirectangularReflectionMapping;
});
 
// 加载3D模型
const gltfLoader = new GLTFLoader();
gltfLoader.load('./models/scene.gltf', (gltf) => {
  scene.add(gltf.scene);
});
 
// 创建轨道控制器
const controls = new OrbitControls(camera, renderer.domElement);
 
// 使用TweenJS进行动画更新
TWEEN.start();
 
// 渲染循环
function animate() {
  requestAnimationFrame(animate);
  TWEEN.update();
  controls.update();
  renderer.render(scene, camera);
}
animate();
</script>
 
<style>
body {
  margin: 0;
  overflow: hidden;
}
</style>

这段代码展示了如何使用Vue 3和Three.js创建一个基本的3D地图大屏。它包括创建场景、相机、渲染器，加载环境光照和3D模型，以及使用OrbitControls实现轨道控制。Tween.js用于处理动画。这个示例假设你有一个环境光照纹理和一个3D模型，并且已经安装了必要的Three.js模块。

【Linux】Ubuntu 22.04 升级 nodejs 到 v18

2024-08-14

在Ubuntu 22.04上将Node.js升级到v18的步骤如下：

首先，你需要安装curl和gnupg，这是用于验证下载的Node.js二进制文件的完整性和安全性的工具。




sudo apt update
sudo apt install curl gnupg lsb-release

然后，你需要Node.js的官方GPG密钥，以验证下载的二进制文件。




curl -fsSL https://deb.nodesource.com/gpgkey/nodesource.gpg.key | sudo gpg --dearmor -o /usr/share/keyrings/nodesource.gpg

接下来，你可以使用echo命令来添加Node.js库到你的sources.list，这样你就可以通过apt来安装Node.js。




echo "deb [signed-by=/usr/share/keyrings/nodesource.gpg] https://deb.nodesource.com/nodejs-v18.x $(lsb_release -cs) main" | sudo tee /etc/apt/sources.list.d/nodesource.list

更新本地的包索引，并安装Node.js v18。




sudo apt update
sudo apt install nodejs

验证Node.js是否成功安装，并检查其版本。




node --version

如果你想要安装npm和node-gyp等额外的Node.js工具，你可以运行以下命令：




sudo apt install npm
sudo apt install node-gyp

以上步骤将会在Ubuntu 22.04上安装Node.js v18。如果你需要其他版本的Node.js，只需更改上述步骤中的nodejs-v18.x为对应的版本字符串即可。

nodejs中npm与cnpm版本参考

2024-08-14

在Node.js中，npm 和 cnpm 都是包管理器，但它们有所不同：

npm 是 Node Package Manager 的缩写，它是 Node.js 默认的包管理器。
cnpm 是中国国内的 npm 镜像，用于加速国内访问 npm 资源。

要查看当前安装的 npm 和 cnpm 版本，可以在命令行中使用以下命令：

查看npm版本：




npm --version

查看cnpm版本：




cnpm --version

如果你还没有安装 cnpm，可以使用 npm 来安装它：




npm install -g cnpm --registry=https://registry.npm.taobao.org

这行命令会全局安装 cnpm，并将其配置为使用淘宝的 npm 镜像。安装完成后，你就可以使用 cnpm 命令来安装包，并且会得到更快的下载速度。