标签 Javascript 下的文章

2024-08-17

在这个问题中，你想要了解如何使用JSON、AJAX和Vue.js来构建一个前端应用。这里有一个简单的例子，展示了如何使用Vue.js来处理从一个API获取的JSON数据。




<!DOCTYPE html>
<html>
<head>
    <title>Vue AJAX JSON Example</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
</head>
<body>
    <div id="app">
        <h2>Vue AJAX JSON Example</h2>
        <ul>
            <li v-for="user in users">{{ user.name }}</li>
        </ul>
    </div>
 
    <script>
        new Vue({
            el: '#app',
            data: {
                users: []
            },
            created() {
                this.fetchData();
            },
            methods: {
                fetchData() {
                    let vm = this;
                    let xhr = new XMLHttpRequest();
                    xhr.open('GET', 'https://jsonplaceholder.typicode.com/users');
                    xhr.onload = function() {
                        if (this.status == 200) {
                            vm.users = JSON.parse(this.responseText);
                        }
                    };
                    xhr.send();
                }
            }
        });
    </script>
</body>
</html>

这段代码使用Vue.js创建了一个简单的应用，在created钩子中，它通过AJAX请求获取了一个用户的JSON数据，并将其解析后赋值给了users数组。然后，在模板中，它使用v-for指令来循环显示每个用户的名字。这是一个非常基础的例子，展示了如何将这些技术结合在一起使用。

- 阅读更多 -

第二十三章 javascript请求方式Ajax

System

2024-08-17

所有,ajax

第二十三章的内容主要是关于Ajax的，Ajax是Asynchronous JavaScript and XML的缩写，意味着可以使用JavaScript异步地从服务器请求数据，而不是整个页面。

以下是一个使用原生JavaScript实现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.send();

这段代码创建了一个新的XMLHttpRequest对象，并对其进行了配置，以发送GET请求到指定的API端点。当请求完成时，它会检查响应状态码，并处理响应数据或错误。

注意：现代的开发中，我们通常会使用更现代的方法，比如Fetch API，它提供了更简洁和更易用的方式来处理Ajax请求。以下是使用Fetch API的一个例子：




fetch('your-api-endpoint')
  .then(function (response) {
    if (response.status >= 200 && response.status < 300) {
      return response.text();
    } else {
      throw new Error('AJAX Request was unsuccessful');
    }
  })
  .then(function (data) {
    console.log(data);
  })
  .catch(function (error) {
    console.error('Request failed:', error);
  });

Fetch API 使用了Promises，使得异步代码更加简洁和容易理解。

System

2024-08-17

所有,ajax

在JavaScript中，我们可以使用Promise来处理异步操作。这种处理方式比传统的回调函数和事件更加清晰和强大。

在这个问题中，我们需要使用Promise.wrap(ajax)来进行异步操作的封装。这里的ajax是一个假设的异步函数，它可能是一个发送HTTP请求的函数。

以下是一个简单的示例，演示如何使用Promise封装一个异步操作（例如发送AJAX请求）：




// 假设的ajax函数，它可能是一个发送HTTP请求的函数
function ajax(url) {
  return new Promise(function(resolve, reject) {
    var xhr = new XMLHttpRequest();
    xhr.open("GET", url, true);
    xhr.onreadystatechange = handler;
    xhr.responseType = "json";
    xhr.setRequestHeader("Accept", "application/json");
 
    xhr.send();
 
    function handler() {
      if (this.readyState !== 4) {
        return;
      }
      if (this.status === 200) {
        resolve(this.response);
      } else {
        reject(new Error(this.statusText));
      }
    }
  });
}
 
// 使用Promise.wrap封装ajax函数
var wrappedAjax = Promise.wrap(ajax);
 
// 使用wrappedAjax进行请求
wrappedAjax('https://api.example.com/data').then(function(data) {
  console.log(data);
}).catch(function(error) {
  console.error('Error fetching data: ', error);
});

在这个示例中，我们定义了一个ajax函数，它返回一个Promise对象。然后我们使用Promise.wrap来创建一个封装了ajax函数的新函数wrappedAjax。最后，我们调用wrappedAjax并传入URL来发送请求，并在Promise对象中处理结果。

需要注意的是，Promise.wrap是Bluebird库提供的一个方法，它不是所有JavaScript环境的标准部分。如果你正在使用的环境中没有Bluebird库，你可能需要先引入这个库才能使用Promise.wrap。

- 阅读更多 -

JavaScript学习笔记Event事件_js onclick event

System

2024-08-17

所有,javascript

在JavaScript中，我们可以使用事件来处理用户与浏览器的交互。例如，当用户点击页面上的元素时，我们可以触发一个事件来执行一些代码。

在JavaScript中，我们可以使用onclick事件来处理用户的点击动作。

以下是一些使用onclick事件的方法：

方法一：直接在HTML标签中添加事件




<button onclick="alert('Hello, World!')">Click Me!</button>

当用户点击按钮时，会弹出一个带有"Hello, World!"的警告框。

方法二：在JavaScript中添加事件




<button id="myButton">Click Me!</button>
 
<script>
    document.getElementById("myButton").onclick = function() {
        alert("Hello, World!");
    };
</script>

当用户点击按钮时，也会弹出一个带有"Hello, World!"的警告框。

方法三：使用addEventListener()方法添加事件




<button id="myButton">Click Me!</button>
 
<script>
    document.getElementById("myButton").addEventListener("click", function() {
        alert("Hello, World!");
    });
</script>

addEventListener()方法可以为元素添加多个事件处理程序。这意味着，你可以为一个元素添加多个onclick事件，并且它们都将被触发。

以上就是在JavaScript中使用onclick事件的一些方法。

- 阅读更多 -

使用 JS 实现在浏览器控制台打印图片 console.image()

System

2024-08-17

所有,javascript

console.image() 是一个非标准的 Chrome 扩展方法，用于在浏览器的控制台中打印图片。然而，这个方法并不是所有浏览器都支持，因此它不是一个可移植的解决方案。

如果你只是想在开发过程中临时查看图片，你可以使用 console.log() 方法，并在输出中点击图片链接查看。




// 使用 console.log 打印图片链接
console.log('图片链接:', 'https://example.com/image.jpg');

如果你正在使用 Node.js 环境，并且想要在控制台打印图片，你可以使用像 node-canvas 这样的库。




const { createCanvas } = require('canvas');
const canvas = createCanvas(200, 200);
const ctx = canvas.getContext('2d');
 
const image = await loadImage('path/to/image.png'); // 使用 node-canvas 的 loadImage 方法
ctx.drawImage(image, 0, 0, 200, 200);
 
console.log(canvas.toBuffer()); // 打印图片的二进制数据

请注意，在 Node.js 环境中，你需要使用专门的库来处理图片，因为 Node.js 的标准库中并没有提供处理图片的功能。上面的代码示例使用了 node-canvas，这是一个基于 C++ 的 Node.js 模块，可以在 Node.js 环境中绘制图形和处理图片。

- 阅读更多 -

从JS角度直观理解递归的本质

System

2024-08-17

所有,javascript

在JavaScript中，递归是一种非常常见的编程技巧，它允许函数直接或间接地调用自身。要理解递归的本质，我们可以从以下几个方面来看：

边界条件：递归调用必须有一个明确的退出条件，称为基本情况（base case），否则会进入无限循环。
递归调用：函数在每次递归调用时都会减小问题规模，向基本情况逼近。
返回值：递归函数应该在某一点上返回结果，以便函数可以返回那个结果。

以下是一个计算阶乘的递归函数示例：




function factorial(n) {
  // 基本情况
  if (n === 1) {
    return 1;
  }
  // 递归调用
  return n * factorial(n - 1);
}
 
console.log(factorial(5)); // 输出：120

在这个例子中，factorial 函数通过递归调用自己来计算一个数的阶乘。当n减少到1时，递归调用停止，并逐层返回到原始调用的位置，最终返回计算结果。

System

2024-08-17

所有,javascript

JavaScript中提供了多种遍历数组和对象的方法，以下是各种方法的简单介绍和示例代码：

for：基本的循环结构，用于遍历数组或者对象。




let arr = [1, 2, 3, 4, 5];
for (let i = 0; i < arr.length; i++) {
    console.log(arr[i]);
}

forEach：遍历数组中的每个元素并执行回调函数。




let arr = [1, 2, 3, 4, 5];
arr.forEach(function(value, index) {
    console.log(value);
});

map：创建一个新数组，其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。




let arr = [1, 2, 3, 4, 5];
let newArr = arr.map(function(value, index) {
    return value * 2;
});
console.log(newArr); // [2, 4, 6, 8, 10]

filter：创建一个新数组，其包含通过所提供函数实现的测试的所有元素。




let arr = [1, 2, 3, 4, 5];
let newArr = arr.filter(function(value, index) {
    return value > 3;
});
console.log(newArr); // [4, 5]

reduce：对数组中的所有元素调用一个reducer函数（升序执行），将其结果汇总为单个返回值。




let arr = [1, 2, 3, 4, 5];
let sum = arr.reduce(function(accumulator, currentValue) {
    return accumulator + currentValue;
}, 0);
console.log(sum); // 15

every：检查数组中的所有元素是否都符合某个条件。




let arr = [1, 2, 3, 4, 5];
let result = arr.every(function(value, index) {
    return value > 0;
});
console.log(result); // true

some：检查数组中的任何元素是否符合某个条件。




let arr = [1, 2, 3, 4, 5];
let result = arr.some(function(value, index) {
    return value > 3;
});
console.log(result); // true

includes：检查数组是否包含一个指定的值。




let arr = [1, 2, 3, 4, 5];
let result = arr.includes(3);
console.log(result); // true

find：返回数组中满足提供的测试函数的第一个元素的值。




let arr = [1, 2, 3, 4, 5];
let result = arr.find(function(value, index) {
    return value > 3;
});
console.log(result); // 4

以上方法可以遍历数组、对象、字符串等，并对元素执行操作。每种方法都有其适用的场景，例如map用于转换数组，reduce用于累加值，filter用于筛选元素等。

- 阅读更多 -

vue3-main.js配置全局变量

System

2024-08-17

所有,javascript

在 Vue 3 中配置全局变量，你可以使用 provide 和 inject 组合，或者使用 globalProperties 在应用级别添加属性。以下是使用 globalProperties 的示例：




// main.js
import { createApp } from 'vue';
import App from './App.vue';
 
const app = createApp(App);
 
// 添加全局变量
app.config.globalProperties.$myGlobalVar = '这是一个全局变量';
 
// 创建并挂载根实例
app.mount('#app');

在任何组件中，你可以通过 this 访问这个全局变量：




// 任何组件内
export default {
  mounted() {
    console.log(this.$myGlobalVar); // 输出: 这是一个全局变量
  }
};

请注意，过度使用全局变量会导致应用程序的可维护性降低，应该谨慎使用。

- 阅读更多 -

js实现AES加密解密，简易又全面

System

2024-08-17

所有,javascript

在JavaScript中实现AES加密解密，你可以使用crypto-js库，这是一个在JavaScript中提供加密服务的库。以下是一个使用crypto-js进行AES加密解密的示例代码：

首先，你需要安装crypto-js：




npm install crypto-js

然后，你可以使用以下代码进行AES加密和解密：




// 引入crypto-js的AES部分
const CryptoJS = require("crypto-js");
 
// 密钥和向量（向量可选，但是推荐使用）
const key = "your-256-bit-secret-key"; // 256位密钥
const iv = "unique-iv-16-characters-1234"; // 16位向量
 
// 加密函数
function encryptAES(text) {
  return CryptoJS.AES.encrypt(text, key, { iv: iv }).toString();
}
 
// 解密函数
function decryptAES(ciphertext) {
  const bytes  = CryptoJS.AES.decrypt(ciphertext, key, { iv: iv });
  return bytes.toString(CryptoJS.enc.Utf8);
}
 
// 使用示例
const plaintext = "My secret data";
const ciphertext = encryptAES(plaintext);
console.log('Encrypted:', ciphertext);
 
const decrypted = decryptAES(ciphertext);
console.log('Decrypted:', decrypted);

确保替换your-256-bit-secret-key和unique-iv-16-characters-1234为你自己的密钥和向量。这段代码提供了一个简单的AES加密解密功能，适用于简单的文本数据加密。

- 阅读更多 -

3.js - MeshPhysicalMaterial - 虹彩效果

System

2024-08-17

所有,javascript

在Three.js中，要创建一个具有虹彩效果的材质，您可以使用MeshPhysicalMaterial并调整其属性以模拟多种颜色间的光滑渐变。以下是一个简单的示例代码，展示了如何创建一个有虹彩效果的网格：




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.SphereGeometry(1, 32, 32);
const material = new THREE.MeshPhysicalMaterial({
    color: new THREE.Color(0x000000), // 基础颜色设置为黑色
    roughness: 0.5, // 粗糙度，0为光滑，1为粗糙
    clearcoat: 1.0, // 清洁层强度，0为无清洁层，1为最强
    clearcoatRoughness: 0.0, // 清洁层的粗糙度
    ior: 1.5, // 介质折射率
    sheen: new THREE.Color(0xffffff), //  sheen色（亮光部分的颜色）
    sheenRoughness: 0.0 // sheen roughness（亮光部分的粗糙度）
});
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
 
camera.position.z = 5;
 
function animate() {
    requestAnimationFrame(animate);
 
    // 旋转球体模拟虹彩效果
    mesh.rotation.y += 0.01;
 
    renderer.render(scene, camera);
}
 
animate();

在这段代码中，我们创建了一个球体并使用MeshPhysicalMaterial定义了它的材质。通过调整sheen和sheenRoughness属性，我们可以改变光线在材质表面上的散射，从而模拟出一种虹彩效果。通过改变球体的旋转来动态更新渲染，从而创建一个动态的虹彩效果。

- 阅读更多 -