分类前端技术下的文章

2024-08-19

第三天的学习内容是Ajax的异步请求处理，包括请求的发送、进度监控和响应的处理。以下是一个简单的示例，展示了如何使用Ajax发送异步请求并处理响应：




// 创建一个新的XMLHttpRequest对象
var xhr = new XMLHttpRequest();
 
// 配置请求类型、URL 以及是否异步处理
xhr.open('GET', 'your-api-endpoint', true);
 
// 设置请求完成的回调函数
xhr.onreadystatechange = function () {
  // 请求完成并且响应状态码为 200
  if (xhr.readyState === XMLHttpRequest.DONE) {
    if (xhr.status === 200) {
      // 处理请求成功的响应数据
      console.log(xhr.responseText);
    } else {
      // 处理请求失败
      console.error('AJAX Request was unsuccessful: ' + xhr.status);
    }
  }
};
 
// 发送请求
xhr.send();
 
// 可选：添加上传进度监听
xhr.upload.onprogress = function (event) {
  if (event.lengthComputable) {
    var percentComplete = (event.loaded / event.total) * 100;
    console.log(percentComplete.toFixed(2) + '%');
  }
};

这段代码展示了如何使用AJAX发送GET请求，并在请求成功完成时处理响应。同时，添加了上传进度的监听，可以显示当前上传进度的百分比。这对于用户来说提供了更好的用户体验，可以在上传大文件时给予用户进度反馈。

System

2024-08-19

所有,javascript

题目：20天拿下华为OD笔试之【贪心+优先队列】

给定一个正整数数组arr，代表每个工作的难度值。每个工作都可以选择立即开始或等待一天来完成。你需要找到最少的天数，在这些天数内可以完成所有工作。

注意：

完成工作的难度值总是大于等于完成它所需要的天数。
工作可以在任何非负整数时间点开始，但是必须连续完成。

例如：

输入：arr = [2, 4, 6, 8, 10]

输出：3

解释：可以选择在第1天，第2天，第4天完成工作。

输入：arr = [10, 15, 30, 20, 25]

输出：3

解释：可以选择在第1天，第2天，第4天完成工作。

输入：arr = [1, 2, 4, 5, 6, 7, 8, 9, 10]

输出：5

解释：可以选择在第1天，第2天，第4天，第5天，第10天完成工作。

请你设计一个算法，计算出最少需要的天数。

解决方案：

这是一个贪心加优先队列的问题。我们可以使用优先队列（最小堆）来保存工作，优先队列中的工作按照其完成的最早时间排序。然后我们从1开始迭代，如果当前有工作可以开始，我们就开始它。如果工作可以在当前这一天完成，我们就完成它。

以下是Python, Java, C++和JavaScript的解决方案：

Python:




from queue import PriorityQueue
 
def minDays(arr):
    pq = PriorityQueue()
    for work in arr:
        pq.put((work, 0))
    ans = 0
    while not pq.empty():
        day = 0
        while not pq.empty() and pq.queue[0][0] == day:
            work, _ = pq.get()
            day += work
        ans += 1
    return ans
 
# 测试代码
arr = [2, 4, 6, 8, 10]
print(minDays(arr))  # 输出：3

Java:




import java.util.PriorityQueue;
 
public class Solution {
    public int minDays(int[] arr) {
        PriorityQueue<int[]> pq = new PriorityQueue<>((a, b) -> a[0] - b[0]);
        for (int work : arr) {
            pq.offer(new int[]{work, 0});
        }
        int ans = 0;
        while (!pq.isEmpty()) {
            int day = 0;
            while (!pq.isEmpty() && pq.peek()[0] == day) {
                int[] work = pq.poll();
                day += work[0];
            }
            ans++;
        }
        return ans;
    }
 
    // 测试代码
    public static void main(String[] args) {
        Solution solution = new Solution();
        int[] arr = {2, 4, 6, 8, 10};
        System.out.println(solution.minDays(arr));  // 输出：3
    }
}

C++:




#include <queue>
#include <vector>
 
using namespace std;
 
int minDays(vector<int>& arr) {
    priority_queue<pair<int, int>> pq;
    for (int work : arr) {
        pq.emplace(work, 0);
    }
    int ans = 0;
    while (!

- 阅读更多 -

发现创新随机数生成库 —— Stochator.js

System

2024-08-19

所有,javascript

Stochator.js 是一个用于创建随机数的库，它提供了一种方法来生成符合特定概率分布的随机数。以下是如何使用 Stochator.js 生成一个随机整数的示例代码：




// 引入 Stochator 模块
const Stochator = require('stochator');
 
// 创建一个随机整数生成器，取值范围是 [1, 6]
const randomInt = Stochator.integer(1, 6);
 
// 生成一个随机整数
const value = randomInt.generate();
console.log(value); // 输出可能是 1, 2, 3, 4, 5, 6 中的任何一个

在这个例子中，我们首先引入了 Stochator 模块，然后使用 Stochator.integer(min, max) 方法创建了一个随机整数生成器，该生成器将在 min 和 max 指定的范围内生成整数。最后，我们调用 generate() 方法来获取一个随机生成的整数。

Stochator.js 提供了多种概率分布的随机数生成器，包括整数、小数、二项分布、伯努利分布等。使用时，请确保已经通过 npm 安装了 Stochator.js：




npm install stochator

Stochator.js 是一个实验性项目，目前可能不适合在生产环境中使用，因为它可能仍然在开发迭代中。在使用之前，请检查其文档和稳定性。

- 阅读更多 -

视频目录进度条的制作（html(js)+pr）

System

2024-08-19

所有,javascript

要创建一个视频目录进度条，你可以使用HTML、JavaScript和CSS来构建界面，并使用一些现成的JavaScript库，如Plyr或Video.js来处理视频播放。以下是一个简单的示例，展示如何制作一个基本的视频目录进度条：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Video Progress Bar</title>
<style>
  #myVideo {
    width: 100%;
  }
  .progress-bar {
    width: 0;
    height: 5px;
    background-color: #ddd;
    transition: width 0.3s;
  }
  .time-slider {
    position: relative;
    width: 100%;
    margin-top: 10px;
  }
  .time-slider input {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 5px;
    background: #555;
    outline: none;
    opacity: 0.7;
    -webkit-transition: 0.2s;
    transition: opacity 0.2s;
  }
  .time-slider input:hover {
    opacity: 1;
  }
  .time-slider input::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 15px;
    height: 15px;
    background: #4CAF50;
    cursor: pointer;
  }
  .time-slider input::-moz-range-thumb {
    width: 15px;
    height: 15px;
    background: #4CAF50;
    cursor: pointer;
  }
</style>
</head>
<body>
 
<video id="myVideo" controls>
  <source src="movie.mp4" type="video/mp4">
  Your browser does not support HTML5 video.
</video>
 
<div class="progress-bar"></div>
<div class="time-slider">
  <input type="range" min="0" max="100" value="0" class="time-slider" id="timeSlider">
</div>
 
<script>
// 获取视频和进度条元素
var video = document.getElementById('myVideo');
var progressBar = document.querySelector('.progress-bar');
var timeSlider = document.getElementById('timeSlider');
 
// 更新进度条和视频时间
function updateProgress() {
  var percent = (video.currentTime / video.duration) * 100;
  progressBar.style.width = percent + '%';
  timeSlider.value = percent;
}
 
// 设置视频时间到滑块位置
function setVideoTime() {
  var time = video.duration * (timeSlider.value / 100);
  video.currentTime = time;
}
 
// 绑定事件监听器
video.addEventListener('timeupdate', updateProgress);
timeSlider.addEventListener('input', setVideoTime);
</script>
 
</body>
</html>

在这个例子中，我们有一个HTML <video>元素和一个进度条.progress-bar。JavaScript用于更新进度条的宽度以匹配视频的当前播放时间，并允许用户通过拖动滑块来快进或快退视频。这个例子假设你有一个名为movie.mp4的视频文件在同一目录下。

- 阅读更多 -

【鸿蒙开发】之引入和使用第三方框架three.js

System

2024-08-19

所有,javascript

在鸿蒙（HarmonyOS）开发中引入和使用three.js，需要在项目中添加three.js的依赖，并确保鸿蒙的开发环境支持WebGL。以下是一个简单的例子：

在项目中的package.json文件中添加three.js的依赖：




"dependencies": {
    "three": "^0.132.2"
}

在需要使用three.js的.hml文件中引入three.js：




<script src="node_modules/three/build/three.js"></script>

创建一个3D场景并添加一个简单的3D对象：




<div class="container">
    <canvas id="three-canvas" style="width: 100%; height: 100%"></canvas>
</div>
 
<script>
    var scene = new THREE.Scene();
    var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
 
    var renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.getElementById('three-canvas').appendChild(renderer.domElement);
 
    var geometry = new THREE.BoxGeometry();
    var material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
    var 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();
</script>

确保开发环境支持WebGL，并且在真实设备或模拟器上运行相应的代码。由于鸿蒙OS的兼容性和开发环境可能与标准Web开发环境有所不同，可能需要额外的工具或调整来确保three.js能够正常工作。

- 阅读更多 -

JS中如何拷贝一个DOM元素

System

2024-08-19

所有,javascript

在JavaScript中，您可以使用cloneNode方法来复制一个DOM元素。cloneNode接受一个布尔值参数，表示是否复制子元素。如果参数为true，则会复制元素以及所有子元素；如果为false，则只会复制元素本身，不包括子元素。

以下是一个使用cloneNode方法复制DOM元素的例子：




// 假设您要复制的元素具有id="elementToClone"
var elementToClone = document.getElementById('elementToClone');
 
// 复制元素及其所有子元素
var cloneWithChildren = elementToClone.cloneNode(true);
 
// 仅复制元素本身，不复制子元素
var cloneWithoutChildren = elementToClone.cloneNode(false);
 
// 将复制的元素插入到文档中
document.body.appendChild(cloneWithChildren);

使用cloneNode时，请注意新复制的元素可能还需要添加到文档中以便在页面上显示。此外，复制的元素将不会包含任何与原始元素关联的事件监听器或其他JavaScript状态。如果需要事件监听器和状态，您可能需要手动复制或重新初始化这些内容。

System

2024-08-19

所有,javascript




const path = require('path');
const webpack = require('webpack');
 
module.exports = {
  entry: './src/index.ts', // 项目入口文件
  output: {
    filename: 'bundle.js', // 打包后的文件名
    path: path.resolve(__dirname, 'dist') // 打包文件放置的目录
  },
  module: {
    rules: [
      {
        test: /\.tsx?$/, // 正则表达式，匹配 .ts 或 .tsx 文件
        use: 'ts-loader', // 使用 ts-loader 处理 TypeScript 文件
        exclude: /node_modules/ // 排除 node_modules 目录
      },
      {
        test: /\.js$/, // 正则表达式，匹配 .js 文件
        use: ['babel-loader', 'eslint-loader'], // 使用 babel-loader 和 eslint-loader 处理 JS 文件
        exclude: /node_modules/ // 排除 node_modules 目录
      }
    ]
  },
  resolve: {
    extensions: ['.tsx', '.ts', '.js'] // 自动解析的文件扩展名
  },
  plugins: [
    new webpack.ProgressPlugin(), // 显示打包进度条
  ],
  devtool: 'source-map', // 开发工具，用于生成 source map 文件
  performance: {
    hints: false // 关闭性能警告
  },
  // 通过 npm 脚本传递的参数，例如 --env.production
  mode: process.env.NODE_ENV === 'production' ? 'production' : 'development'
};

这个配置文件定义了一个基本的 Webpack 构建流程，用于将 TypeScript 和 JavaScript 文件打包在一起，同时利用 Babel 和 ESLint 进行代码转换和质量检查。它设置了入口文件、输出配置、模块加载规则、插件和模式。这为开发现代 JavaScript 应用程序提供了一个高效且可扩展的构建环境。

System

2024-08-19

所有,javascript




// 假设有一个函数用于记录日志
function log(message) {
    console.log(message);
}
 
// 假设有一个函数用于捕获异常
function captureException(error) {
    // 这里可以将异常上报到服务器或者本地存储
    console.error('捕获到异常：', error);
}
 
// 假设有一个函数用于捕获未处理的Promise异常
process.on('unhandledRejection', (reason, promise) => {
    console.error('捕获到未处理的Promise异常：', promise, '原因：', reason);
});
 
// 假设有一个异常函数用于模拟抛出异常
function throwError() {
    throw new Error('模拟一个异常');
}
 
// 使用try-catch块捕获可能发生的异常
try {
    // 执行可能会抛出异常的操作
    throwError();
} catch (error) {
    // 处理捕获到的异常
    captureException(error);
}
 
// 使用Promise捕获未处理的异常
Promise.reject('模拟一个未处理的Promise异常')
    .catch(error => {
        // 处理捕获到的Promise异常
        captureException(error);
    });
 
// 记录日志
log('程序正常运行，没有异常发生。');

这个代码示例展示了如何在OpenHarmony环境中捕获和处理异常。它使用了try-catch块来捕获同步代码中的异常，并使用process.on来监听未处理的Promise异常。同时，它提供了一个模拟异常的函数和一个日志记录函数，以及一个异常捕获和上报的函数。这样可以帮助开发者在实际开发中更好地理解和处理异常情况。

- 阅读更多 -

nodejs 的 path 模块详解

System

2024-08-19

所有,javascript

Node.js 的 path 模块是一个非常基础而重要的模块，它提供了处理和转换文件路径的工具。以下是一些使用 path 模块的常见方法和示例代码：

path.join(...)：连接所有参数构造路径。




const path = require('path');
let myPath = path.join('/foo', 'bar', 'baz/asdf', 'quux', '..');
console.log(myPath); // 输出: '/foo/bar/baz/asdf'

path.resolve(...)：解析一系列路径或路径片段成绝对路径。




const path = require('path');
let myPath = path.resolve('foo/bar', '/tmp/file/', '..', 'a/../subfile');
console.log(myPath); // 输出: '/tmp/subfile'

path.basename(path, [ext])：返回路径的最后一部分。




const path = require('path');
let myPath = path.basename('/foo/bar/baz/asdf/quux.html');
console.log(myPath); // 输出: 'quux.html'

path.dirname(path)：返回路径的目录名。




const path = require('path');
let myPath = path.dirname('/foo/bar/baz/asdf/quux');
console.log(myPath); // 输出: '/foo/bar/baz/asdf'

path.extname(path)：返回路径中文件扩展名。




const path = require('path');
let myPath = path.extname('index.html');
console.log(myPath); // 输出: '.html'

path.parse(path)：返回路径字符串的对象分解。




const path = require('path');
let myPath = path.parse('/foo/bar/baz/asdf/quux.html');
console.log(myPath);
// 输出:
// {
//   root: '/',
//   dir: '/foo/bar/baz/asdf',
//   base: 'quux.html',
//   ext: '.html',
//   name: 'quux'
// }

path.format(pathObject)：从对象中返回路径字符串。




const path = require('path');
let myPath = path.format({
  root: '/',
  dir: '/home/user/docs',
  base: 'example.txt',
  ext: '.md'
});
console.log(myPath); // 输出: '/home/user/docs/example.txt.md'

以上是 path 模块的一些常用方法和简单示例。实际使用时，开发者可以根据需要选择合适的方法来处理文件路径。

- 阅读更多 -

js 中常用的判空写法

System

2024-08-19

所有,javascript

在JavaScript中，常见的判断空值的方法有以下几种：

使用== null来检查一个值是否为null或undefined。
使用!运算符来检查一个值是否为false、null、undefined、0、NaN或""（空字符串）。
使用!==运算符结合void 0来检查一个值是否为undefined。

以下是这些方法的示例代码：




// 方法1: 使用 == null
if (value == null) {
    // value 为 null 或 undefined
}
 
// 方法2: 使用 ! 运算符
if (!value) {
    // value 为 false、null、undefined、0、NaN 或 ""（空字符串）
}
 
// 方法3: 使用 !== 和 void 0
if (value !== void 0) {
    // value 不是 undefined
}

选择哪种方法取决于你的具体需求。例如，如果你想要同时判断null和undefined，使用== null是最简单的方法。如果你只想判断undefined，使用!== void 0是更精确的方法。

- 阅读更多 -