分类前端技术下的文章

2024-08-18

在JavaScript中，common.js和ES6模块（也称为ES6模块或ESM）之间的主要区别在于它们的导入和导出机制。

CommonJS模块（Node.js中使用）:
- 使用require关键字来引入模块。
- 使用module.exports或exports对象来导出模块。




// 导入模块
const module = require('module-name');
 
// 导出模块
module.exports = myModule;

ES6模块:
- 使用import关键字来引入模块。
- 使用export关键字来导出模块。




// 导入模块
import myModule from 'module-name';
 
// 导出模块
export default myModule;

ES6模块是静态的，这意味着导入和导出是在代码运行之前就完成了，而CommonJS模块是动态的，这意味着在代码运行时才会加载和执行模块。

此外，ES6模块是编译时加载，CommonJS模块是运行时加载。这意味着使用ES6模块时，如果导入的模块没有变化，它不会重新加载，而CommonJS模块每次都会重新加载。

- 阅读更多 -

文件分块+断点续传实现大文件上传全栈解决方案（前端+nodejs）

System

2024-08-18

所有,javascript

前端代码实现文件分块并使用FormData发送给Node.js服务器，服务器端接收文件块并写入磁盘，最后合并文件块。




// 前端JavaScript代码
 
// 文件分块上传函数
function uploadFileInChunks(file, chunkSize = 1024 * 1024, uploadUrl) {
  let fileSize = file.size;
  let chunkCount = Math.ceil(fileSize / chunkSize);
 
  let start = 0;
  let end = chunkSize;
 
  for (let i = 0; i < chunkCount; i++) {
    let chunk = file.slice(start, end);
    let formData = new FormData();
    formData.append('file', chunk);
    formData.append('filename', file.name);
    formData.append('chunkIndex', i);
    formData.append('chunkCount', chunkCount);
 
    fetch(uploadUrl, {
      method: 'POST',
      body: formData
    })
    .then(response => response.json())
    .then(data => {
      if (data.success) {
        console.log('Chunk uploaded successfully');
      } else {
        console.error('Error uploading chunk');
      }
    })
    .catch(error => console.error('Error:', error));
 
    start = end;
    end = start + chunkSize;
  }
}
 
// 使用示例
const inputElement = document.getElementById('fileInput');
inputElement.addEventListener('change', function(e) {
  const file = e.target.files[0];
  const uploadUrl = 'http://yourserver.com/upload'; // Node.js服务器地址
  uploadFileInChunks(file, 1024 * 1024, uploadUrl); // 每个块大小为1MB
});

Node.js服务器端代码：




// Node.js + Express代码
const express = require('express');
const fs = require('fs');
const multer = require('multer');
const path = require('path');
const app = express();
 
const storage = multer.diskStorage({
  destination: function (req, file, cb) {
    let folder = 'uploads/' + req.body.filename;
    if (!fs.existsSync(folder)) {
      fs.mkdirSync(folder, { recursive: true });
    }
    cb(null, folder)
  },
  filename: function (req, file, cb) {
    cb(null, file.fieldname + '-' + req.body.chunkIndex)
  }
})
 
const upload = multer({ storage: storage });
 
app.post('/upload', upload.single('file'), function (req, res) {
  let fileIndex = req.body.chunkIndex;
  let fileName = req.body.filename;
  let chunkCount = req.body.chunkCount;
  let fileChunk = req.file.path;
 
  // 合并文件逻辑（简化版）
  if (checkIfAllChunksPresent(fileName, chunkCount)) {
    conc

- 阅读更多 -

Next.js 导航和路由跳转

System

2024-08-18

所有,javascript




import React from 'react';
import { useRouter } from 'next/router';
import Link from 'next/link';
 
const Navigation = () => {
  const router = useRouter();
 
  return (
    <nav>
      <ul>
        <li>
          <Link href="/">
            <a className={router.pathname === '/' ? 'active' : ''}>Home</a>
          </Link>
        </li>
        <li>
          <Link href="/about">
            <a className={router.pathname === '/about' ? 'active' : ''}>About</a>
          </Link>
        </li>
        <li>
          <Link href="/contact">
            <a className={router.pathname === '/contact' ? 'active' : ''}>Contact</a>
          </Link>
        </li>
      </ul>
    </nav>
  );
};
 
export default Navigation;

这段代码展示了如何在Next.js中创建一个导航组件，该组件使用useRouter钩子来获取当前的路由信息，并通过Link组件提供导航链接。当用户点击导航链接时，会触发页面的重新加载或服务器端渲染，从而切换到对应的页面。这个例子简洁明了，并且使用了函数组件和Hooks API，这是Next.js推荐的现代React模式。

- 阅读更多 -

Ubuntu安装Nvm管理NodeJS版本

System

2024-08-18

所有,javascript

在Ubuntu系统上安装NVM（Node Version Manager）并使用它来安装和管理Node.js版本的步骤如下：

打开终端。

安装NVM：




curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash

关闭并重新打开终端或者运行以下命令来启用NVM：




export NVM_DIR="$([ -z "${XDG_CONFIG_HOME-}" ] && printf %s "${HOME}/.nvm" || printf %s "${XDG_CONFIG_HOME}/nvm")"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" # This loads nvm

检查NVM是否安装成功：
```
nvm --version
```
使用NVM安装Node.js最新版本：
```
nvm install node
```
如果需要，可以切换到特定版本的Node.js：
```
nvm use node
```
验证Node.js是否已经切换到正确版本：
```
node --version
```

以上步骤将帮助你在Ubuntu系统上安装NVM并使用它来管理Node.js版本。

- 阅读更多 -

CSS使用JS变量

System

2024-08-18

所有,javascript

在CSS中直接使用JavaScript变量不是原生支持的特性，因为CSS和JavaScript是两种不同的语言，它们在浏览器中的执行环境和执行时间都有所不同。不过，你可以通过以下几种方法在CSS中使用JavaScript变量：

内联样式：你可以使用JavaScript动态地为元素的style属性赋值。
CSS自定义属性：也称为CSS变量，可以在JavaScript中修改并利用这些变量。

下面是使用这两种方法的示例代码：

内联样式




// JavaScript
const element = document.getElementById('myElement');
const varValue = '200px'; // 假设这是你的JavaScript变量
element.style.width = varValue; // 将变量值应用到元素的内联样式

CSS自定义属性




/* CSS */
:root {
  --my-var: 10px;
}
 
.my-element {
  padding: var(--my-var); /* 使用CSS变量 */
}




// JavaScript
document.documentElement.style.setProperty('--my-var', '20px'); // 更新CSS变量的值

在这个例子中，我们首先在CSS中定义了一个自定义属性--my-var，然后在JavaScript中通过setProperty方法更新了这个属性的值。这样一来，所有使用这个变量的CSS规则都会相应地更新。

- 阅读更多 -

Nodejs之Egg.js框架

System

2024-08-18

所有,javascript

Egg.js 是一个由阿里巴巴开源的Node.js框架，设计原则遵循高可用、高性能、可伸缩和可维护的原则。以下是一个简单的Egg.js应用程序的例子：

首先，确保你已经安装了Node.js和npm。

创建一个新的Egg.js项目：




$ mkdir egg-example
$ cd egg-example
$ npm init egg --type=simple
$ npm install

编辑 app/controller/home.js 文件，添加一个简单的 index 方法：




// app/controller/home.js
const Controller = require('egg').Controller;
 
class HomeController extends Controller {
  async index() {
    await this.ctx.render('home.tpl', { message: 'Hello Egg.js' });
  }
}
 
module.exports = HomeController;

创建一个新的模板文件 app/view/home.tpl：




<!-- app/view/home.tpl -->
<h1>{{ message }}</h1>

启动Egg.js应用程序：




$ npm run dev
  egg-server started on http://localhost:7001

在浏览器中打开 http://localhost:7001，你将看到渲染的页面显示 "Hello Egg.js"。

这个例子展示了如何创建一个简单的Egg.js应用程序，并且包括了一个控制器和一个模板。它还演示了如何启动和运行Egg.js应用程序，并且如何通过访问默认的本地服务器端口来查看结果。

System

2024-08-18

所有,javascript

在JavaScript中，break语句主要用在循环或switch语句中，用于终止当前循环或switch语句的执行。

使用break语句在循环中




for (let i = 0; i < 10; i++) {
  if (i === 5) {
    break; // 当i等于5时，退出循环
  }
  console.log(i); // 输出0到4
}

使用break语句在switch语句中




let number = 2;
 
switch (number) {
  case 1:
    console.log("One");
    break;
  case 2:
    console.log("Two");
    break; // 当number等于2时，退出switch语句
  case 3:
    console.log("Three");
    break;
}

在这个例子中，当number等于2时，程序会打印出"Two"并使用break语句退出switch语句。

注意：break语句只能跳出包含它的最内层循环或switch语句。如果你需要从外层循环中跳出，你可能需要使用一个额外的标记或者将循环放在一个函数中并直接返回。

- 阅读更多 -

JS 数组遍历方法合集

System

2024-08-18

所有,javascript

JavaScript中遍历数组的方法有很多种，以下是一些常见的方法以及它们的示例代码：

for 循环：




let arr = [1, 2, 3, 4, 5];
for (let i = 0; i < arr.length; i++) {
    console.log(arr[i]);
}

forEach 方法：




let arr = [1, 2, 3, 4, 5];
arr.forEach(function(value, index) {
    console.log(value);
});

for...of 循环：




let arr = [1, 2, 3, 4, 5];
for (let value of arr) {
    console.log(value);
}

map 方法：




let arr = [1, 2, 3, 4, 5];
arr.map(function(value, index) {
    console.log(value);
    return value; // 如果需要返回新数组，则需要这样操作
});

for...in 循环（不推荐用于数组遍历，因为它遍历的是键名，对于数组来说键名不一定是连续的数字）：




let arr = [1, 2, 3, 4, 5];
for (let index in arr) {
    console.log(arr[index]);
}

filter 方法（如果需要过滤数组中的元素）：




let arr = [1, 2, 3, 4, 5];
arr.filter(function(value, index) {
    return value > 3; // 返回一个新数组，包含满足条件的元素
}).forEach(function(value) {
    console.log(value);
});

reduce 方法（用于数组的归约）：




let arr = [1, 2, 3, 4, 5];
arr.reduce(function(accumulator, currentValue, currentIndex) {
    return accumulator + currentValue; // 计算数组总和
}, 0); // 初始值为0

选择哪种方法取决于具体需求，比如是否需要修改原数组、是否需要遍历键名和值、是否需要返回新数组或处理数组中的每个元素等。

System

2024-08-18

所有,javascript

报错信息不完整，但从提供的部分来看，这个错误与PDF.js库处理PDF文档时遇到的流（stream）有关。流应该包含数据描述（DA），这通常是PDF中定义字体或其他资源时使用的一种结构。

解决方法：

确认PDF文件的完整性：这个问题可能是因为PDF文件损坏或不完整导致的。尝试重新获取或制作PDF文件的副本。
检查PDF.js版本：确保你使用的PDF.js版本是最新的，或者至少是一个修复了相关问题的版本。
检查代码：如果你在使用PDF.js时编写了自定义代码，请仔细检查相关代码部分，确保你遵循了库的使用说明，并且没有错误地处理流数据。
查看控制台输出：通常浏览器的开发者控制台会提供更多错误信息。查看详细的错误堆栈跟踪，这可能会提供更多关于问题原因的线索。
如果以上方法都不能解决问题，可以考虑在PDF.js的GitHub仓库中查找已知的问题，或者提交一个新的问题，提供完整的错误信息和你遇到问题时的上下文。

- 阅读更多 -

【已解决】安装不同版本的nodejs环境以及版本切换

System

2024-08-18

所有,javascript

在安装不同版本的Node.js并进行版本切换时，可以使用nvm（Node Version Manager）。以下是在Unix-like系统中安装和使用nvm的步骤：

安装nvm：




curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash
# 或者使用wget：
wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash

重新加载shell配置：




source ~/.bashrc
# 或者你的shell配置文件可能是~/.profile、~/.zshrc等

安装特定版本的Node.js：




nvm install 14.17.0
# 安装其他版本的Node.js，只需更改版本号

切换到特定版本的Node.js：




nvm use 14.17.0
# 切换到其他版本，只需更改版本号

查看当前使用的Node.js版本：




nvm current

查看所有安装的Node.js版本：




nvm ls

卸载特定版本的Node.js：




nvm uninstall 14.17.0
# 卸载其他版本的Node.js，只需更改版本号

请注意，上述命令中的版本号（例如14.17.0）需要根据你需要安装的Node.js版本进行替换。此外，在不同操作系统上安装nvm的方法可能略有不同，请参考官方文档。

- 阅读更多 -