标签 Javascript 下的文章

2024-08-08

在Vue 3中引入Three.js来渲染3D模型图，你可以按照以下步骤操作：

安装Three.js：




npm install three

创建一个Vue组件，并在mounted生命周期钩子中初始化Three.js场景、相机、渲染器和3D模型：




<template>
  <div ref="threeContainer"></div>
</template>
 
<script setup>
import * as THREE from 'three';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
 
const threeContainer = ref(null);
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);
threeContainer.value.appendChild(renderer.domElement);
 
let controls;
const loader = new GLTFLoader();
loader.load('path/to/your/model.glb', (gltf) => {
  scene.add(gltf.scene);
  gltf.scene.position.set(0, -2, 0);
  animate();
}, undefined, (error) => {
  console.error(error);
});
 
camera.position.z = 5;
 
function animate() {
  requestAnimationFrame(animate);
  renderer.render(scene, camera);
  controls && controls.update();
}
 
onMounted(() => {
  controls = new OrbitControls(camera, renderer.domElement);
  animate();
});
</script>
 
<style>
/* 确保Three.js渲染区域全屏 */
div {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}
</style>

在这个例子中，我们创建了一个Vue组件，在组件挂载后，使用GLTFLoader加载一个3D模型（.glb格式），并将其添加到Three.js的场景中。我们还初始化了相机和渲染器，并使用OrbitControls来允许用户通过鼠标滚轮和鼠标拖动来控制模型的视图。最后，我们在组件的mounted生命周期钩子中启动动画循环。

请确保替换path/to/your/model.glb为你的3D模型文件的实际路径。这个Vue组件可以被嵌入到你的Vue应用的任何页面中，以渲染3D模型。

- 阅读更多 -

使用js操作xpath

System

2024-08-08

所有,javascript

在JavaScript中，操作XPath通常是为了在DOM（文档对象模型）中查找特定的节点。然而，JavaScript的核心库不包含XPath解析器，因此你需要使用外部库，如xpath.js。

以下是使用xpath.js库来查找DOM中的节点的步骤：

引入xpath.js库。
使用document对象创建一个domHelper实例。
使用xpath.eval函数执行XPath表达式。

示例代码：




<!DOCTYPE html>
<html>
<head>
    <title>XPath Example</title>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/xpath.js/dist/xpath.min.js"></script>
</head>
<body>
 
<div id="content">
    <p>Hello, World!</p>
</div>
 
<script type="text/javascript">
    // 引入xpath.js库
    // ...
 
    // 使用domHelper来查找节点
    var domHelper = xpath.domHelper;
    var select = xpath.select;
 
    // 获取页面内容区域的DOM元素
    var content = document.getElementById('content');
 
    // 使用XPath选择器查找子节点
    var result = select("p", content)[0]; // 返回第一个匹配的节点
 
    // 输出结果
    console.log(result);
</script>
 
</body>
</html>

在这个例子中，我们使用了xpath.js库来查找ID为content的元素下的所有<p>元素。这个库需要通过CDN引入，或者你可以从npm安装。

请注意，xpath.js不是标准库的一部分，所以在使用之前你需要确认它已经正确加载。如果你的项目不允许使用外部库，你可能需要寻找其他解决方案，如使用document.evaluate方法（如果浏览器支持）。

- 阅读更多 -

前端使用 pdf.js加载PDF文件

System

2024-08-08

所有,javascript

要在前端使用 pdf.js 加载并显示 PDF 文件，你需要遵循以下步骤：

引入 pdf.js 库。
使用 PDFJS.getDocument() 方法加载 PDF 文件。
渲染 PDF 页面。

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




<!DOCTYPE html>
<html>
<head>
  <title>PDF.js Example</title>
</head>
<body>
 
<canvas id="pdf-canvas"></canvas>
 
<script src="https://mozilla.github.io/pdf.js/build/pdf.js"></script>
<script>
// 使用同步方式加载，简化示例
pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://mozilla.github.io/pdf.js/build/pdf.worker.js';
 
const url = 'your_pdf_file.pdf'; // 替换为你的 PDF 文件 URL
const canvas = document.getElementById('pdf-canvas');
const context = canvas.getContext('2d');
 
pdfjsLib.getDocument(url).promise.then(pdfDoc => {
  // 获取第一页
  pdfDoc.getPage(1).then(page => {
    // 计算视口大小
    const viewport = page.getViewport({ scale: 1.5 });
    canvas.height = viewport.height;
    canvas.width = viewport.width;
    
    // 渲染页面
    const renderContext = {
      canvasContext: context,
      viewport: viewport
    };
    page.render(renderContext).promise.then(() => {
      console.log('Page rendered!');
    });
  });
});
</script>
 
</body>
</html>

确保替换 your_pdf_file.pdf 为你的 PDF 文件的实际 URL。这段代码会在网页上显示 PDF 文件的第一页。

注意：实际应用中，你可能需要处理错误，添加更多页面的支持，调整渲染的质量等。

System

2024-08-08

所有,vue.js

TresJS 是一个利用 Vue.js 和 Three.js 创建 3D 场景的库。以下是一个简单的例子，展示如何使用 TresJS 创建一个简单的 3D 场景。

首先，确保你已经安装了 Vue CLI，然后创建一个新的 Vue 项目：




vue create my-3d-app
cd my-3d-app

然后，安装 TresJS：




npm install tresjs

接下来，你可以在 Vue 组件中使用 TresJS 创建一个 3D 场景。以下是一个简单的组件示例：




<template>
  <div id="scene-container"></div>
</template>
 
<script>
import { Scene, WebGLRenderer, PerspectiveCamera, BoxGeometry, MeshBasicMaterial, Mesh } from 'three';
import { TweenLite } from 'gsap';
import { TresCAMPRES } from 'tresjs';
 
export default {
  name: 'ThreeJsComponent',
  mounted() {
    const scene = new Scene();
    const camera = new PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
    const renderer = new WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.getElementById('scene-container').appendChild(renderer.domElement);
 
    const geometry = new BoxGeometry();
    const material = new MeshBasicMaterial({ color: 0x00ff00 });
    const cube = new Mesh(geometry, material);
    scene.add(cube);
 
    camera.position.z = 5;
 
    const animate = () => {
      requestAnimationFrame(animate);
 
      cube.rotation.x += 0.01;
      cube.rotation.y += 0.01;
 
      renderer.render(scene, camera);
    };
 
    animate();
  }
};
</script>
 
<style>
#scene-container {
  height: 100vh;
  width: 100vw;
}
</style>

在这个例子中，我们创建了一个包含一个立方体的简单 3D 场景，并通过 TweenLite 实现了简单的动画效果。这个组件可以被嵌入到任何 Vue 应用中，为应用提供 3D 支持。

- 阅读更多 -

JavaWeb第三章：JavaScript的全面知识

System

2024-08-08

所有,javascript

JavaScript是一种广泛使用的脚本语言，主要用于网页的交互性。在JavaWeb的第三章中，我们应该掌握JavaScript的基础知识，包括语法、事件处理、DOM操作等。

以下是一些关键概念的简单解释和示例代码：

变量和数据类型：
JavaScript中的变量可以存储各种数据类型，包括字符串、数字、布尔值、数组、对象等。




var name = "John Doe"; // 字符串
var age = 30; // 数字
var isEmployed = true; // 布尔值
var cars = ["Ford", "BMW", "Fiat"]; // 数组
var person = {name: "John", age: 30}; // 对象

函数：
函数是组织代码的方式，可以提高代码的可重用性和可读性。




function greet(name) {
    return "Hello, " + name + "!";
}
 
console.log(greet("John")); // 输出: Hello, John!

事件处理：
JavaScript可以用来响应用户的各种动作，如点击按钮、提交表单等。




document.getElementById("myButton").addEventListener("click", function() {
    alert("Button clicked!");
});

DOM操作：
JavaScript可以用来修改网页的文档对象模型(DOM)，从而动态地更新网页的内容。




document.getElementById("myParagraph").innerHTML = "Hello, World!";

循环和条件语句：
这些基本结构用于控制代码的流程。




for (var i = 0; i < 10; i++) {
    console.log(i);
}
 
if (age >= 18) {
    console.log("You are old enough to vote.");
} else {
    console.log("Sorry, you are too young to vote.");
}

以上是JavaScript的基础知识，对于更复杂的应用，你可能需要学习如何使用JavaScript库和框架，如jQuery、React、Angular等。在实际开发中，你还需要注意跨浏览器兼容性问题和安全性问题，例如XSS攻击。

- 阅读更多 -

Nodejs版本切换

System

2024-08-08

所有,javascript

在Node.js中切换版本，你可以使用n或nvm这样的版本管理工具。

如果你使用n，可以按照以下步骤切换版本：

安装n（如果你还没有安装的话）：
```
npm install -g n
```
使用n来安装你想要的Node.js版本：
```
n 14.17.0
```

如果你使用nvm，步骤如下：

安装nvm（如果你还没有安装的话）：




curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash

或者使用Wget：




wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash

关闭并重新打开你的终端。
使用nvm来安装你想要的Node.js版本：
```
nvm install 14.17.0
```
切换到该版本：
```
nvm use 14.17.0
```

请注意，这些命令会根据你想要切换到的Node.js版本而有所不同。在运行这些命令之前，请确保你已经安装了相应版本的Node.js，否则nvm会自动为你下载并安装它。

System

2024-08-08

所有,javascript




// map() 方法通过指定函数处理数组的每个元素，并返回处理后的新数组。
Array.prototype.myMap = function(callback, thisArg) {
  let result = [];
  for (let i = 0; i < this.length; i++) {
    if (this.hasOwnProperty(i)) {
      result.push(callback.call(thisArg, this[i], i, this));
    }
  }
  return result;
};
 
// reduce() 方法对数组中的所有元素调用指定的reducer函数，将其结果汇总为单个返回值。
Array.prototype.myReduce = function(callback, initialValue) {
  let accumulator = initialValue !== undefined ? initialValue : this[0];
  let k = initialValue !== undefined ? 0 : 1;
  for (; k < this.length; k++) {
    accumulator = callback(accumulator, this[k], k, this);
  }
  return accumulator;
};
 
// filter() 方法创建一个新数组，其包含通过所提供函数实现的测试的所有元素。
Array.prototype.myFilter = function(callback, thisArg) {
  let result = [];
  for (let i = 0; i < this.length; i++) {
    if (this.hasOwnProperty(i) && callback.call(thisArg, this[i], i, this)) {
      result.push(this[i]);
    }
  }
  return result;
};
 
// forEach() 方法对数组的每个元素执行一次提供的函数。
Array.prototype.myForEach = function(callback, thisArg) {
  for (let i = 0; i < this.length; i++) {
    if (this.hasOwnProperty(i)) {
      callback.call(thisArg, this[i], i, this);
    }
  }
};
 
// 示例使用
const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.myMap(function(num) {
  return num * 2;
});
console.log(doubled); // 输出: [2, 4, 6, 8, 10]
 
const sum = numbers.myReduce(function(acc, num) {
  return acc + num;
}, 0);
console.log(sum); // 输出: 15
 
const evenNumbers = numbers.myFilter(function(num) {
  return num % 2 === 0;
});
console.log(evenNumbers); // 输出: [2, 4]
 
numbers.myForEach(function(num, index) {
  console.log(`Index ${index}: ${num}`);
});

这段代码展示了如何手动实现JavaScript中的map(), reduce(), filter(), 和 forEach() 数组方法。这有助于理解这些函数的工作原理，并且可以在不依赖原生方法的环境中使用。

- 阅读更多 -

【JavaScript数据结构与算法】数组类（电话号码的字符组合）

System

2024-08-08

所有,javascript




class PhoneNumber {
    constructor(number) {
        this.number = number;
    }
 
    getAreaCode() {
        return this.number.slice(0, 3);
    }
 
    getExchangeCode() {
        return this.number.slice(3, 6);
    }
 
    getExtension() {
        return this.number.slice(6, 10);
    }
 
    toString() {
        return `(${this.getAreaCode()}) ${this.getExchangeCode()}-${this.getExtension()}`;
    }
}
 
// 使用示例
const phoneNumber = new PhoneNumber("1234567890");
console.log(phoneNumber.toString()); // (123) 456-7890

这段代码定义了一个PhoneNumber类，它接收一串数字作为电话号码，并提供了几个方法来获取区域码、交换码和分机号。toString方法则将这些信息格式化为常见的电话号码字符串表示形式。使用示例展示了如何创建PhoneNumber对象并输出格式化后的电话号码。

- 阅读更多 -

【前端框架开发 | Vue.js | 第三篇】Vue.js实例化及逻辑理解

System

2024-08-08

所有,vue.js




// 引入Vue库
import Vue from 'vue';
 
// 创建Vue实例
new Vue({
  // 挂载点：指定Vue实例为哪个DOM元素提供挂载点
  el: '#app',
 
  // 数据对象，用于Vue实例的数据存储
  data: {
    message: 'Hello Vue!'
  },
 
  // 方法对象，定义可复用的函数，用于事件处理等
  methods: {
    reverseMessage() {
      this.message = this.message.split('').reverse().join('');
    }
  }
});

这段代码展示了如何创建一个基本的Vue.js实例，并通过el属性指定了挂载点，data属性定义了数据对象，methods属性定义了一个方法用于反转字符串。这是学习Vue.js时的一个基本例子，它帮助初学者理解Vue实例的结构和基本用法。

System

2024-08-08

所有,java




// 引入相关模块
const { TextEncoder, TextDecoder } = require('util');
const { createHash } = require('crypto');
 
// 将字符串转换为 UTF-8 编码的数据
function stringToUtf8Array(str) {
    const encoder = new TextEncoder(); // 创建文本编码器
    return encoder.encode(str); // 将字符串编码为UTF-8编码单元的数组
}
 
// 将 UTF-8 编码数据转换为字符串
function utf8ArrayToString(utf8) {
    const decoder = new TextDecoder(); // 创建文本解码器
    return decoder.decode(utf8); // 将UTF-8编码单元数组解码为字符串
}
 
// 对数据进行Base64编码
function base64Encode(data) {
    return Buffer.from(data).toString('base64'); // 使用Buffer对象转换为Base64字符串
}
 
// 对Base64字符串进行解码
function base64Decode(str) {
    return Buffer.from(str, 'base64'); // 使用Buffer对象从Base64字符串解码回原始数据
}
 
// 使用SHA-256算法计算Base64编码数据的哈希值
function hashData(data) {
    const hash = createHash('sha256'); // 创建SHA-256哈希对象
    hash.update(data); // 更新哈希对象的数据
    return hash.digest('base64'); // 生成哈希值并以Base64字符串形式返回
}
 
// 示例使用
const exampleString = "Hello, World!";
const utf8Data = stringToUtf8Array(exampleString);
const base64Encoded = base64Encode(utf8Data);
const base64Decoded = base64Decode(base64Encoded);
const hashedValue = hashData(base64Decoded);
 
console.log('Original String:', exampleString);
console.log('UTF-8 Array:', utf8Data);
console.log('Base64 Encoded:', base64Encoded);
console.log('Base64 Decoded:', utf8ArrayToString(base64Decoded));
console.log('Hashed Value:', hashedValue);

这段代码展示了如何在JavaScript中处理文本字符串的UTF-8编码、Base64编码以及数据的哈希计算。它首先将字符串转换为UTF-8编码的数组，然后将该数组编码为Base64字符串，并对其进行哈希处理。最后，它提供了相应的解码和反哈希过程，以便可以将Base64字符串转换回原始数据并验证哈希值。

- 阅读更多 -