标签 Javascript 下的文章

2024-08-09

Node.js 的 os 模块是一个内置模块，提供了一些操作系统相关的信息和工具。

以下是一些使用 os 模块的方法：

获取系统信息：




const os = require('os');
 
console.log('主机名: ' + os.hostname());
console.log('平台: ' + os.platform());
console.log('操作系统: ' + os.type());
console.log('CPU 架构: ' + os.arch());
console.log('发行版: ' + os.release());

获取内存信息：




const os = require('os');
 
console.log('总内存: ' + os.totalmem() + ' bytes');
console.log('可用内存: ' + os.freemem() + ' bytes');

获取CPU信息：




const os = require('os');
 
console.log('CPU 信息: ' + os.cpus());

获取网络接口信息：




const os = require('os');
 
console.log('网络接口: ' + os.networkInterfaces());

获取用户信息：




const os = require('os');
 
console.log('用户信息: ' + os.userInfo());

以上代码都是在 Node.js 环境中运行的，可以直接打开命令行工具（如：cmd，Terminal等），输入 node 命令，并输入上述代码，按下 Ctrl+D 或者输入 .exit 来退出 Node.js 环境。

- 阅读更多 -

如何使用vscode创建Node.js服务并结合内网穿透实现远程访问本地服务

System

2024-08-09

所有,nodejs

要在VSCode中创建Node.js服务并结合内网穿透实现远程访问本地服务，你可以按照以下步骤操作：

安装Node.js和VSCode。
创建一个简单的Node.js HTTP服务器。
使用内网穿透工具，如ngrok或natapp，将本地服务器暴露到公网。

以下是创建Node.js HTTP服务器的示例代码：




// server.js
const http = require('http');
 
const host = '127.0.0.1';
const port = 3000;
 
const server = http.createServer((req, res) => {
  res.statusCode = 200;
  res.setHeader('Content-Type', 'text/plain');
  res.end('Hello World\n');
});
 
server.listen(port, host, () => {
  console.log(`Server running at http://${host}:${port}/`);
});

运行服务：




node server.js

接下来，你需要选择一个内网穿透工具并按照其说明进行操作。例如，使用ngrok：

前往 ngrok官网并注册账户，下载并解压ngrok。
运行ngrok并获取一个公网地址：




./ngrok http 3000

ngrok会输出你的公网地址，例如http://randomsubdomain.ngrok.io，你可以使用这个地址从远程机器访问你的本地服务器。

完成这些步骤后，你就可以使用任何远程设备通过获取的公网地址访问你的本地Node.js服务了。

- 阅读更多 -

关于HTML、CSS和JS如何变成页面

System

2024-08-09

所有,html

HTML、CSS和JS组合起来可以创建一个完整的网页。

HTML (Hypertext Markup Language) 负责定义网页的结构。

CSS (Cascading Style Sheets) 负责定义网页的样式，即外观。

JS (JavaScript) 负责定义网页的行为，即交互。

以下是一个简单的HTML页面示例，它包含了基本的HTML结构，内联CSS样式和JavaScript代码，以展示页面是如何形成的：




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My First Page</title>
    <style>
        body {
            background-color: #f0f0f0;
            font-family: Arial, sans-serif;
        }
        .header {
            background-color: #35495e;
            color: #ffffff;
            padding: 10px;
            text-align: center;
        }
    </style>
</head>
<body>
 
<div class="header">
    <h1>Welcome to My Page</h1>
</div>
 
<p>This is a paragraph.</p>
 
<script>
    // JavaScript code here
    function showMessage() {
        alert('Hello, World!');
    }
    showMessage();
</script>
 
</body>
</html>

在这个例子中，HTML定义了页面的结构，CSS定义了页面的样式，而JavaScript通过showMessage函数弹出一个警告框，展示了页面的交互行为。

- 阅读更多 -

[前端开发] HTML CSS JavaScript 深入学习 - 防抖和节流

System

2024-08-09

所有,html

防抖和节流是优化函数执行频率的两种技巧，用以改善用户体验。

防抖（Debounce）: 指触发事件后，在指定的时间内，若再次触发事件，则重新计时。直到指定时间内没有再次触发事件时，事件处理函数才会执行一次。




function debounce(fn, wait) {
    let timeout = null;
    return function() {
        let context = this;
        let args = arguments;
        if (timeout) clearTimeout(timeout);
        let callNow = !timeout;
        timeout = setTimeout(() => {
            timeout = null;
        }, wait);
        if (callNow) fn.apply(context, args);
    };
}
 
// 使用
let myEfficientFn = debounce(function() {
    // 实际处理函数内容
    console.log('Debounced!');
}, 250);
 
window.addEventListener('resize', myEfficientFn);

节流（Throttle）: 指连续触发事件时，保证一定时间段内只执行一次事件处理函数。




function throttle(fn, wait) {
    let previous = 0;
    return function() {
        let context = this;
        let args = arguments;
        let now = new Date();
        if (now - previous > wait) {
            fn.apply(context, args);
            previous = now;
        }
    };
}
 
// 使用
let myEfficientFn = throttle(function() {
    // 实际处理函数内容
    console.log('Throttled!');
}, 250);
 
window.addEventListener('resize', myEfficientFn);

防抖和节流可以用于输入框的输入事件（如 keyup、mousemove），窗口的大小调整事件（resize），以及任何需要优化性能的事件处理中。

- 阅读更多 -

JavaScript全解析——Ajax

System

2024-08-09

所有,ajax




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

这段代码演示了如何使用XMLHttpRequest对象发送一个GET请求到服务器，并在请求完成后处理响应。它设置了请求的URL、请求方法以及响应完成时的回调函数。如果请求成功，它会输出响应文本，如果请求失败，它会输出错误信息。这是Ajax技术的一个基本示例，对于学习Ajax请求的开发者来说非常有帮助。

- 阅读更多 -

nodejs 配置typeScript

System

2024-08-09

所有,javascript

要在Node.js项目中配置TypeScript，请按照以下步骤操作：

确保你已经安装了Node.js和npm。
初始化Node.js项目（如果尚未初始化）：
```
npm init -y
```
安装TypeScript：
```
npm install typescript --save-dev
```
创建一个tsconfig.json文件，该文件包含TypeScript编译选项。可以通过运行以下命令来生成一个默认的tsconfig.json文件：
```
npx tsc --init
```
你可以编辑生成的tsconfig.json文件来调整编译选项。
安装ts-node，它可以直接运行TypeScript代码而不需先将其编译成JavaScript：
```
npm install ts-node typescript nodemon --save-dev
```
在package.json中添加脚本来运行TypeScript文件：
```
"scripts": {
  "start": "ts-node your-script.ts"
}
```
创建TypeScript文件，例如your-script.ts，并开始编写TypeScript代码。

以下是一个简单的your-script.ts示例：




const helloWorld = (message: string): void => {
  console.log(message);
};
 
helloWorld("Hello, TypeScript!");

运行TypeScript文件：




npm start

这样，你就设置了一个基本的Node.js项目，并配置了TypeScript。

System

2024-08-09

所有,javascript

这是一个关于JavaScript和TypeScript的新闻摘要。以下是对新闻内容的概括和关键点：

ECMAScript 2024: 预计在2024年发布的下一个ECMAScript版本将包含新的特性，比如可选的静态属性。
JS新set方法: 新的Set方法可以用来创建一个新的Set集合，而不需要显式地使用"new"关键字。
TS5.5: TypeScript 5.5 引入了一个新的--target选项，允许指定ECMAScript目标版本，并引入了一些其他新特性。
理解React Compiler: 解释了如何理解和分析React编译器的工作原理，以便更高效地进行调试和优化。

由于提供的是新闻摘要，这里不再需要详细的解释和代码实例。如果有具体的开发问题，需要进一步的讨论和分析。

- 阅读更多 -

Nodejs(Koa)-RabbitMq集成及基础使用

System

2024-08-09

所有,javascript




const Koa = require('koa');
const amqp = require('amqplib');
const app = new Koa();
 
// 连接RabbitMQ
const connectRabbitMq = async () => {
  try {
    const connection = await amqp.connect('amqp://localhost');
    const channel = await connection.createChannel();
    const queue = 'myQueue';
 
    // 声明队列
    await channel.assertQueue(queue, { durable: true });
 
    // 发送消息
    const sendMsg = async (msg) => {
      await channel.sendToQueue(queue, Buffer.from(msg), { persistent: true });
      console.log(`Sent: ${msg}`);
    };
 
    // 接收消息
    await channel.consume(queue, (msg) => {
      if (msg !== null) {
        console.log(`Received: ${msg.content.toString()}`);
        channel.ack(msg);
      }
    }, { noAck: false });
 
    app.listen(3000, () => {
      console.log('Server listening on port 3000...');
    });
  } catch (error) {
    console.error('RabbitMQ connection error:', error);
  }
};
 
connectRabbitMq();

这段代码首先引入了必要的模块，并创建了一个Koa实例。然后定义了一个异步函数connectRabbitMq来管理与RabbitMQ的连接。在连接建立后，它声明了一个持久化队列myQueue，并提供了发送和接收消息的功能。最后，当连接成功建立时，服务器开始监听3000端口。这个例子展示了如何在Node.js应用中集成RabbitMQ，并实现消息的发送和接收。

- 阅读更多 -

js截取图片地址后面的参数和在路径中截取文件名或后缀名

System

2024-08-09

所有,javascript

在JavaScript中，可以使用URL构造函数和URLSearchParams对象来截取图片地址后的参数，使用pathname属性来获取路径，然后通过字符串处理方法来截取文件名或后缀名。

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




// 截取图片地址后的参数
function getQueryParams(url) {
  const params = new URLSearchParams(new URL(url).search);
  let result = {};
  for (const [key, value] of params) {
    result[key] = value;
  }
  return result;
}
 
// 截取路径中的文件名或后缀名
function getFilenameFromPath(path) {
  return path.split('/').pop();
}
 
// 示例
const imageUrl = 'https://example.com/image.jpg?param1=value1&param2=value2';
const queryParams = getQueryParams(imageUrl);
const filename = getFilenameFromPath(new URL(imageUrl).pathname);
 
console.log(queryParams); // {param1: "value1", param2: "value2"}
console.log(filename); // image.jpg

这段代码首先定义了两个函数：getQueryParams用于解析URL中的查询参数，getFilenameFromPath用于从路径中获取文件名。然后通过实际的图片URL进行调用，并打印结果。

- 阅读更多 -

vue3集成bpmn.js

System

2024-08-09

所有,javascript

要在Vue 3中集成bpmn-js，你需要按照以下步骤操作：

安装bpmn-js:




npm install bpmn-js

创建一个Vue组件来集成bpmn-js:




<template>
  <div ref="bpmnContainer" style="width: 100%; height: 600px;"></div>
</template>
 
<script>
import BpmnJS from 'bpmn-js';
 
export default {
  name: 'BpmnModeler',
  mounted() {
    this.createModeler();
  },
  methods: {
    createModeler() {
      const bpmnContainer = this.$refs.bpmnContainer;
      const modeler = new BpmnJS({
        container: bpmnContainer
      });
 
      modeler.importXml(this.getBpmnXml()).then(() => {
        // 成功导入BPMN图后的操作
      }).catch((error) => {
        console.error('Error importing BPMN diagram', error);
      });
 
      // 其他操作，例如监听事件、导出图表等
    },
    getBpmnXml() {
      // 返回BPMN XML字符串
      return `<?xml version="1.0" encoding="UTF-8"?>
      <bpmn:definitions xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:bpmn="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:dc="http://www.omg.org/spec/DD/20100524/DC" xmlns:di="http://www.omg.org/spec/DD/20100524/DI" typeLanguage="http://www.w3.org/2001/XMLSchema" expressionLanguage="http://www.w3.org/1999/XPath" targetNamespace="http://bpmn.io/schema/bpmn">
        <bpmn:process id="Process_0123yuv8"/>
        <!-- 其他BPMN元素 -->
      </bpmn:definitions>`;
    }
  }
};
</script>

这个组件在被挂载到DOM后会创建一个bpmn-js模型编辑器实例，并尝试导入一个简单的BPMN XML字符串。你可以根据需要替换getBpmnXml方法以获取实际的BPMN XML或者修改createModeler方法来配置bpmn-js的更多选项。

- 阅读更多 -