javascript随笔

const oldCount = configData.length;
//configData 很可能是一个数组（Array） 或类似数组的对象（比如字符串、NodeList 等），而 .length 是 JavaScript 中用于获取这些对象元素个数的内置属性。
//.length 的作用是：返回数组（或类数组对象）中元素的个数。
//例如
const configData = ['a', 'b', 'c'];
const oldCount = configData.length; // oldCount = 3

const stats = await fs.stat(configPath);这里fs.stat是语法预定义的
//是 Node.js 中 fs 模块预定义的方法，用于获取文件/目录的状态信息（如大小、创建时间、权限等）。以下是详细解析：
fs 模块
Node.js 内置的 fs (File System) 模块 提供了文件系统操作接口，fs.stat() 是其核心方法之一。
无需自定义
只要你的代码中正确引入 fs 模块（如 const fs = require('fs') 或 import fs from 'fs'），就可以直接使用 fs.stat()。



res.json({ 这里的res也是预定义的
//在常见的 Node.js Web 框架（如 Express.js、Koa 等）中，res.json() 是框架预定义的方法，专门用于发送 JSON 格式的 HTTP 响应。以下是详细解析：
res 是 HTTP 响应（Response）对象的缩写，由框架自动创建并传入路由处理函数。它的核心作用是将数据返回给客户端（如浏览器、移动端等）。

app.get('/api/data', (req, res) => {
  res.json({ message: "Hello World" }); // 发送 JSON 响应
});

req：请求对象（包含客户端发送的数据，如 URL、Headers、Body 等）。
res：响应对象（用于控制服务器返回给客户端的内容）。

res.json() 的作用
将 JavaScript 对象转换为 JSON 字符串，并设置正确的 HTTP 响应头（Content-Type: application/json），然后发送给客户端。

注意事项
只能调用一次
HTTP 响应只能发送一次数据，重复调用 res.json() 会报错：
自动序列化
res.json() 会自动处理对象序列化，无需手动调用 JSON.stringify()：
错误处理
如果数据包含无法序列化的内容（如循环引用），会抛出错误：

res.json() 是框架预定义的方法，用于便捷地发送 JSON 响应。
关键特性：
自动设置 Content-Type: application/json。
自动序列化 JavaScript 对象为 JSON 字符串。
适用场景：
API 接口返回数据、前后端分离项目中的 JSON 通信等。


//只能在浏览器使用，window指的是当前网页，location是对象
const currentHost = window.location.hostname;
const currentPort = window.location.port;
//nodejs没有当前网页的概念，但可以用req返回
const express = require('express');
const app = express();

app.get('/', (req, res) => {
  const hostname = req.hostname; // 主机名（如 "example.com"）
  const port = req.app.get('port') || 3000; // 服务器监听的端口
  const protocol = req.protocol; // "http" 或 "https"

  console.log(`Host: ${hostname}:${port}, Protocol: ${protocol}`);
  res.send('Hello World');
});

app.listen(3000);
//如果有一个 URL 字符串（如 "https://example.com:8080/path"），可以用 Node.js 的 URL 模块解析：
const { URL } = require('url');

const url = new URL('https://example.com:8080/path');
console.log(url.hostname); // "example.com"（不含端口）
console.log(url.port);     // "8080"（字符串，默认端口时为空）
console.log(url.host);     // "example.com:8080"（含端口）

//为事件监听器添加异步处理函数的写法。它的核心目的是：在点击事件中执行异步操作（如 fetch、await 等）
reloadBtn.addEventListener('click', async function() {})
//为什么用 async function
//async function 允许你在函数内部使用 await 关键字，从而以同步的写法处理异步操作（如网络请求、定时器等）。如果不加 async，直接写 await 会报错（因为普通函数不支持 await）
reloadBtn.addEventListener('click', async function() {
  try {
    const response = await fetch('/api/data'); // 异步请求
    const data = await response.json();
    console.log(data); // 处理数据
  } catch (error) {
    console.error('请求失败:', error);
  }
});
//错误处理必须用 try/catch，异步函数中抛出的错误不会自动被浏览器捕获，必须手动处理：
reloadBtn.addEventListener('click', async function() {
  try {
    await someAsyncOperation();
  } catch (error) {
    alert('操作失败！');
  }
});

不同对象的事件监听示例
// 1. 监听document对象的事件
document.addEventListener('DOMContentLoaded', function() {
    console.log('文档加载完成');
});

// 2. 监听window对象的事件
window.addEventListener('resize', function() {
    console.log('窗口大小改变了');
});

// 3. 监听DOM元素的事件
const button = document.getElementById('myButton');
button.addEventListener('click', function() {
    console.log('按钮被点击了');
});

// 4. 监听body元素的事件
document.body.addEventListener('click', function() {
    console.log('body被点击了');
});

// 这行代码执行后：
const reloadBtn = document.getElementById('reload-btn');

// reloadBtn 存储的是：
// 1. 一个DOM元素的引用（指针/地址）
// 2. 不是DOM元素本身
// 3. 不是字符串 'reload-btn'
// 4. 而是内存中那个DOM元素对象的引用

// 可以理解为：
// reloadBtn → [DOM元素对象在内存中的位置]

内存地址: 0x123456
+----------------------+
| HTMLButtonElement    |  ← 实际的DOM元素对象
| - id: "reload-btn"   |
| - className: ""      |
| - onclick: null      |
| - ...其他属性...     |
+----------------------+
        ↑
        | 引用/指针
const reloadBtn = 0x123456

评论 (0)