分类前端技术下的文章

2024-08-21

Node.js 是一个开源和跨平台的 JavaScript 运行时环境。它在后端运行 V8 JavaScript 引擎，用于方便地构建快速、可扩展的网络应用。

Node.js 的主要组成部分包括：

事件循环（Event Loop）：Node.js 是基于事件驱动的非阻塞 I/O 模型，事件循环是其核心组成部分。
模块系统：Node.js 使用 CommonJS 模块系统，其中每个文件是一个模块，并可以导入或导出其他模块。
文件系统：Node.js 提供了文件操作的 API，可以进行文件的读写操作。
网络功能：Node.js 提供了网络通信的能力，可以创建 TCP、UDP 或 HTTP 服务器。
npm：Node.js 的包管理器，用于管理项目依赖。

Node.js 的架构图大致如下：

Node.js 架构图

Node.js 架构图中包含了 V8 引擎、 libuv、 icu 和其他依赖库。

V8 引擎：用于解析 JavaScript 代码。
libuv：提供了平台无关的异步 I/O 能力。
icu：国际化支持，提供了字符编码的转换等功能。

Node.js 架构图中的事件循环处理非阻塞 I/O 操作，内置的 libuv 库负责所有的异步 I/O 操作，这使得 Node.js 可以使用少量的线程/进程处理大量的并发操作。

Node.js 使用的是单线程模型，但是它可以通过 libuv 库来处理文件描述符，通过这种方式，Node.js 可以在单个线程/进程上处理大量的并发操作。

Node.js 示例代码：




const http = require('http');
 
const hostname = '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, hostname, () => {
  console.log(`Server running at http://${hostname}:${port}/`);
});

以上代码创建了一个简单的 HTTP 服务器，监听在本地的 3000 端口。当访问这个服务器时，它会响应 'Hello World' 字符串。这是 Node.js 的一个基本示例，展示了 Node.js 的基本用法和功能。

virtualjoystick.js - 在Web上实现虚拟游戏手柄

2024-08-21

virtualjoystick.js 是一个用于在Web上实现虚拟游戏手柄功能的JavaScript库。以下是一个使用 virtualjoystick.js 创建和管理虚拟游戏手柄的简单示例：




<!DOCTYPE html>
<html>
<head>
    <title>Virtual Joystick Example</title>
    <script src="path/to/virtualjoystick.js"></script>
    <style>
        #joystick {
            width: 100px;
            height: 100px;
            background-color: #3498db;
            border-radius: 50%;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 1000;
            touch-action: none;
        }
    </style>
</head>
<body>
    <div id="joystick"></div>
 
    <script>
        // 创建一个新的虚拟游戏手柄
        var joystick = new VirtualJoystick({
            container: document.body, // 手柄的容器元素
            mouseSupport: true, // 允许使用鼠标控制
            touchSupport: true, // 允许使用触摸控制
            baseX: window.innerWidth / 2, // 初始X坐标
            baseY: window.innerHeight / 2 // 初始Y坐标
        });
 
        // 监听手柄的移动事件
        joystick.addEventListener('touchMove', function(event) {
            // event.deltaX 和 event.deltaY 提供了手柄移动的方向和距离
            console.log('Touch Move: ', event);
        });
 
        // 监听手柄的按下事件
        joystick.addEventListener('touchStart', function(event) {
            console.log('Touch Start: ', event);
        });
 
        // 监听手柄的松开事件
        joystick.addEventListener('touchEnd', function(event) {
            console.log('Touch End: ', event);
        });
    </script>
</body>
</html>

在这个示例中，我们创建了一个圆形的手柄，并监听了它的移动、按下和松开事件。你可以根据自己的需求调整样式和事件处理。这个库提供了灵活的API，允许你创建各种各样的虚拟手柄体验。

2024-08-21

报错信息 "triggerUncaught" 通常表示在 JavaScript 代码执行过程中发生了一个未捕获的异常。在配置 postcss-px-to-viewport 插件的 postcss.config.js 文件时遇到了错误。

解决方法：

确认 postcss-px-to-viewport 插件是否已正确安装。
检查 postcss.config.js 文件中的配置是否符合插件要求的格式。
确保配置文件中的选项（如视口宽度、视口单位等）是正确设置的。
如果使用了其他的 PostCSS 插件，确保它们之间的版本兼容性。
查看具体的错误信息，通常在控制台输出的错误栈中会有更详细的信息指示错误的原因。
如果错误信息指向了某一行配置代码，检查那一行代码是否有语法错误或者不合规范的写法。

示例配置：




module.exports = {
  plugins: {
    'postcss-px-to-viewport': {
      unitToConvert: 'px', // 要转换的单位
      viewportWidth: 375, // 设计稿宽度
      unitPrecision: 5, // 单位转换后保留的精度
      propList: ['*'], // 指定转换那些属性，* 表示全部
      viewportUnit: 'vw', // 希望使用的视口单位
      fontViewportUnit: 'vw', // 字体使用的视口单位
      selectorBlackList: [], // 指定不转换哪些选择器
      minPixelValue: 1, // 最小的转换数值
      mediaQuery: false, // 是否在媒体查询中也转换
      replace: true, // 是否直接更换属性值
      exclude: [], // 排除不处理的文件
      landscape: false // 是否处理横屏情况
    }
  }
};

确保配置文件的格式和属性名都是正确的，并且所有的值都是适当的。如果问题依然存在，可以尝试重启开发服务器或者清除 node\_modules 目录后重新安装依赖。

如何在vscode中使ts自动转译成js文件

2024-08-21

在VSCode中，要让TypeScript自动编译成JavaScript文件，你需要进行以下几个步骤：

确保你已经安装了TypeScript。可以通过运行npm install -g typescript来全局安装TypeScript。
在VSCode中打开你的TypeScript项目。
在项目根目录下创建一个tsconfig.json文件，这个文件用于配置TypeScript编译器的选项。一个基本的tsconfig.json文件可以通过运行tsc --init生成。
确保tsconfig.json中的outDir选项指向你想要输出JavaScript文件的目录。
安装并使用TypeScript VSCode插件，这样VSCode会自动监视你的TypeScript文件的变化，并在保存时自动编译成JavaScript。
（可选）你也可以在tasks.json中设置一个任务，来手动触发编译过程。

下面是一个简单的tsconfig.json示例：




{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "outDir": "./dist",
    "strict": true
  },
  "include": [
    "./src/**/*"
  ]
}

这个配置文件指定了TypeScript编译器的目标环境、模块系统、输出目录，并包含了项目中的TypeScript文件。

当你保存一个TypeScript文件时，VSCode的TypeScript插件会自动编译这个文件并将生成的JavaScript文件保存在outDir指定的目录下。如果你没有安装TypeScript插件，你也可以通过VSCode的终端运行tsc命令来手动编译整个项目。

JS 监听网络状态

2024-08-21

在JavaScript中，可以通过navigator.onLine属性来检查当前的网络状态。此属性返回一个布尔值，表示浏览器是否认为自己处于在线状态。

要监听网络状态变化，可以使用window.addEventListener来监听online和offline事件。

下面是一个监听网络状态变化的示例代码：




// 检查初始网络状态
if (navigator.onLine) {
  console.log('在线');
} else {
  console.log('离线');
}
 
// 监听网络状态变化事件
window.addEventListener('online', function() {
  console.log('网络恢复连接');
});
 
window.addEventListener('offline', function() {
  console.log('网络已断开连接');
});

当网络状态变化时，会在控制台输出相应的信息。这个方法适用于大多数现代浏览器，但请注意，由于特定的浏览器或设备可能有特定的实现差异，所以最好在目标平台上进行测试。

uniapp开发小程序用pdf.js做pdf预览

2024-08-21

在uniapp开发小程序时使用pdf.js进行PDF预览，你需要按照以下步骤操作：

在项目中引入pdf.js。
使用<canvas>标签进行PDF渲染。

以下是一个简单的示例：

首先，在项目中安装pdf.js依赖：




npm install pdfjs-dist

然后，在页面的<script>部分编写代码：




import pdfjsLib from 'pdfjs-dist/build/pdf';
 
export default {
  data() {
    return {
      pdfUrl: 'path/to/your/pdf/file.pdf', // PDF文件的URL
      pageNum: 1, // 当前页
      pageRendering: false,
      pageNumPending: null,
      scale: 1.5, // 缩放比例
      canvas: null,
      ctx: null
    };
  },
  onReady() {
    this.loadPdf();
  },
  methods: {
    loadPdf() {
      const loadingTask = pdfjsLib.getDocument(this.pdfUrl);
      loadingTask.promise.then(pdf => {
        console.log('PDF loaded');
        this.pdfDoc = pdf;
        this.renderPage(this.pageNum);
      }).catch(error => {
        console.error('Error loading PDF: ', error);
      });
    },
    renderPage(num) {
      this.pdfDoc.getPage(num).then(page => {
        const viewport = page.getViewport({ scale: this.scale });
        const canvas = this.$refs.pdfCanvas;
        const ctx = canvas.getContext('2d');
        canvas.height = viewport.height;
        canvas.width = viewport.width;
        const renderContext = {
          canvasContext: ctx,
          viewport: viewport
        };
        const renderTask = page.render(renderContext);
        renderTask.promise.then(() => {
          console.log('Page rendered');
        });
      }).catch(error => {
        console.error('Error rendering page: ', error);
      });
    }
  }
}

在页面的<template>部分，添加以下代码：




<view>
  <canvas ref="pdfCanvas" canvas-id="pdfCanvas"></canvas>
</view>

确保在uniapp的pages.json中配置了对<canvas>的支持：




{
  "easycom": {
    "autoscan": true,
    "custom": {
      "^canvas$": "@/components/uni-canvas/uni-canvas.vue"
    }
  }
}

以上代码实现了PDF文件的加载和首页的渲染。你可以通过修改pageNum来渲染不同的页码，并且可以通过scale属性调整PDF的缩放比例。注意，在实际的小程序环境中，由于资源限制和性能考虑，可能需要对PDF的渲染进行优化，比如分批次渲染以避免长时间的渲染时间。

推荐一款超实用的React分页组件 - react-js-pagination

2024-08-21




import React from 'react';
import Pagination from 'react-js-pagination';
 
class PaginationComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      activePage: 1,
    };
    this.handlePageChange = this.handlePageChange.bind(this);
  }
 
  handlePageChange(pageNumber) {
    this.setState({ activePage: pageNumber });
    // 这里可以添加获取数据的逻辑，例如从API加载数据
    // 你可以使用 `pageNumber` 作为请求的一部分或者状态管理器中的状态
  }
 
  render() {
    const { itemsCount } = this.props; // 假设从父组件传入itemsCount
    const { activePage } = this.state;
    return (
      <Pagination
        activePage={activePage}
        itemsCountPerPage={10} // 假设每页显示10个项目
        totalItemsCount={itemsCount}
        onChange={this.handlePageChange}
      />
    );
  }
}
 
export default PaginationComponent;

这个代码示例展示了如何在React组件中使用react-js-pagination库来实现分页功能。组件有一个构造函数来初始化状态，handlePageChange方法用于处理页面变化，并更新组件的状态。render函数中渲染分页组件，并将必要的属性传入，如当前激活页、每页项目数、总项目数，以及页面变更时的处理函数。

3分钟了解 egg.js

2024-08-21

Egg.js 是一个为企业级开发而设计的Node.js框架。它的设计目的是为了使开发者能够快速的完成开发，也能让基础设施的维护变得简单。

以下是一个简单的Egg.js项目的创建和一个基本的GET路由的例子。

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

创建Egg.js项目:




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

编辑 app/router.js 文件，添加一个GET路由:




// app/router.js
module.exports = app => {
  const { router, controller } = app;
  router.get('/', controller.home.index);
};

编辑 app/controller/home.js 文件，添加一个简单的GET路由处理函数:




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

启动Egg.js项目:




$ npm run dev

现在，你可以在浏览器中访问 http://127.0.0.1:7001 看到输出 "Hello, Egg!"，或者通过 curl 命令行工具来测试:




$ curl http://127.0.0.1:7001
Hello, Egg!

以上就是一个简单的Egg.js项目的创建和一个基本的GET路由的例子。Egg.js 提供了丰富的功能和插件，可以帮助开发者更快速地构建企业级应用。

Three.js——创建场景、渲染三维对象、添加灯光、添加阴影、添加雾化

2024-08-21




import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
 
// 场景、摄像机、渲染器
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
 
// 灯光
const ambientLight = new THREE.AmbientLight(0x404040);
scene.add(ambientLight);
 
const directionalLight = new THREE.DirectionalLight(0xffffff);
directionalLight.position.set(1, 1, 0.5).normalize();
scene.add(directionalLight);
 
// 阴影
renderer.shadowMap.enabled = true;
directionalLight.castShadow = true;
 
// 创建地面
const geometry = new THREE.PlaneGeometry(100, 100, 1, 1);
const material = new THREE.MeshLambertMaterial({ color: 0xffffff });
const plane = new THREE.Mesh(geometry, material);
plane.receiveShadow = true;
plane.rotation.x = -Math.PI / 2;
scene.add(plane);
 
// 创建模型
const loader = new GLTFLoader();
loader.load('path/to/your/gltf/model', function (gltf) {
  scene.add(gltf.scene);
}, undefined, function (error) {
  console.error(error);
});
 
// 控制器
const controls = new OrbitControls(camera, renderer.domElement);
 
// 雾化
const fog = new THREE.Fog(0xffffff, 10, 60);
scene.fog = fog;
 
// 渲染循环
function animate() {
  requestAnimationFrame(animate);
  renderer.render(scene, camera);
}
 
animate();

这段代码展示了如何使用Three.js创建一个包含场景、摄像机、渲染器、灯光、阴影、地面、模型、控制器以及雾化的基本3D场景。其中，OrbitControls用于允许用户通过鼠标滚轮、拖拽来控制相机的旋转和缩放，THREE.Fog用于给场景添加一层雾化效果。这是一个很好的入门级教程，适合新手学习Three.js的基础。

【vue2】使用vue常见的业务流程与实现思路

2024-08-21

在Vue 2中，业务流程通常涉及以下几个方面：

组件间通信：使用props传递数据和$emit触发事件。
状态管理：使用Vuex进行状态管理。
路由导航：使用vue-router实现路由导航。
异步数据加载：使用生命周期钩子或者watch来加载数据。
表单验证：使用VeeValidate或自定义方法进行表单验证。
动态组件与组件切换：使用<component>元素和is特性。
过滤器：使用全局过滤器或组件内的计算属性。
事件处理：使用v-on或@来绑定事件监听器。

以下是一个简单的Vue 2组件示例，展示了如何实现一个简单的登录表单：




<template>
  <div>
    <form @submit.prevent="login">
      <input type="text" v-model="credentials.username" placeholder="Username">
      <input type="password" v-model="credentials.password" placeholder="Password">
      <button type="submit">Login</button>
    </form>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      credentials: {
        username: '',
        password: ''
      }
    };
  },
  methods: {
    login() {
      // 调用API登录逻辑
      this.$emit('login', this.credentials);
    }
  }
};
</script>

在这个例子中，我们定义了一个简单的登录表单，用户输入用户名和密码，然后点击登录按钮提交表单。我们使用了v-model来实现双向数据绑定，并在表单的submit事件中调用login方法。在login方法中，我们通过this.$emit触发了一个事件，这个事件可以被父组件监听并处理登录逻辑。