普通视图

发现新文章,点击刷新页面。
昨天以前首页

Node.js 学习第一天:入门指南

作者 Mintopia
2025年4月18日 11:14

引言

Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境,让 JavaScript 可以在服务器端运行。它使得开发者可以使用 JavaScript 构建高性能、可扩展的网络应用程序。在第一天的学习中,我们将完成环境搭建,并了解 Node.js 的基本概念和简单应用。

一、环境搭建

1. 下载与安装

Node.js 的官方网站是nodejs.org/ ,在这里你可以找到适合你操作系统的安装包。对于大多数开发者来说,建议下载长期支持(LTS)版本,因为它更加稳定。

安装过程非常简单,按照安装向导的提示一步一步进行即可。安装完成后,你可以通过以下命令来验证是否安装成功:

node -v

如果安装成功,该命令会输出 Node.js 的版本号。同时,Node.js 自带了包管理工具 npm(Node Package Manager),你可以使用以下命令验证 npm 的安装:

npm -v

2. 集成开发环境(IDE)选择

有许多 IDE 可以用于 Node.js 开发,以下是一些常见的选择:

  • Visual Studio Code:这是一个免费且功能强大的开源 IDE,拥有丰富的插件生态系统,对 Node.js 开发提供了很好的支持。
  • WebStorm:由 JetBrains 开发的专业 JavaScript IDE,具备智能代码提示、调试工具等高级功能,但它是付费软件。

二、Node.js 基本概念

1. 单线程与事件驱动

Node.js 采用单线程、事件驱动的架构。单线程意味着在同一时间只能执行一个任务,但通过事件驱动和非阻塞 I/O 操作,Node.js 可以高效地处理大量并发请求。

例如,当一个 Node.js 程序发起一个文件读取请求时,它不会等待文件读取完成,而是继续执行后续的代码。当文件读取完成后,会触发一个事件,Node.js 会处理这个事件。

2. 模块系统

Node.js 使用模块系统来组织代码。一个模块就是一个独立的 JavaScript 文件,它可以包含变量、函数和类等。Node.js 内置了许多核心模块,如fs(文件系统模块)、http(HTTP 服务器模块)等。

以下是一个简单的模块示例:

// math.js
function add(a, b) {
    return a + b;
}
function subtract(a, b) {
    return a - b;
}
module.exports = {
    add: add,
    subtract: subtract
};

在另一个文件中,我们可以引入并使用这个模块:

// main.js
const math = require('./math');
const result1 = math.add(5, 3);
const result2 = math.subtract(5, 3);
console.log('加法结果:', result1);
console.log('减法结果:', result2);

3. 全局对象

在 Node.js 中,有一些全局对象可以在任何模块中使用。其中最常用的是global对象,它类似于浏览器中的window对象。

以下是一些常见的全局对象和方法:

  • console:用于在控制台输出信息,如console.log()、console.error()等。
  • __dirname:表示当前模块所在的目录路径。
  • __filename:表示当前模块的文件路径。
console.log('当前目录:', __dirname);
console.log('当前文件:', __filename);

三、第一个 Node.js 程序

1. 创建一个简单的 HTTP 服务器

使用 Node.js 的http模块,我们可以轻松创建一个简单的 HTTP 服务器。以下是一个示例代码:

const http = require('http');
const server = http.createServer((req, res) => {
    res.statusCode = 200;
    res.setHeader('Content-Type', 'text/plain');
    res.end('Hello, World!\n');
});
const port = 3000;
server.listen(port, () => {
    console.log(`服务器正在监听端口 ${port}`);
});

将上述代码保存为server.js,然后在终端中运行以下命令:

node server.js

打开浏览器,访问http://localhost:3000,你将看到页面上显示Hello, World!。

2. 代码解释

  • http.createServer():创建一个 HTTP 服务器实例,它接受一个回调函数作为参数,该回调函数在每次收到 HTTP 请求时都会被调用。
  • res.statusCode:设置 HTTP 响应的状态码,这里设置为 200 表示请求成功。
  • res.setHeader():设置 HTTP 响应的头部信息,这里设置响应内容的类型为纯文本。
  • res.end():结束响应并发送响应内容。
  • server.listen():让服务器开始监听指定的端口。

四、总结

在第一天的学习中,我们完成了 Node.js 的环境搭建,了解了 Node.js 的基本概念,包括单线程与事件驱动、模块系统和全局对象。同时,我们还创建了一个简单的 HTTP 服务器。这些知识是学习 Node.js 的基础,在后续的学习中,我们将深入探讨 Node.js 的更多功能和应用。

希望你通过今天的学习,对 Node.js 有了一个初步的认识,并能够顺利运行第一个 Node.js 程序。在接下来的学习中,你可以尝试修改代码,添加更多的功能,进一步熟悉 Node.js 的开发。

Three.js 学习第一天:基础搭建与核心概念

作者 Mintopia
2025年4月18日 11:09

在当今的 Web 开发领域,为用户呈现丰富、沉浸式的体验至关重要。Three.js 作为一个强大的 JavaScript 库,能够助力开发者在网页中轻松创建出令人惊叹的 3D 场景。接下来,让我们开启为期 100 天的 Three.js 学习之旅,今天是第一天,我们将聚焦于环境搭建以及几个核心概念。

一、开发环境搭建

在开始编写 Three.js 代码之前,需要准备好相应的开发环境。

(一)文本编辑器

推荐使用 Visual Studio Code(简称 VS Code),它功能强大,拥有丰富的插件生态系统,能极大提升开发效率。你可以从官网下载并安装。

(二)本地服务器

由于浏览器的安全策略,直接打开本地的 HTML 文件可能无法正常加载 Three.js 资源。因此,需要搭建一个本地服务器。在 VS Code 中,安装 “Live Server” 插件,安装完成后,在 HTML 文件中右键选择 “Open with Live Server”,即可启动本地服务器。

(三)引入 Three.js 库

有两种常见方式引入 Three.js 库:

  1. CDN 链接:在 HTML 文件的标签内添加如下代码:
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r134/three.min.js"></script>

这会从 CDN(内容分发网络)加载 Three.js 的压缩版本,方便快捷。

  1. 下载库文件:从Three.js 官下载库文件,解压后将three.min.js文件放在项目目录中,然后在 HTML 文件中通过相对路径引入:
<script src="path/to/three.min.js"></script>

这里的path/to需要替换为实际存放three.min.js文件的路径。

二、Three.js 核心概念

(一)场景(Scene)

场景是 Three.js 中所有 3D 对象的容器,它就像是一个舞台,所有的 “表演”(物体、灯光等)都在这里进行。通过以下代码创建一个场景:

const scene = new THREE.Scene();

场景对象scene创建完成后,后续创建的所有物体、灯光等都要添加到这个场景中,才能最终被渲染出来。

(二)相机(Camera)

相机决定了从哪个角度观察场景,它类似于我们现实生活中的眼睛。Three.js 提供了多种相机类型,最常用的是透视相机(PerspectiveCamera),它模拟人眼的视觉效果,符合近大远小的透视规律。创建一个透视相机的代码如下:

const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

这里的参数解释如下:

  • 75:相机的视野角度(FOV),即垂直方向上能看到的角度范围,值越大,看到的场景范围越广。
  • window.innerWidth / window.innerHeight:相机的宽高比,通常设置为浏览器窗口的宽高比,以保证场景在不同尺寸屏幕上正确显示。
  • 0.1:相机的近裁剪平面,距离相机小于这个值的物体将不会被渲染。
  • 1000:相机的远裁剪平面,距离相机大于这个值的物体将不会被渲染。

创建相机后,还需要设置其位置,使其能看到场景中的物体,例如:

camera.position.set(0, 0, 5);

上述代码将相机设置在(0, 0, 5)的位置,其中三个值分别对应三维坐标系中的x、y、z轴坐标。最后,要将相机添加到场景中:

scene.add(camera);

(三)几何体(Geometry)

几何体定义了 3D 物体的形状。Three.js 内置了许多常用的几何体,如立方体(BoxGeometry)、球体(SphereGeometry)、圆柱体(CylinderGeometry)等。以创建一个立方体几何体为例:

const geometry = new THREE.BoxGeometry(1, 1, 1);

这里的三个参数分别表示立方体的宽度、高度和深度,单位是任意的,这里设置为 1。

(四)材质(Material)

材质决定了物体的外观,比如颜色、纹理、透明度等。不同的材质类型会有不同的表现效果。例如,使用基础材质(MeshBasicMaterial)创建一个红色的材质:

const material = new THREE.MeshBasicMaterial({ color: 0xff0000 });

0xff0000是十六进制的颜色值,表示红色。

(五)网格(Mesh)

网格是由几何体和材质组合而成的 3D 物体,它将几何体的形状和材质的外观结合起来,最终呈现在场景中。创建一个网格对象的代码如下:

const mesh = new THREE.Mesh(geometry, material);

这里使用之前创建的geometry和material来创建网格。创建完成后,将网格添加到场景中:

scene.add(mesh);

(六)渲染器(Renderer)

渲染器负责将场景和相机的信息渲染到屏幕上。最常用的是 WebGL 渲染器(WebGLRenderer),它利用浏览器的 GPU 加速来高效渲染 3D 场景。创建一个 WebGL 渲染器的代码如下:

const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

renderer.setSize(window.innerWidth, window.innerHeight)设置渲染器的大小为浏览器窗口的大小,这样渲染出来的场景能铺满整个窗口。document.body.appendChild(renderer.domElement)将渲染器生成的 DOM 元素添加到 HTML 页面的标签内,从而在页面中显示出渲染结果。最后,通过以下代码执行渲染操作:

renderer.render(scene, camera);

这行代码告诉渲染器使用指定的相机来渲染场景。

通过今天的学习,我们完成了 Three.js 开发环境的搭建,并了解了场景、相机、几何体、材质、网格和渲染器这些核心概念,还通过代码创建了一个简单的 3D 场景。在接下来的学习中,我们将逐步深入,探索 Three.js 更多强大的功能。

Node.js 对前端技术有利的知识点

作者 Mintopia
2025年4月17日 11:21

Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境,它让 JavaScript 可以在服务器端运行。下面为你介绍一些 Node.js 对前端技术有利的知识点:

1. 前端构建工具

自动化任务

像 Grunt 和 Gulp 这类构建工具,可借助 Node.js 来自动化完成前端开发里的重复性任务,例如文件压缩、代码合并、编译预处理样式表等。以 Gulp 为例,它能让开发者用 JavaScript 代码来定义任务流程,从而提高开发效率。

const gulp = require('gulp');
const uglify = require('gulp-uglify');
// 定义一个压缩JavaScript文件的任务
gulp.task('compress', function () {
    return gulp.src('src/js/*.js')
      .pipe(uglify())
      .pipe(gulp.dest('dist/js'));
});

打包工具

Webpack 和 Rollup 等打包工具也是基于 Node.js 构建的。它们可以将多个模块打包成一个或多个文件,优化资源加载。Webpack 还支持各种加载器和插件,能处理不同类型的文件,如 CSS、图片等。

2. 前端开发服务器

本地开发环境

Node.js 能够搭建本地开发服务器,像 Express 和 Koa 这类框架就很适合创建轻量级的服务器。在开发过程中,服务器可以实时响应代码的变化,自动刷新页面,提升开发体验。

const express = require('express');
const app = express();
// 静态文件服务
app.use(express.static('public'));
const port = 3000;
app.listen(port, () => {
    console.log(`Server running on port ${port}`);
});

代理服务器

在开发过程中,可能会遇到跨域问题。Node.js 服务器可以作为代理服务器,转发请求,解决跨域问题。

3. 前端包管理

npm 和 yarn

npm(Node Package Manager)是 Node.js 的默认包管理器,yarn 则是 Facebook 推出的另一个包管理器。它们可以方便地管理前端项目的依赖,快速安装、更新和删除第三方库。例如,使用npm install命令可以安装项目所需的所有依赖。

4. 实时通信

WebSocket

Node.js 配合 WebSocket 库(如 Socket.IO)可以实现实时通信功能。在前端开发中,实时通信常用于聊天应用、实时数据展示等场景。

const express = require('express');
const app = express();
const http = require('http').Server(app);
const io = require('socket.io')(http);
// 监听客户端连接事件
io.on('connection', (socket) => {
    console.log('A user connected');
    // 监听客户端发送的消息
    socket.on('chat message', (msg) => {
        io.emit('chat message', msg);
    });
    // 监听客户端断开连接事件
    socket.on('disconnect', () => {
        console.log('A user disconnected');
    });
});
const port = 3000;
http.listen(port, () => {
    console.log(`Server running on port ${port}`);
});

5. 同构应用开发

服务器端渲染(SSR)

Node.js 允许在服务器端运行 JavaScript 代码,这使得实现服务器端渲染成为可能。像 Next.js(用于 React)和 Nuxt.js(用于 Vue)这类框架,就可以利用 Node.js 在服务器端渲染页面,提高首屏加载速度和搜索引擎优化(SEO)效果。

6. 前端测试

测试框架

Node.js 上有许多前端测试框架,如 Jest、Mocha 和 Jasmine 等。这些框架可以帮助开发者编写和运行单元测试、集成测试等,确保代码的质量。例如,Jest 是一个功能强大的 JavaScript 测试框架,它可以自动发现和运行测试用例。

function sum(a, b) {
    return a + b;
}
test('adds 1 + 2 to equal 3', () => {
    expect(sum(1, 2)).toBe(3);
});

7. 前端脚手架工具

Yeoman 和 create-react-app

Node.js 可以用于创建前端脚手架工具,快速生成项目模板。Yeoman 是一个通用的脚手架工具,它可以根据不同的生成器生成各种类型的项目。而 create-react-app 则是专门为 React 项目设计的脚手架工具,它可以帮助开发者快速搭建一个新的 React 项目。

❌
❌