1. 首页
  2. 标签
  3. Javascript
vite打包拆分js和css
System
2024-08-17
所有,typescript

在Vite中，你可以通过配置来实现代码分割，以将JavaScript和CSS文件进行拆分。以下是如何配置Vite来实现这一目标的步骤：

  1. 在vite.config.js中，使用build.rollupOptions.output来指定不同模块的文件名模式。
  2. 使用插件如vite-plugin-imp或vite-plugin-style-import来自动处理CSS模块。

以下是一个简单的配置示例：




// vite.config.js
import { defineConfig } from 'vite';
import path from 'path';
 
export default defineConfig({
  build: {
    rollupOptions: {
      output: {
        entryFileNames: `assets/[name].[hash].js`,
        chunkFileNames: `assets/[name].[hash].js`,
        assetFileNames: `assets/[name].[hash].[ext]`
      }
    }
  }
});

在这个配置中：

  • entryFileNames指定了入口文件的名称。
  • chunkFileNames指定了代码分割生成的代码块的文件名。
  • assetFileNames指定了其他资源文件的名称，如CSS和图片等。

请注意，[hash]会为每个文件生成一个唯一的hash值，确保文件名的唯一性。

对于CSS，你可以使用以下插件来自动处理：




// vite.config.js
import { defineConfig } from 'vite';
import vitePluginImp from 'vite-plugin-imp';
 
export default defineConfig({
  plugins: [
    vitePluginImp({
      libList: [
        {
          libName: 'antd',
          style: (name) => `antd/es/${name}/style/index.js`,
        },
        // 其他库...
      ],
    }),
  ],
});

vite-plugin-imp插件会自动引入所需的CSS，并且你可以在libList中指定不同库的样式引入规则。这样，你就可以将JavaScript和CSS文件进行拆分，并且管理它们的文件名。

- 阅读更多 -
JS数组对象——中文按照首字母排序（分组）sort()、localeCompare()
System
2024-08-17
所有,typescript



// 假设我们有一个对象数组，对象中包含name属性，我们要根据name属性的中文首字母进行排序分组
let items = [
  { name: '张三' },
  { name: '李四' },
  { name: '王五' },
  { name: '赵六' },
  { name: '陈七' }
];
 
// 使用Array.prototype.sort()方法和String.prototype.localeCompare()方法进行排序
items.sort((a, b) => a.name.localeCompare(b.name, 'zh-Hans-CN', { sensitivity: 'accent' }));
 
// 输出排序后的数组
console.log(items);

这段代码首先定义了一个对象数组items，然后使用sort()方法对数组进行排序，并使用localeCompare()方法在中文环境下比较字符串。localeCompare()的第一个参数是需要比较的字符串，第二个参数指定了语言环境，这里是简体中文 ('zh-Hans-CN')，第三个参数是选项对象，指定了发音敏感性 ('sensitivity')。排序后的数组将按照中文字符的顺序进行排序。

- 阅读更多 -
java/php/node.js/python智慧校园防疫管理平台【2024年毕设】
System
2024-08-17
所有,nodejs

这是一个基于不同编程语言的智慧校园防疫管理平台的项目示例。由于是毕业设计，具体实现细节会根据学生的设计内容而有所不同。以下是一个基本的框架，可以根据具体需求进行扩展和完善。

Java版本的后端框架：




// 假设使用Spring Boot框架
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
 
@SpringBootApplication
public class DefensePlatformApplication {
 
    public static void main(String[] args) {
        SpringApplication.run(DefensePlatformApplication.class, args);
    }
}

PHP版本的后端框架：




<?php
// 假设使用Laravel框架
namespace App\Http\Controllers;
 
use Illuminate\Http\Request;
 
class DefensePlatformController extends Controller
{
    //
}

Node.js版本的后端框架：




// 假设使用Express框架
const express = require('express');
const app = express();
 
app.get('/', (req, res) => {
  res.send('Hello World!');
});
 
app.listen(3000, () => {
  console.log('Server running on port 3000');
});

Python版本的后端框架：




from flask import Flask
 
app = Flask(__name__)
 
@app.route('/')
def hello_world():
    return 'Hello, World!'
 
if __name__ == '__main__':
    app.run()

以上代码仅展示了不同编程语言后端框架的基本结构，具体的业务逻辑、数据库设计、接口定义等都需要根据项目需求进行详细设计。

- 阅读更多 -
探索Node.js开发新境界：Node-KOA
System
2024-08-17
所有,nodejs

KOA是一个新的web框架，由Express的原始作者创建，旨在变得更简单、更有效。以下是一个使用KOA框架创建的简单HTTP服务器的示例代码：




const Koa = require('koa');
const app = new Koa();
 
// 中间件函数，用于响应请求
app.use(async (ctx, next) => {
  await next(); // 调用下一个中间件
  ctx.response.type = 'text/html';
  ctx.response.body = '<h1>Hello, KOA!</h1>';
});
 
// 启动服务器
app.listen(3000);
console.log('Server is running on port 3000');

这段代码首先导入了KOA框架，然后创建了一个新的KOA实例。接着，我们定义了一个中间件函数，它会处理所有的HTTP请求，并响应一个简单的HTML页面。最后，通过调用listen方法在端口3000上启动服务器。

- 阅读更多 -
HTML，JavaScript，CSS的基本使用，简单广告宣传页面设计实现
System
2024-08-17
所有,css



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>简单的广告宣传页面</title>
    <style>
        body {
            margin: 0;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #f7f7f7;
        }
        .content {
            text-align: center;
        }
        img {
            width: 200px;
            height: auto;
        }
    </style>
</head>
<body>
    <div class="content">
        <img src="logo.png" alt="公司Logo">
        <h1>欢迎来到我们的网站</h1>
        <p>我们是专业的...</p>
        <button onclick="window.location.href='https://example.com'">了解更多</button>
    </div>
</body>
</html>

这段代码展示了如何使用HTML、CSS和JavaScript来创建一个简单的广告宣传页面。页面中包含了一个居中的logo，一个标题，一个简短的宣传文本和一个按钮，点击按钮可以跳转到指定的链接。这个页面可以作为初学者学习基础网页设计的示范，也可以作为企业展示其品牌和产品的工具。

- 阅读更多 -
three.js给模型添加标签三种方式对比（矩形平面，精灵图，CSS2DObject）
System
2024-08-17
所有,css

在Three.js中，可以通过不同的方式向模型添加标签。这里提供了三种方式：使用矩形平面作为背景，使用精灵图（Sprite），以及使用CSS2DObject。

  1. 矩形平面（使用Mesh和PlaneGeometry）：



var geometry = new THREE.PlaneGeometry(100, 50);
var material = new THREE.MeshBasicMaterial({ map: new THREE.CanvasTexture(generateLabelCanvas()), transparent: true });
var labelPlane = new THREE.Mesh(geometry, material);
labelPlane.position.set(0, 10, 0);
scene.add(labelPlane);
 
function generateLabelCanvas() {
    var canvas = document.createElement('canvas');
    var ctx = canvas.getContext('2d');
    ctx.fillStyle = "rgba(255,255,255,1)";
    ctx.fillRect(0, 0, 100, 50);
    ctx.font = '20px Arial';
    ctx.fillStyle = 'black';
    ctx.fillText('标签文字', 10, 30);
    return canvas;
}
  1. 精灵图（使用Sprite）：



var sprite = new THREE.Sprite(new THREE.SpriteMaterial({ map: new THREE.CanvasTexture(generateLabelCanvas()) }));
sprite.scale.set(10, 5, 1); // 根据需要调整大小
sprite.position.set(0, 10, 0);
scene.add(sprite);
  1. CSS2DObject（将2D CSS元素与3D场景整合）：



var labelDiv = document.createElement('div');
labelDiv.style.color = 'white';
labelDiv.innerHTML = '标签文字';
var labelObject = new THREE.CSS2DObject(labelDiv);
labelObject.position.set(0, 10, 0);
scene.add(labelObject);

以上代码中generateLabelCanvas函数用于生成包含文本的Canvas，这个Canvas将作为材质的纹理应用到模型上。

在实际使用时，你需要根据模型的位置和大小调整矩形平面或精灵图的尺寸和位置。CSS2DObject可以与Three.js的其他对象无缝整合，但它需要WebGLRenderer的domElement被整合到DOM中去，并且要处理CSS与WebGL渲染结果的叠加问题。

- 阅读更多 -
解决“使用Ajax发送请求时，响应数据对象.属性为undefined”的问题（将JSON串转换成JavaScript对象）
System
2024-08-17
所有,ajax

报错解释：

这个报错通常意味着在使用Ajax进行异步请求时，期望从服务器响应中获取的某个属性值未定义。这可能是因为服务器返回的数据格式与你预期的不一致，或者服务器返回的数据本身就有问题。

解决方法：

  1. 检查服务器返回的响应数据格式是否正确，确保你要访问的属性确实存在于返回的数据中。
  2. 确保服务器返回的是有效的JSON格式，如果不是，需要在服务器端进行处理，确保返回正确的JSON格式数据。
  3. 如果你已经确认服务器返回的数据格式正确，那么检查你的Ajax请求代码，确保你在适当的时候解析了返回的JSON数据。在JavaScript中，可以使用JSON.parse()来解析JSON字符串。
  4. 如果你使用的是jQuery的$.ajax()方法，确保你没有错误地设置了dataType参数。例如，如果你期望获取的是JSON数据，应该设置dataType: 'json'。
  5. 使用浏览器的开发者工具查看网络请求的响应内容，确认返回的数据是否符合预期。

示例代码：




$.ajax({
    url: 'your-endpoint-url',
    type: 'GET',
    dataType: 'json', // 明确告诉jQuery期望的数据类型是JSON
    success: function(data) {
        // 确保访问的属性存在
        if (data && data.yourProperty) {
            // 正确获取到属性值
            console.log(data.yourProperty);
        } else {
            // 属性不存在或数据有问题
            console.log('Property does not exist or data is corrupted.');
        }
    },
    error: function(xhr, status, error) {
        // 处理错误情况
        console.error('An error occurred:', error);
    }
});

确保在success回调函数中正确处理数据，并且在error回调函数中也能妥善处理可能出现的错误。

- 阅读更多 -
JavaScript中的运行时间统计方法
System
2024-08-17
所有,javascript

在JavaScript中，可以使用performance.now()方法来统计代码的运行时间。这个方法返回自页面开始加载以来的精确时间，可以用来测量性能。

以下是一个使用performance.now()的示例代码：




function measureExecutionTime(func) {
    const startTime = performance.now();
    func(); // 调用你想要测量的函数
    const endTime = performance.now();
    const executionTime = endTime - startTime;
    console.log(`执行时间: ${executionTime} 毫秒`);
}
 
// 示例函数
function someFunction() {
    for (let i = 0; i < 1000000; i++) {
        // 一些计算
    }
}
 
// 测量函数执行时间
measureExecutionTime(someFunction);

在这个例子中，measureExecutionTime函数接受另一个函数作为参数，并记录其执行前后的时间，计算出执行的时间差，然后打印出来。这个方法可以用来评估代码段的性能，帮助优化。

- 阅读更多 -
JS如何把年月日转为时间戳
System
2024-08-17
所有,javascript

在JavaScript中，可以使用Date对象的valueOf()方法或者getTime()方法将年月日转换为时间戳。以下是一个例子：




function convertToTimestamp(year, month, day) {
    var date = new Date(year, month - 1, day); // JavaScript中的月份是从0开始的
    return date.getTime(); // 或者使用 date.valueOf()
}
 
// 示例
var timestamp = convertToTimestamp(2023, 3, 15);
console.log(timestamp); // 输出：1679027200000

请注意，month参数应该是实际月份减去1，因为JavaScript中的月份是从0开始计数的（0代表1月，11代表12月）。

- 阅读更多 -
vite打包拆分js和css
System
2024-08-17
所有,typescript

在Vite中，你可以通过配置来实现代码分割，以将JavaScript和CSS文件进行拆分。以下是如何配置Vite来实现这一目标的步骤：

  1. 在vite.config.js中，使用build.rollupOptions.output来指定不同模块的文件名模式。
  2. 使用插件如vite-plugin-imp或vite-plugin-style-import来自动处理CSS模块。

以下是一个简单的配置示例：




// vite.config.js
import { defineConfig } from 'vite';
import path from 'path';
 
export default defineConfig({
  build: {
    rollupOptions: {
      output: {
        entryFileNames: `assets/[name].[hash].js`,
        chunkFileNames: `assets/[name].[hash].js`,
        assetFileNames: `assets/[name].[hash].[ext]`
      }
    }
  }
});

在这个配置中：

  • entryFileNames指定了入口文件的名称。
  • chunkFileNames指定了代码分割生成的代码块的文件名。
  • assetFileNames指定了其他资源文件的名称，如CSS和图片等。

请注意，[hash]会为每个文件生成一个唯一的hash值，确保文件名的唯一性。

对于CSS，你可以使用以下插件来自动处理：




// vite.config.js
import { defineConfig } from 'vite';
import vitePluginImp from 'vite-plugin-imp';
 
export default defineConfig({
  plugins: [
    vitePluginImp({
      libList: [
        {
          libName: 'antd',
          style: (name) => `antd/es/${name}/style/index.js`,
        },
        // 其他库...
      ],
    }),
  ],
});

vite-plugin-imp插件会自动引入所需的CSS，并且你可以在libList中指定不同库的样式引入规则。这样，你就可以将JavaScript和CSS文件进行拆分，并且管理它们的文件名。

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