标签 Javascript 下的文章

js中获取元素的方法（document和getElementById）

2024-08-18

在JavaScript中，要获取HTML元素，通常使用document.getElementById方法，它可以通过元素的ID获取特定的元素。

示例代码：




// 假设有一个HTML元素如下：
// <div id="myElement">这是一个元素</div>
 
// 使用JavaScript获取这个元素
var element = document.getElementById('myElement');
 
// 现在你可以对这个元素进行操作，比如改变它的内容
if (element) {
    element.textContent = '元素已被获取并修改';
}

在这个例子中，document.getElementById('myElement')会返回一个对应ID为myElement的DOM元素的引用，然后你可以对这个元素进行操作。如果元素不存在，则返回null。

common.js和es6中模块引入的区别

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）

2024-08-18

前端代码实现文件分块并使用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 导航和路由跳转

2024-08-18




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版本

2024-08-18

在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变量

2024-08-18

在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框架

2024-08-18

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应用程序，并且如何通过访问默认的本地服务器端口来查看结果。

2024-08-18

在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 数组遍历方法合集

2024-08-18

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

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