1. 首页
  2. 分类
  3. javascript
@vitejs/plugin-legacy 为你的 Vite 项目提供对旧版浏览器的支持
System
2024-08-13
所有,javascript

@vitejs/plugin-legacy 是 Vite 生态中的一个插件，它用于为 Vite 项目提供对旧浏览器的支持。通过该插件，你可以创建两个构建版本：现代版本和遗留版本，以确保现代浏览器能够获得最好的性能，同时还能支持旧版浏览器。

以下是如何在 Vite 项目中使用 @vitejs/plugin-legacy 的示例代码：

首先，你需要安装这个插件：




npm install @vitejs/plugin-legacy --save-dev

然后，在你的 Vite 配置文件中引入并配置该插件：




// vite.config.js
import { defineConfig } from 'vite';
import legacy from '@vitejs/plugin-legacy';
 
export default defineConfig({
  plugins: [
    legacy({
      targets: ['defaults', 'not IE 11'], // 指定要支持的浏览器的范围
    }),
  ],
});

在上述配置中，targets 选项指定了要为哪些浏览器提供支持。你可以根据需要调整这个选项。

使用该插件后，Vite 会生成两套 Chunk 文件：一套现代的 JavaScript 文件（无 transpile）和一套为遗留浏览器转换过的 JavaScript 文件（通过 babel-preset-env 或者其他转换器）。

为了在 HTML 中加载这两套文件，你可以使用如下的条件注释：




<!DOCTYPE html>
<html>
<head>
  <script type="module" src="/src/main.js"></script>
  <!-- 现代浏览器 -->
  <script type="module" src="/src/main.legacy.js"></script>
  <!-- 为了兼容不支持模块的浏览器 -->
  <script nomodule src="/src/main.js"></script>
  <!-- 遗留浏览器 -->
</head>
<body>
  <div id="app"></div>
</body>
</html>

在这个例子中，现代浏览器会加载 .js 文件作为模块，而遗留浏览器则会加载不支持模块的 .legacy.js 文件。这样，你就可以同时支持现代和遗留浏览器，提升了应用的兼容性。

- 阅读更多 -
JavaScript实践：用Canvas开发一个可配置的大转盘抽奖功能
System
2024-08-13
所有,javascript



// 假设我们已经有了一个HTML页面，其中包含一个id为"canvas"的canvas元素
// 以下是实现大转盘抽奖功能的核心代码
 
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const width = canvas.width;
const height = canvas.height;
const centerX = width / 2;
const centerY = height / 2;
const radius = Math.min(centerX, centerY);
 
// 转盘的配置项
const config = {
    itemCount: 6, // 转盘上的奖项数量
    outerRadius: radius - 100, // 转盘外半径
    innerRadius: radius - 150, // 转盘内半径
    startAngle: -Math.PI / 2, // 第一个奖项的起始角度
    endAngle: Math.PI / 2, // 最后一个奖项的结束角度
    textColor: 'white', // 文本颜色
    textFont: '20px Arial', // 文本字体
    textBaseline: 'middle', // 文本基线对齐方式
    fillStyle: ['red', 'blue', 'green', 'yellow', 'orange', 'purple'] // 每个奖项的填充颜色
};
 
// 绘制转盘
function drawRouletteWheel(config) {
    let angle = config.startAngle;
    for (let i = 0; i < config.itemCount; i++) {
        angle += Math.PI / (config.itemCount / 2);
        ctx.beginPath();
        ctx.moveTo(centerX, centerY);
        ctx.arc(centerX, centerY, config.outerRadius, angle, Math.PI / (config.itemCount / 2), false);
        ctx.arc(centerX, centerY, config.innerRadius, Math.PI / (config.itemCount / 2), angle, true);
        ctx.closePath();
        ctx.fillStyle = config.fillStyle[i];
        ctx.fill();
 
        ctx.save();
        ctx.translate(centerX, centerY);
        ctx.rotate(angle);
        ctx.fillStyle = config.textColor;
        ctx.font = config.textFont;
        ctx.textBaseline = config.textBaseline;
        ctx.fillText('Prize ' + (i + 1), -ctx.measureText('Prize ' + (i + 1)).width / 2, 0);
        ctx.restore();
    }
}
 
// 初始化转盘
drawRouletteWheel(config);

这段代码展示了如何使用Canvas API来绘制一个基本的转盘抽奖功能。在这个例子中，我们定义了一个config对象来配置转盘的外半径、内半径、开始角度、结束角度、颜色和奖项文本。然后我们定义了一个drawRouletteWheel函数来根据这些配置绘制转盘，并使用了变换操作来将奖项文本旋转以匹配它们在转盘上的位置。最后，我们调用drawRouletteWheel函数来初始化转盘。

- 阅读更多 -
Js核心知识点 - 关于 promise 详解
System
2024-08-13
所有,javascript

Promise 是 JavaScript 中进行异步编程的一个API。它是一个对象，用来表示一个异步操作的最终结果。

Promise 有三种状态：

  1. 未决定 (pending)
  2. 已解决 (resolved)
  3. 已拒绝 (rejected)

一旦Promise的状态改变，就会永久保持该状态，不会再变。

创建一个 Promise 对象：




let promise = new Promise(function(resolve, reject) {
  // 异步操作
  if (/* 异步操作成功 */) {
    resolve(value); // 成功时调用
  } else {
    reject(error); // 失败时调用
  }
});

使用 then 方法添加回调函数处理 Promise：




promise.then(function(successMessage) {
  // 处理成功的情况
}, function(errorMessage) {
  // 处理失败的情况
});

使用 catch 方法处理 Promise 中的错误：




promise.then(function(successMessage) {
  // 处理成功的情况
}).catch(function(errorMessage) {
  // 处理失败的情况
});

使用 finally 方法处理 Promise 无论成功或失败都要执行的代码：




promise.then(function(successMessage) {
  // 处理成功的情况
}).catch(function(errorMessage) {
  // 处理失败的情况
}).finally(function() {
  // 总是执行的代码
});

Promise 的链式调用：




promise
  .then(function(successMessage) {
    // 处理成功的情况
    return anotherPromise; // 返回一个新的 Promise
  })
  .then(function(successMessageFromNextPromise) {
    // 处理下一个 Promise 的成功情况
  })
  .catch(function(errorMessage) {
    // 处理任何阶段的错误
  });

这些是 Promise 的基本概念和使用方法，Promise 在 JavaScript 中非常重要，也非常有用，可用于异步编程，简化回调函数嵌套的问题。

- 阅读更多 -
解决vue-cli · Failed to download repo vuejs-templates/webpack: connect ETIMEDOUT 20.205.243.166:443问题
System
2024-08-13
所有,javascript

报错解释：

这个错误表示在尝试下载vue-cli模板时，连接到github.com时发生了超时。ETIMEDOUT是一个常见的网络错误，它意味着请求超时。这可能是因为网络问题、GitHub服务不稳定或者是Vue CLI的版本不匹配。

解决方法：

  1. 检查网络连接：确保你的网络连接是稳定的。
  2. 使用VPN或代理：如果你在一个网络受限制的环境中，尝试使用VPN或代理来访问GitHub。
  3. 检查GitHub状态：访问GitHub StatusGitHub是否有服务中断。
  4. 更换模板源：可以尝试更换Vue CLI的模板源，使用淘宝镜像等。
  5. 更新Vue CLI：确保你使用的是最新版本的Vue CLI。可以通过npm update -g @vue/cli来更新。
  6. 重试：等待一段时间后再次尝试，可能是GitHub服务的临时问题。

如果以上方法都不能解决问题，可以考虑手动下载webpack模板，然后放到正确的目录下。

- 阅读更多 -
HTML——实现富文本编辑器wangEditor的使用
System
2024-08-13
所有,javascript



<!DOCTYPE html>
<html>
<head>
    <title>WangEditor 示例</title>
    <meta charset="utf-8">
    <script src="https://cdn.jsdelivr.net/npm/wangeditor/dist/wangEditor.min.js"></script>
</head>
<body>
    <div id="editor" style="height: 400px;"></div>
    <script>
        // 初始化编辑器
        var editor = new wangEditor('editor');
        // 配置编辑器参数
        editor.config.menus = [
            'head',  // 标题
            'bold',  // 粗体
            'fontSize',  // 字号
            'fontName',  // 字体
            'italic',  // 斜体
            'underline',  // 下划线
            'strikeThrough',  // 删除线
            'foreColor',  // 文字颜色
            'backColor',  // 背景颜色
            'link',  // 插入链接
            'list',  // 列表
            'justify',  // 对齐方式
            'quote',  // 引用
            'emoticon',  // 表情
            'image',  // 图片
            'table',  // 表格
            'video',  // 视频
            'code',  // 代码
            'undo',  // 撤销
            'redo'  // 重做
        ];
        editor.config.uploadImgServer = '你的图片上传服务器地址';
        editor.config.uploadFileName = '你指定的文件参数名';
        // 图片上传的参数名称
        editor.config.uploadImgParams = {
            // 用户相关信息可以自行添加
        };
        // 将编辑器的配置应用到编辑器上
        editor.create();
    </script>
</body>
</html>

这段代码展示了如何在HTML页面中引入并初始化wangEditor富文本编辑器。同时，通过配置菜单项和上传图片的服务器地址，可以定制编辑器的功能。在实际使用时，需要替换相应的服务器地址和参数以适应自己的后端服务。

- 阅读更多 -
js动态修改after，before的content内容，以及动态修改单个after，before的属性
System
2024-08-13
所有,javascript

在JavaScript中，可以使用CSS样式对::before和::after伪元素的content属性进行动态修改。以下是一个简单的例子，演示如何使用JavaScript动态改变这些伪元素的内容和单独属性：

HTML:




<div class="dynamic-element">Hello World</div>

CSS:




.dynamic-element::before {
  content: "Before content";
  color: blue;
}
 
.dynamic-element::after {
  content: "After content";
  color: red;
}

JavaScript:




// 获取元素
var elem = document.querySelector('.dynamic-element');
 
// 动态修改::before的内容
elem.style.setProperty('before', 'content', '"New before content"');
 
// 动态修改::after的内容
elem.style.setProperty('after', 'content', '"New after content"');
 
// 动态修改单独的::before属性
elem.style.setProperty('before', 'color', 'green');

在上面的代码中，我们首先通过document.querySelector选择了一个具有dynamic-element类的元素。然后，我们使用style.setProperty方法来修改伪元素的content和其他属性。注意，由于::before和::after不是真实的DOM元素，因此不能直接修改它们的属性，需要通过CSS样式来间接修改。

- 阅读更多 -
Three.js第1篇，Three.js新手教学，如何使用Three.js（three.js使用流程详细，three.js的使用方式，three.js创建3d物体）
System
2024-08-13
所有,javascript



// 引入Three.js库
import * as THREE from 'three';
 
// 创建场景
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 geometry = new THREE.BoxGeometry();
 
// 创建材质
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
 
// 创建物体
const cube = new THREE.Mesh(geometry, material);
 
// 将物体添加到场景
scene.add(cube);
 
// 设置摄像机位置
camera.position.z = 5;
 
// 渲染循环
function animate() {
  requestAnimationFrame(animate);
 
  // 旋转物体
  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;
 
  // 渲染场景
  renderer.render(scene, camera);
}
 
animate();

这段代码展示了如何使用Three.js创建一个简单的3D场景，包括创建场景、摄像机、渲染器，以及一个旋转的立方体。这是学习Three.js的一个基础入门示例。

- 阅读更多 -
nodejs的express服务器请求和响应的方法_express 获取请求头的 accept
System
2024-08-13
所有,javascript

在Express中，你可以使用req.accepts(type)方法来检查请求头的Accept字段是否接受特定类型。如果请求头中包含了可接受该类型的信息，该方法会返回该类型字符串，否则返回false。

以下是一个简单的Express服务器示例，演示如何使用req.accepts(type)方法：




const express = require('express');
const app = express();
const port = 3000;
 
app.get('/', (req, res) => {
  const acceptType = req.accepts('json');
  if (acceptType) {
    res.send({ message: `客户端接受${acceptType}类型。` });
  } else {
    res.status(406).send('客户端不接受提供的内容类型。');
  }
});
 
app.listen(port, () => {
  console.log(`服务器运行在 http://localhost:${port}`);
});

在这个例子中，当客户端请求根路径时，服务器会检查请求头中的Accept字段是否接受json类型。如果接受，则返回一个JSON响应；如果不接受，则返回406状态码。

- 阅读更多 -
JS进阶-处理this
System
2024-08-13
所有,javascript

在JavaScript中，this的值是在运行时基于函数的调用方式动态绑定的。这就是为什么this可以在对象方法中引用对象本身，或者在事件处理函数中引用触发事件的元素等。

处理this的常见方法包括：

  1. 使用箭头函数，它不绑定自己的this值，而是捕获其在定义时的this值。
  2. 使用.bind()，.call()或.apply()方法明确地绑定函数的this值。
  3. 在类的方法中使用this，它会自动引用类的实例。

以下是使用箭头函数处理this的例子：




const obj = {
  name: 'John',
  greet: function() {
    setTimeout(() => {
      console.log('Hello, ' + this.name);
    }, 100);
  }
};
 
obj.greet(); // 输出: Hello, John

使用.bind()方法处理this的例子：




const obj = {
  name: 'John',
  greet: function() {
    console.log('Hello, ' + this.name);
  }
};
 
document.addEventListener('click', obj.greet.bind(obj));

在类的上下文中使用this的例子：




class Person {
  constructor(name) {
    this.name = name;
  }
 
  greet() {
    console.log('Hello, ' + this.name);
  }
}
 
const person = new Person('John');
person.greet(); // 输出: Hello, John

这些例子展示了如何在不同的情境下处理和使用this。根据不同的需求和上下文，你可以选择合适的方法来管理this的值。

- 阅读更多 -
nest.js关键笔记
System
2024-08-13
所有,javascript

NestJS是一个用于构建高效，可扩展的Node.js服务器端应用程序的框架。它使用TypeScript（JavaScript的一个超集）进行开发，结合了OOP（面向对象编程），FP（函数式编程）和FRP（函数响应编程）的元素。

以下是一些NestJS的关键概要点和示例代码：

  1. 模块（Module）：模块是组织应用程序的方式，每个模块都有自己的提供者（providers）和控制器（controllers）。



@Module({
  imports: [OtherModule],
  controllers: [MyController],
  providers: [MyService],
  exports: [MyService],
})
export class MyModule {}
  1. 控制器（Controller）：控制器处理传入的HTTP请求。



@Controller('my-route')
export class MyController {
  constructor(private readonly myService: MyService) {}
 
  @Get()
  getSomething(): string {
    return this.myService.getSomething();
  }
}
  1. 提供者（Provider）：提供者是一个类，它可以注入到其他模块中，并且可以使用依赖注入。



@Injectable()
export class MyService {
  constructor(private readonly anotherService: AnotherService) {}
 
  getSomething(): string {
    return this.anotherService.getValue();
  }
}
  1. 中间件（Middleware）：中间件是可以拦截并处理HTTP请求的特殊函数。



export function myMiddleware(req: Request, res: Response, next: NextFunction) {
  // 可以在这里处理请求
  next();
}
  1. 管道（Pipe）：管道用于转换HTTP请求参数。



@Injectable()
export class MyPipe implements PipeTransform {
  transform(value: any, metadata: ArgumentMetadata) {
    // 转换value
    return transformedValue;
  }
}
  1. 守卫（Guard）：守卫用于判断是否允许进入某个路由。



@Injectable()
export class MyGuard implements CanActivate {
  canActivate(context: ExecutionContext): boolean | Promise<boolean> {
    const request = context.switchToHttp().getRequest();
    return true; // 或者根据request做出决定
  }
}
  1. 异步提供者：使用异步函数来提供模块。



@Module({
  providers: [
    {
      provide: 'MyService',
      useFactory: async (): Promise<MyService> => {
        const service = await createMyService();
        return service;
      },
    },
  ],
})
export class AppModule {}

这些是NestJS开发中的一些关键概念。实际开发中，你可能还会遇到更多高级特性，如微服务，GraphQL，WebSockets等。

- 阅读更多 -
Copyright © 2025 Tech Blog
All Right Reserved | 京ICP备19053165号