分类前端技术下的文章

2024-08-19

以下是一个使用three.js创建粒子背景的简单示例代码：




// 引入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.Geometry();
const material = new THREE.PointsMaterial({ color: 0xffffff, size: 0.5 });
 
// 生成一些随机的粒子
for (let i = 0; i < 1000; i++) {
  const vertex = new THREE.Vector3();
  vertex.x = Math.random() * 2 - 1;
  vertex.y = Math.random() * 2 - 1;
  vertex.z = Math.random() * 2 - 1;
  geometry.vertices.push(vertex);
}
 
const points = new THREE.Points(geometry, material);
scene.add(points);
 
// 渲染循环
function animate() {
  requestAnimationFrame(animate);
 
  // 旋转粒子
  points.rotation.x += 0.001;
  points.rotation.y += 0.001;
 
  renderer.render(scene, camera);
}
 
animate();

这段代码创建了一个简单的三维场景，包含了一个由随机生成的粒子构成的点集，通过旋转和渲染，实现了动态的粒子背景效果。这个示例可以作为创建类似效果时的基础，开发者可以根据自己的需求进行扩展和定制。

- 阅读更多 -

js实现读取excel文件

System

2024-08-19

所有,javascript

在JavaScript中，可以使用第三方库xlsx来读取Excel文件。以下是一个简单的例子，展示如何使用xlsx库读取Excel文件：

首先，确保安装了xlsx库：




npm install xlsx

然后，使用以下代码读取Excel文件：




const XLSX = require('xlsx');
 
// 读取Excel文件
function readExcel(file) {
  const reader = new FileReader();
 
  reader.onload = function(e) {
    const data = new Uint8Array(e.target.result);
    const workbook = XLSX.read(data, { type: 'array' });
 
    // 假设我们只读取第一个工作表
    const firstSheetName = workbook.SheetNames[0];
    const worksheet = workbook.Sheets[firstSheetName];
    const json = XLSX.utils.sheet_to_json(worksheet);
 
    console.log(json);
  };
 
  reader.readAsArrayBuffer(file);
}
 
// 假设你有一个input元素来上传文件
const inputElement = document.getElementById('input-excel');
inputElement.addEventListener('change', function(e) {
  const file = e.target.files[0];
  readExcel(file);
});

在HTML中，你需要有一个文件输入元素来上传Excel文件：




<input type="file" id="input-excel" />

这段代码会在用户选择文件后，读取并转换Excel文件内容为JSON格式。注意，这个例子只读取第一个工作表的内容。如果需要读取其他工作表或者有更复杂的需求，可以根据xlsx库的文档进行相应的扩展。

- 阅读更多 -

【环境准备】NodeJs(压缩包版本)安装与配置

System

2024-08-19

所有,javascript

在Linux环境下，可以使用以下步骤安装和配置Node.js：

下载Node.js压缩包：
打开Node.js官方下载页面，选择适合你系统的版本。

使用wget或curl下载压缩包：




wget https://nodejs.org/dist/v14.16.0/node-v14.16.0-linux-x64.tar.xz

解压缩下载的文件：




tar -xJf node-v14.16.0-linux-x64.tar.xz

配置环境变量：
编辑你的.bashrc或.profile文件，添加以下内容：
```
export NODEJS_HOME=/path/to/node-v14.16.0-linux-x64
export PATH=$NODEJS_HOME/bin:$PATH
```
替换/path/to/为你的Node.js解压路径。
使配置生效：
```
source ~/.bashrc
```
验证安装：
```
node -v
npm -v
```

以上步骤会安装Node.js并将其添加到你的环境变量中，使得你可以在任何位置通过命令行运行Node.js和npm。记得替换下载链接和解压路径，使用与你系统匹配的Node.js版本。

- 阅读更多 -

node之vm2库，js沙盒环境

System

2024-08-19

所有,javascript

vm2 是一个 Node.js 模块，用于在一个隔离的沙箱环境中运行不信任的代码。以下是使用 vm2 创建沙箱并在其中运行代码的基本示例：

首先，安装 vm2：




npm install vm2

然后，使用 vm2 创建沙箱并执行代码：




const { VM } = require('vm2');
 
// 创建一个新的沙箱
const vm = new VM({
  timeout: 1000, // 设置代码执行的超时时间为1000毫秒
  sandbox: { // 定义沙箱中的初始数据
    secret: 'a secret code'
  }
});
 
// 在沙箱中执行代码
const result = vm.run('secretFunction(secret)', 'myScript.vm2');
 
console.log(result); // 输出代码执行的结果

在这个例子中，我们创建了一个新的 VM 实例，并设置了一些选项，如超时和初始化的沙箱环境。然后，我们在这个沙箱中执行了一个简单的函数，它使用了一个秘密信息。这个函数的定义不是在沙箱外定义的，而是在沙箱内部定义的。这样可以提供一定程度的代码隔离。

- 阅读更多 -

js取出数组对象中的全部key值和全部value值

System

2024-08-19

所有,javascript

在JavaScript中，可以使用Object.keys()方法来获取对象的所有键（key）值，使用Object.values()方法来获取对象的所有值（value）。如果数组中包含对象，可以遍历数组并分别获取键和值。

以下是获取数组对象中所有键和值的示例代码：




// 假设有如下数组对象
let arrayOfObjects = [
  { name: 'Alice', age: 25 },
  { name: 'Bob', age: 30 },
  { name: 'Charlie', age: 28 }
];
 
// 获取所有key值
let keys = arrayOfObjects.flatMap(obj => Object.keys(obj));
// 获取所有value值
let values = arrayOfObjects.flatMap(obj => Object.values(obj));
 
console.log(keys); // 输出：['name', 'age', 'name', 'age', 'name', 'age']
console.log(values); // 输出：['Alice', 25, 'Bob', 30, 'Charlie', 28]

在这个例子中，flatMap 方法用于遍历数组对象，并分别获取每个对象的键和值数组，然后将它们扁平化为一个单一数组。这样keys数组包含了所有键的值，values数组包含了所有值的值。

- 阅读更多 -

three.js零基础入门超全超细的教程整理

System

2024-08-19

所有,javascript

在这个系列中，我们将从零开始，逐步教你如何使用three.js创建一个3D场景。首先，我们需要在HTML文件中引入three.js库。




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Three.js 入门示例</title>
    <style>
        body { margin: 0; overflow: hidden; } 
    </style>
</head>
<body>
    <script src="https://cdn.jsdelivr.net/npm/three@0.125.1/build/three.min.js"></script>
    <script>
        // 这里是我们的Three.js代码
    </script>
</body>
</html>

接下来，我们将创建一个简单的3D场景，包括一个立方体和一个平面。




// 创建场景
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);
 
// 创建平面
const planeGeometry = new THREE.PlaneGeometry(10, 10);
const planeMaterial = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const plane = new THREE.Mesh(planeGeometry, planeMaterial);
plane.rotation.x = -Math.PI / 2;
scene.add(plane);
 
// 将立方体置于平面上方
cube.position.set(5, 5, 0);
 
// 渲染循环
function animate() {
    requestAnimationFrame(animate);
 
    // 旋转立方体和平面
    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;
    plane.rotation.z += 0.01;
 
    renderer.render(scene, camera);
}
 
animate();

在这个简单的例子中，我们创建了一个场景，一个摄像机，一个渲染器，一个立方体和一个平面。然后，我们将立方体和平面添加到场景中，并设置了它们的渲染位置。最后，我们进入了一个渲染循环，使得所有的物体可以不断旋转，从而形成一个动态的3D场景。

- 阅读更多 -

js实现字符串转json对象的四种方法

System

2024-08-19

所有,javascript

在JavaScript中，可以使用以下四种方法将字符串转换为JSON对象：

使用JSON.parse()方法
使用eval()函数
使用new Function()构造函数
使用第三方库如jQuery.parseJSON()

方法1: 使用`JSON.parse()`

这是最常用的方法，它是原生的JavaScript方法，无需任何依赖。




var jsonString = '{"name":"John", "age":30, "city":"New York"}';
var jsonObj = JSON.parse(jsonString);
console.log(jsonObj.name); // 输出: John

方法2: 使用`eval()`

虽然eval()可以解析JSON字符串，但它也能执行任何JavaScript代码，这在安全性上是一个问题。因此，不推荐使用。




var jsonString = '({"name":"John", "age":30, "city":"New York"})';
var jsonObj = eval('(' + jsonString + ')');
console.log(jsonObj.name); // 输出: John

方法3: 使用`new Function()`

这种方法虽然看起来有些复杂，但在某些情况下可以避免eval()的问题。




var jsonString = '{"name":"John", "age":30, "city":"New York"}';
var jsonObj = (new Function('return ' + jsonString))();
console.log(jsonObj.name); // 输出: John

方法4: 使用jQuery.parseJSON()

如果你使用jQuery，可以使用$.parseJSON()方法解析JSON字符串。




var jsonString = '{"name":"John", "age":30, "city":"New York"}';
var jsonObj = $.parseJSON(jsonString);
console.log(jsonObj.name); // 输出: John

注意：从jQuery 3.0开始，$.parseJSON()已被内置的JSON.parse()取代。因此，推荐使用JSON.parse()方法。

- 阅读更多 -

OpenCV实战——OpenCV.js介绍

System

2024-08-19

所有,javascript

OpenCV.js是OpenCV（Open Source Computer Vision Library）在Web上的版本，它允许在浏览器中使用计算机视觉功能。

要在网页中使用OpenCV.js，你需要在HTML文件中包含OpenCV.js库。你可以从OpenCV的GitHub仓库或通过CDN获取OpenCV.js。

以下是一个简单的HTML示例，展示了如何在网页中包含OpenCV.js并使用它来读取图像：




<!DOCTYPE html>
<html>
<head>
    <title>OpenCV.js Example</title>
</head>
<body>
    <img id="image" src="example.jpg" alt="Image to process" />
    <script async src="https://docs.opencv.org/master/opencv.js" onload="onOpenCvLoaded();"></script>
    <script type="text/javascript">
        function onOpenCvLoaded() {
            const imgElement = document.getElementById('image');
            const src = cv.imread(imgElement);
            cv.imshow('Canvas', src);
            // 清理资源
            src.delete();
        }
    </script>
</body>
</html>

在这个例子中，我们首先在<head>标签中包含了OpenCV.js库。我们使用onload事件确保在OpenCV.js加载完成后执行一个函数onOpenCvLoaded()。在这个函数中，我们使用cv.imread()函数读取图像，然后使用cv.imshow()在网页上显示图像。最后，我们使用delete()方法清理资源。

请注意，由于浏览器的安全限制，你不能直接从本地文件系统读取文件并使用OpenCV.js进行操作。你需要将你的网页和图像文件托管在web服务器上才能正常工作。

- 阅读更多 -

vue-baidu-map大量数据使用点聚合依旧卡顿问题解决办法

System

2024-08-19

所有,vue.js

在使用Vue Baidu Map进行大量数据的展示时，卡顿是一个常见的问题。为了解决这个问题，可以尝试以下几种方法：

使用v-if进行按需渲染：只有当用户视野内的标记才进行渲染，其他的标记可以使用v-if来控制不进行渲染，从而减少计算量。
使用BmapView组件进行优化：BmapView组件是为了提高百度地图的渲染性能而设计的。
使用虚拟滚动技术：对于大量数据的渲染，可以使用如vue-virtual-scroll-list这样的库，使用虚拟滚动技术只渲染用户可见的部分数据。
使用图层（OverlayGroup）管理：对于大量的图层数据，可以使用百度地图的图层管理功能，将同类型的图层合并到一个图层中，减少渲染负担。
优化数据结构和CSS：减少不必要的CSS样式和动画，保持数据结构的简洁，以提高渲染性能。
使用Web Worker：对于耗时的操作，可以使用Web Worker在后台线程中运行，避免阻塞UI线程。
监控性能：使用浏览器的性能监控工具，如Chrome的开发者工具，定位卡顿的原因，并针对性地进行优化。

以下是一个简化的示例代码，展示了如何使用v-if来按需渲染标记：




<template>
  <baidu-map class="map" @ready="handlerMapReady">
    <bml-marker-clusterer :averageCenter="true">
      <bml-marker
        v-for="marker in visibleMarkers"
        :key="marker.id"
        :position="{lng: marker.longitude, lat: marker.latitude}"
      ></bml-marker>
    </bml-marker-clusterer>
  </baidu-map>
</template>
 
<script>
export default {
  data() {
    return {
      map: null,
      allMarkers: [], // 所有标记的数据
      visibleMarkers: [], // 当前视野内的标记
    };
  },
  watch: {
    allMarkers() {
      this.updateVisibleMarkers();
    }
  },
  methods: {
    handlerMapReady({ BMap, map }) {
      this.map = map;
      this.updateVisibleMarkers();
    },
    updateVisibleMarkers() {
      this.visibleMarkers = this.allMarkers.filter(marker => {
        // 判断标记是否在视野内
        return this.map.getBounds().containsPoint(new BMap.Point(marker.longitude, marker.latitude));
      });
    }
  }
};
</script>
 
<style>
.map {
  width: 100%;
  height: 100%;
}
</style>

在这个示例中，handlerMapReady方法会在地图准备就绪时调用，并且监视allMarkers数组的变化。updateVisibleMarkers方法会过滤出当前视野内的标记，并更新visibleMarkers数组。在模板中，只有visibleMarkers数组中的标记会被渲染。这样，当用户滚动或者移动地图时，只有视野内的标记会被渲染，减少了计算量，从而提高了性能。

- 阅读更多 -

vue-watch监听器

System

2024-08-19

所有,vue.js

在Vue.js中，你可以使用watch属性来监听组件的数据变化。当数据变化时，你可以执行一些逻辑处理。

下面是一个简单的例子，展示了如何在Vue组件中使用watch属性：




<template>
  <div>
    <input v-model="message">
    <p>Message is: {{ message }}</p>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      message: 'Hello Vue!'
    }
  },
  watch: {
    // 当message变化时，这个函数就会被调用
    message(newValue, oldValue) {
      console.log(`message changed from ${oldValue} to ${newValue}`);
      // 这里可以添加更多的逻辑处理
    }
  }
}
</script>

在这个例子中，当你在输入框中输入内容时，message数据会更新，同时触发watch中定义的监听器。监听器会输出一条消息到控制台，并且可以执行其他的逻辑。

- 阅读更多 -

方法1: 使用JSON.parse()

方法2: 使用eval()

方法3: 使用new Function()

方法4: 使用jQuery.parseJSON()

方法1: 使用`JSON.parse()`

方法2: 使用`eval()`

方法3: 使用`new Function()`