分类 javascript 下的文章

使用vite从头搭建一个vue3项目vite.config.js配置

2024-08-18




import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
 
// 配置项
const config = {
  // 插件列表
  plugins: [vue()],
  // 基本路径
  base: './',
  // 服务器配置
  server: {
    open: true, // 是否自动启动浏览器
    port: 8080, // 服务端口
    host: '0.0.0.0', // 服务主机
  },
  // 构建配置
  build: {
    target: 'esnext', // 默认目标运行环境
    outDir: 'dist', // 构建时输出目录
    assetsDir: 'assets', // 静态资源目录
    sourcemap: false, // 是否生成source map
  },
  // 解析配置
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'), // 路径别名
    },
  },
}
 
// 导出配置
export default defineConfig(config)

这个配置文件包含了基本的Vite配置选项，包括插件、服务器设置、构建配置和路径别名解析。通过defineConfig函数导出配置，确保配置符合Vite所需的格式。

js如何获取当前时间

2024-08-17

使用Date对象的方法




var currentTime = new Date();
var year = currentTime.getFullYear();
var month = currentTime.getMonth() + 1;
var day = currentTime.getDate();
var hours = currentTime.getHours();
var minutes = currentTime.getMinutes();
var seconds = currentTime.getSeconds();

使用Intl对象




var options = { year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit', second: '2-digit' };
var currentTime = new Intl.DateTimeFormat('zh', options).format(new Date());

使用moment.js库




var moment = require('moment');
var currentTime = moment().format('YYYY-MM-DD HH:mm:ss');

使用原生JavaScript方法，手动拼接时间字符串




var currentTime = '';
var date = new Date();
currentTime += date.getFullYear() + '-';
currentTime += ('0' + (date.getMonth() + 1)).slice(-2) + '-';
currentTime += ('0' + date.getDate()).slice(-2) + ' ';
currentTime += ('0' + date.getHours()).slice(-2) + ':';
currentTime += ('0' + date.getMinutes()).slice(-2) + ':';
currentTime += ('0' + date.getSeconds()).slice(-2);

js页面实现打印 iframe + window.print()

2024-08-17

要使用JavaScript打印包含iframe内容的网页，您可以先将iframe的内容装载到一个新窗口，然后调用新窗口的print()方法。以下是实现这一功能的示例代码：




function printIframe() {
  var iframe = document.getElementById('myIframe').contentWindow;
  var printWindow = window.open('', '_blank');
  printWindow.document.open();
  printWindow.document.write('<html><head><title>Print</title>');
  printWindow.document.write('</head><body>');
  printWindow.document.write(iframe.document.body.innerHTML);
  printWindow.document.write('</body></html>');
  printWindow.document.close();
  printWindow.onload = function() {
    printWindow.print();
    printWindow.close();
  };
}

在HTML中，您需要有一个用于装载内容的iframe和一个按钮或其他触发事件的元素来调用printIframe函数：




<iframe id="myIframe" src="your_content_page.html" style="display:none;"></iframe>
<button onclick="printIframe()">Print iframe content</button>

请确保iframe的src属性指向您想要打印的页面地址。当用户点击按钮时，printIframe函数将被调用，iframe的内容将被加载到一个新窗口并执行打印。

雪花算法改造: 兼容JS截短位数的53bit分布式ID生成器

2024-08-17

雪花算法（Snowflake）是一种用于生成分布式唯一ID的算法，它能够保证在分布式系统中每个节点每秒钟生成数十亿的唯一ID，且这些ID按照时间的顺序排序。

在JavaScript中，由于Number类型的精度限制，如果直接使用雪花算法生成的64位ID，可能会丢失精度，导致ID不能正确表示。因此，需要对雪花算法的位数进行适当的改造，以确保在JavaScript中能够正确地表示和使用这些ID。

以下是一个改造后的53bit分布式ID生成器的示例代码：




class Snowflake {
    constructor() {
        this.epoch = 1577836800000; // 自定义起始时间（毫秒）
        this.lastTimestamp = -1;
        this.sequence = 0;
        this.nodeId = 0; // 节点ID
    }
 
    /**
     * 生成新的ID
     */
    nextId() {
        let timestamp = Date.now();
        let timestampDiff = timestamp - this.epoch;
 
        if (timestampDiff >= 2 ** 42) {
            throw new Error('Timestamp bits are exhausted');
        }
 
        let sequenceBits = 13;
        let nodeIdBits = 10;
 
        let id = (timestampDiff << (sequenceBits + nodeIdBits)) +
                 (this.nodeId << sequenceBits) +
                 (this.sequence & ((1 << sequenceBits) - 1));
 
        if (this.lastTimestamp === timestamp) {
            this.sequence = (this.sequence + 1) & ((1 << sequenceBits) - 1);
            if (this.sequence === 0) {
                // 等待下一个毫秒
                throw new Error('Sequence bits are exhausted');
            }
        } else {
            this.sequence = 0;
        }
 
        this.lastTimestamp = timestamp;
 
        return id;
    }
}
 
// 使用示例
const snowflake = new Snowflake();
const id = snowflake.nextId();
console.log(id);

在这个改造后的版本中，我们使用了JavaScript的Number类型来表示ID，但是限制了时间戳、序列号和节点ID的位数，以确保在JavaScript中不会因为Number类型的精度问题而导致ID的丢失。这样，我们就可以在JavaScript环境中使用雪花算法生成的53bit分布式ID了。

2024-08-17




import * as tf from '@tensorflow/tfjs';
import { loadFrozenModel, getFrozenModelMemoryUsage } from '@tensorflow/tfjs-converter';
 
// 假设我们已经有一个保存好的模型文件，比如一个FrozenGraphDef文件
const modelUrl = 'path/to/model.pb';  // 模型文件的URL
const weightsUrl = 'path/to/weights.bin';  // 模型权重文件的URL
 
// 加载模型
const model = await loadFrozenModel(modelUrl, weightsUrl);
 
// 检查模型内存使用情况
const usage = getFrozenModelMemoryUsage(modelUrl);
console.log(`模型大小: ${usage.totalBytes} bytes`);
 
// 使用模型进行推理
// 假设我们有一个输入张量
const input = tf.randomNormal([1, 28, 28, 1]);  // 例如MNIST手写数字识别的输入
 
// 应用模型进行预测
const output = model.predict(input);
 
// 处理输出并做相应的操作
// ...
 
// 清理资源
input.dispose();
output.dispose();

这段代码展示了如何在TensorFlow.js中加载一个已经保存好的模型（例如一个FrozenGraphDef文件），并进行基本的推理操作。代码中包含了加载模型、检查模型内存使用情况、模型预测和资源清理的基本步骤。

解决vue3+echarts关于无法获取dom宽度和高度的问题

2024-08-17

在Vue 3中使用ECharts时，如果遇到“无法获取DOM宽度和高度”的问题，通常是因为ECharts实例化的时机不正确或者对应的DOM元素尚未准备好。为了解决这个问题，可以采用以下步骤：

确保ECharts的初始化在DOM元素准备好之后。可以使用Vue的ref属性来获取DOM元素，并在onMounted生命周期钩子中初始化ECharts。
监听窗口大小变化，在窗口大小发生变化时，重新设置ECharts的宽度和高度。

以下是一个简单的示例代码：




<template>
  <div ref="chartContainer" style="width: 100%; height: 400px;"></div>
</template>
 
<script setup>
import { onMounted, ref, onUnmounted, watch } from 'vue';
import * as echarts from 'echarts';
 
const chartContainer = ref(null);
let myChart = null;
 
onMounted(() => {
  myChart = echarts.init(chartContainer.value);
  myChart.setOption({
    // ECharts 的配置项
  });
 
  // 监听窗口大小变化
  window.addEventListener('resize', resizeChart);
});
 
onUnmounted(() => {
  // 清理操作
  window.removeEventListener('resize', resizeChart);
  myChart && myChart.dispose();
});
 
function resizeChart() {
  myChart && myChart.resize();
}
 
// 监听容器大小变化
watch(chartContainer, (newContainer, oldContainer) => {
  if (newContainer && newContainer !== oldContainer) {
    resizeChart();
  }
});
</script>

在这个示例中，我们使用了Vue 3的<script setup>语法糖。通过onMounted生命周期钩子初始化ECharts实例，并监听窗口大小变化来适时更新图表的尺寸。同时，使用onUnmounted生命周期钩子来清理工作，如移除窗口的大小变化监听器和释放ECharts实例。

js使用scrollIntoView()被遮挡

2024-08-17

scrollIntoView() 方法被用于将元素滚动到浏览器的可视区域。如果该元素在页面中被其他元素遮挡，你可能需要在调用 scrollIntoView() 之前先滚动到该元素的位置。

解决方案：

使用 scrollIntoView() 方法滚动到元素。
如果元素被遮挡，可能需要先滚动到其父元素的位置，然后再使用 scrollIntoView()。

示例代码：




// 获取需要滚动到视图的元素
var element = document.getElementById('my-element');
 
// 如果需要，先滚动到父元素的位置
var parent = element.parentNode;
parent.scrollIntoView();
 
// 然后滚动到指定元素
element.scrollIntoView();

如果你需要平滑滚动到视图中，可以传递一个选项对象给 scrollIntoView() 方法，并设置 behavior: 'smooth'。




element.scrollIntoView({ behavior: 'smooth' });

确保你的元素不是隐藏的，或者它的任何父元素都没有设置 overflow: hidden 或 visibility: hidden 样式，否则元素可能不可见，因此无法滚动到视图中。

JS中的参数传递详解

2024-08-17

在JavaScript中，参数的传递方式可以分为两类：按值传递和按引用传递。

按值传递：

在按值传递中，传递给函数的是一个值的副本。这意味着函数内部对参数的任何修改都不会影响到外部的变量。




function increment(x) {
  x++;
  return x;
}
 
let count = 1;
let result = increment(count);
console.log(count); // 输出 1，因为increment内部对x的操作不会影响外部的count
console.log(result); // 输出 2

按引用传递：

按引用传递是指传递给函数的是一个对象的引用，而不是对象本身的值。这意味着函数内部对参数的修改将影响外部的对象。




function changeName(obj) {
  obj.name = 'Alice';
}
 
let person = {name: 'Bob'};
changeName(person);
console.log(person.name); // 输出 'Alice'，因为changeName函数内部修改了对象的属性

在JavaScript中，函数参数是按值传递的，但是如果参数是对象，则实际上传递的是对象的引用（不是对象本身），这被认为是按引用传递。

注意：字符串和数字在JavaScript中是不可变的，当你认为在函数内部修改了它们时，实际上是新创建了一个值。这看起来像是按值传递，但实际上是特殊的按值传递行为。

2024-08-17




// 获取当前时间
const getCurrentTime = () => new Date();
 
// 获取当前日期的上一个月
const getLastMonth = (date = new Date()) => {
  const nextMonth = new Date(date.getFullYear(), date.getMonth() - 1, date.getDate());
  return nextMonth;
};
 
// 获取当前或给定日期的具体某一天
const getSpecificDay = (date = new Date(), dayOfMonth = date.getDate()) => {
  const specificDay = new Date(date.getFullYear(), date.getMonth(), dayOfMonth);
  return specificDay;
};
 
// 示例
const currentTime = getCurrentTime();
console.log('当前时间:', currentTime);
 
const lastMonth = getLastMonth(currentTime);
console.log('上一个月的日期:', lastMonth);
 
const specificDay = getSpecificDay(currentTime, 15); // 假设我们想要获取当月15号
console.log('指定日期的日期:', specificDay);

这段代码定义了三个函数，分别用于获取当前时间、当前日期的上一个月以及当前或给定日期的特定某一天。然后通过示例代码展示了如何使用这些函数。