标签 Javascript 下的文章

2024-08-10

在Node.js中，你可以使用puppeteer库来爬取动态网页。以下是一个简单的例子，展示如何使用puppeteer来获取动态网页的内容。

首先，你需要安装puppeteer：




npm install puppeteer

然后，你可以使用以下代码来爬取一个动态网页：




const puppeteer = require('puppeteer');
 
async function crawlDynamicPage(url) {
    const browser = await puppeteer.launch();
    const page = await browser.newPage();
    await page.goto(url);
    
    // 等待网页加载，例如等待某个元素出现
    await page.waitForSelector('.some-element-that-indicates-load');
 
    // 获取页面内容
    const content = await page.content();
    
    console.log(content);
 
    await browser.close();
}
 
// 使用示例
crawlDynamicPage('http://example.com').catch(error => console.error(error));

请确保替换http://example.com为你想要爬取的实际网页地址，并根据实际情况调整.some-element-that-indicates-load以等待正确的加载指示。

puppeteer可以做很多事情，包括模拟用户输入、点击等，这使得它在自动化测试和爬虫任务中非常有用。记得在使用时遵守网站的robots.txt规则和政策，尊重网站的数据获取和隐私权。

- 阅读更多 -

JavaScript进阶之OOP，前端黑科技实现原理揭秘，自学Flutter

System

2024-08-10

所有,flutter

在JavaScript中，我们可以使用类和继承来创建和管理对象。以下是一个使用类和继承的示例：




// 定义一个基类，Person
class Person {
  constructor(name) {
    this.name = name;
  }
 
  greet() {
    console.log(`Hello, my name is ${this.name}!`);
  }
}
 
// 定义一个继承自Person的子类，Student
class Student extends Person {
  constructor(name, major) {
    super(name); // 调用父类的构造函数
    this.major = major;
  }
 
  introduce() {
    console.log(`I'm a student majoring in ${this.major}.`);
  }
}
 
// 使用Student类创建一个实例
const john = new Student('John', 'Computer Science');
 
// 调用继承自Person的greet方法和Student的introduce方法
john.greet(); // 输出: Hello, my name is John!
john.introduce(); // 输出: I'm a student majoring in Computer Science.

在这个例子中，我们定义了一个Person类，它有一个greet方法。然后我们定义了一个Student类，它通过extends关键字继承了Person类，并添加了一个introduce方法。在Student类的构造函数中，我们使用super关键字来调用父类的构造函数。这样，Student类的实例就同时拥有从Person类继承的greet方法和自己新增的introduce方法。

- 阅读更多 -

HTML+CSS+JS--3D相册

System

2024-08-10

所有,html5

以下是一个简单的HTML和CSS代码示例，用于创建一个基本的3D相册效果。这里仅使用了HTML和CSS，没有使用JavaScript。




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3D Album</title>
<style>
  .album {
    width: 200px;
    height: 260px;
    perspective: 600px;
    margin: 50px auto;
  }
  .album img {
    width: 100%;
    height: 100%;
    position: absolute;
    backface-visibility: hidden;
    transition: transform 1s;
  }
  .album:hover img {
    transform: rotateY(180deg);
  }
</style>
</head>
<body>
<div class="album">
  <img src="album_front.jpg" alt="Album Front">
  <img src="album_back.jpg" alt="Album Back">
</div>
</body>
</html>

这段代码创建了一个名为.album的容器，其中包含两个img元素。当鼠标悬停在相册上时，通过CSS的:hover伪类和transform属性实现翻转效果。perspective属性增加了3D效果的深度感。这个例子展示了如何使用CSS创建简单的交互效果，而无需使用JavaScript。

- 阅读更多 -

ThreeJs CSS3DObject 点击失效问题

System

2024-08-10

所有,css3

在Three.js中，如果你发现CSS3DObject的点击事件无效，可能是因为你没有正确设置事件监听器，或者是因为有其他的3D对象遮挡了你的CSS3DObject，导致点击事件无法触发。

解决方法：

确保你已经为你的场景添加了CSS3DRenderer，并且正确设置了相机和渲染器。
确保CSS3DObject已经添加到场景中，并且其位置没有被其他3D对象遮挡。
设置事件监听器时，确保监听的是正确的对象和事件类型。对于WebGLRenderer，通常监听的是canvas的mousedown、mouseup或click事件。
如果有其他3D对象遮挡了CSS3DObject，你可以通过更改它们的位置来解决遮挡问题，或者使用raycaster检测点击事件是否发生在CSS3DObject上。

示例代码：




// 假设你已经有了一个scene, camera, renderer和cssRenderer
// 还有一个CSS3DObject对象cssObject
 
// 将CSS3DObject添加到场景中
scene.add(cssObject);
 
// 更新渲染器和CSS渲染器
function animate() {
    requestAnimationFrame(animate);
    renderer.render(scene, camera);
    cssRenderer.render(scene, camera);
}
animate();
 
// 设置事件监听器
function onMouseClick(event) {
    // 将鼠标位置转换为three.js的坐标系
    const mouse = new THREE.Vector2();
    mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
    mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
 
    // 通过raycaster检查点击事件是否发生在CSS3DObject上
    const raycaster = new THREE.Raycaster();
    raycaster.setFromCamera(mouse, camera);
    const intersects = raycaster.intersectObjects(scene.children);
 
    // 如果有交点并且该对象是CSS3DObject，处理点击事件
    if (intersects.length > 0 && intersects[0].object === cssObject) {
        console.log('CSS3DObject clicked!');
        // 执行点击事件的操作
    }
}
 
// 监听canvas的点击事件
renderer.domElement.addEventListener('click', onMouseClick);

确保在你的场景中，CSS3DObject是可见的，并且不会被其他3D对象遮挡。如果问题依然存在，可能需要进一步调试以确定是哪一部分导致了点击事件的失效。

- 阅读更多 -

靡语IT: JQuery-JavaScript代码库-遍历篇

System

2024-08-10

所有,jquery




// 假设我们有一个包含多个列表项的无序列表
// HTML 示例: <ul id="myList">
//                <li>Item 1</li>
//                <li>Item 2</li>
//                ...
//              </ul>
 
$(document).ready(function() {
    $('#myList li').each(function(index, element) {
        // 对每个列表项执行操作
        // 'index' 是当前列表项的索引号
        // 'element' 是当前列表项的DOM对象
        console.log(index + ': ' + $(element).text());
    });
});

这段代码使用jQuery的each函数来遍历具有特定ID的无序列表中的所有列表项。对于每个列表项，它打印出项的索引和文本内容。这是一个典型的用于遍历和处理HTML元素集合的例子，适用于学习jQuery基础。

- 阅读更多 -

[JavaScript游戏开发] 绘制冰宫宝藏地图、人物鼠标点击移动、障碍检测

System

2024-08-10

所有,javascript




// 假设有一个游戏地图对象 `gameMap` 和一个角色对象 `player`
// 游戏地图对象 `gameMap` 应该包含地图信息和相关方法
// 角色对象 `player` 应该包含位置信息和相关方法
 
// 鼠标点击事件处理函数，移动角色
function movePlayer(e) {
  var x = e.clientX - gameMap.offsetLeft;
  var y = e.clientY - gameMap.offsetTop;
  var newPos = gameMap.getTileAt(x, y);
  if (newPos && player.canMoveTo(newPos)) {
    player.moveTo(newPos);
  }
}
 
// 在游戏地图上绘制角色
function drawPlayer() {
  var pos = player.getPosition();
  gameMap.drawPlayerAt(pos);
}
 
// 角色移动方法
Player.prototype.moveTo = function(pos) {
  this.position = pos;
  drawPlayer(); // 重绘角色
};
 
// 角色是否可以移动到某个位置的方法
Player.prototype.canMoveTo = function(pos) {
  // 假设障碍物是不可通过的，这里需要检查 `pos` 是否为障碍物
  return !gameMap.isObstacleAt(pos);
};
 
// 游戏地图绘制角色的方法
GameMap.prototype.drawPlayerAt = function(pos) {
  // 使用 canvas API 绘制角色
};
 
// 游戏地图获取鼠标点击位置的方法
GameMap.prototype.getTileAt = function(x, y) {
  // 将屏幕坐标转换为地图上的tile坐标
  return {x: Math.floor(x / tileSize), y: Math.floor(y / tileSize)};
};
 
// 游戏地图检查某个位置是否为障碍物的方法
GameMap.prototype.isObstacleAt = function(pos) {
  // 检查 `pos` 是否在地图数据中标记为障碍物
  return mapData[pos.y] && mapData[pos.y][pos.x] === 'X';
};
 
// 初始化游戏
window.onload = function() {
  gameMap.addEventListener('click', movePlayer);
  drawPlayer(); // 初始化时绘制角色
};

这个代码示例提供了如何在游戏地图上移动一个角色的简化版本。它假设有一个游戏地图对象和一个角色对象，并展示了如何处理鼠标点击事件来移动角色，如何检测角色是否可以移动到新位置，以及如何在地图上绘制角色。需要注意的是，这里没有实现实际的绘图逻辑，而是提供了方法签名供开发者实现。

- 阅读更多 -

【JavaScript】聊一聊js中的浅拷贝与深拷贝与手写实现

System

2024-08-10

所有,javascript

浅拷贝和深拷贝是编程中处理对象复制的两种方式。浅拷贝复制了对象的最外层，而深拷贝则递归地复制了对象的所有层级。

浅拷贝

JavaScript 中实现浅拷贝的方法有：

使用 Object.assign()
通过展开运算符 ...
手动遍历对象属性并复制




// 使用 Object.assign()
const shallowCopy = Object.assign({}, originalObject);
 
// 使用展开运算符
const shallowCopy = { ...originalObject };
 
// 手动遍历
function shallowCopy(original) {
  const copy = {};
  for (let key in original) {
    if (original.hasOwnProperty(key)) {
      copy[key] = original[key];
    }
  }
  return copy;
}

深拷贝

JavaScript 中实现深拷贝的方法有：

使用 JSON.parse(JSON.stringify())（注意，这种方法不能处理含有循环引用的对象或者不是纯 JavaScript 对象的值）
使用 lodash 的 cloneDeep 方法
手动递归复制




// 使用 JSON.parse(JSON.stringify())
const deepCopy = JSON.parse(JSON.stringify(originalObject));
 
// 使用 lodash
const deepCopy = _.cloneDeep(originalObject);
 
// 手动递归
function deepCopy(original) {
  if (original === null || typeof original !== 'object') {
    return original;
  }
 
  const copy = Array.isArray(original) ? [] : {};
  for (let key in original) {
    if (original.hasOwnProperty(key)) {
      copy[key] = deepCopy(original[key]);
    }
  }
  return copy;
}

注意

浅拷贝只复制最外层的属性，如果属性是对象或数组，则复制的是引用。
深拷贝会递归复制所有层级的属性，对于对象中的每个对象都会创建一个新的实例。
在实际应用中，根据对象的复杂性，可能需要更复杂的深拷贝实现，处理例如循环引用的情况。

System

2024-08-10

所有,中间件

在React 18中，你可以使用react-router-dom的最新版本6，结合reduxjs/toolkit和redux-persist来管理状态。以下是安装和配置的示例代码：

安装最新版本的依赖：




npm install react-router-dom@6
npm install @reduxjs/toolkit
npm install redux-persist
npm install react-redux

配置Redux和Redux Persist：




// store.js
import { configureStore } from '@reduxjs/toolkit';
import { persistStore, persistReducer } from 'redux-persist';
import storage from 'redux-persist/lib/storage';
 
// 定义reducer
const rootReducer = { /* ... */ };
 
// 配置redux-persist
const persistConfig = {
  key: 'root',
  storage,
};
 
const persistedReducer = persistReducer(persistConfig, rootReducer);
 
// 创建store
export const store = configureStore({
  reducer: persistedReducer,
});
 
export const persistor = persistStore(store);

在React应用中使用Redux和React Router：




// index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { PersistGate } from 'redux-persist/integration/react';
import { BrowserRouter } from 'react-router-dom';
import App from './App';
import { store, persistor } from './store';
 
ReactDOM.render(
  <Provider store={store}>
    <PersistGate loading={null} persistor={persistor}>
      <BrowserRouter>
        <App />
      </BrowserRouter>
    </PersistGate>
  </Provider>,
  document.getElementById('root')
);

确保你的./App路径指向你的根组件。这样，你就设置了一个使用最新版本的React Router、Redux和Redux Persist的React应用。

- 阅读更多 -

Nodejs制作自定义中间件

System

2024-08-10

所有,中间件

在Node.js中，可以使用Express框架来创建自定义中间件。以下是一个简单的自定义中间件示例：

首先，确保你已经安装了Express：




npm install express

然后，创建一个简单的自定义中间件：




const express = require('express');
const app = express();
 
// 自定义中间件
const customMiddleware = (req, res, next) => {
  // 在这里可以对请求进行处理
  console.log('自定义中间件：请求被处理了！');
 
  // 调用next()以调用下一个中间件或路由处理程序
  next();
};
 
// 使用自定义中间件
app.use(customMiddleware);
 
// 一个路由处理程序
app.get('/', (req, res) => {
  res.send('Hello World!');
});
 
app.listen(3000, () => {
  console.log('服务器运行在 http://localhost:3000/');
});

当你访问服务器的根路径 / 时，你会看到自定义中间件输出的日志，并且接着显示 "Hello World!"。

- 阅读更多 -

推荐使用Middy：优雅的Node.js AWS Lambda中间件引擎

System

2024-08-10

所有,中间件

Middy是一个优雅的Node.js库，用于在AWS Lambda中创建可插拔的中间件。以下是一个使用Middy创建Lambda函数的简单示例：




import middy from '@middy/core';
import jsonBodyParser from '@middy/http-json-body-parser';
 
// 一个简单的Lambda函数，用于回显接收到的消息
const handler = async (event, context) => {
  return {
    statusCode: 200,
    body: JSON.stringify({ message: `Hello, ${event.body.name}!` })
  };
};
 
// 使用Middy包装Lambda函数，并添加JSON请求体解析中间件
const lambdaHandler = middy(handler).use(jsonBodyParser());
 
// 导出经过Middy处理后的Lambda函数
export { lambdaHandler as handler };

在这个示例中，我们创建了一个Lambda函数handler，它接收一个事件对象作为输入，并返回一个包含消息的JSON响应。我们使用Middy来包装这个处理函数，并通过use方法添加了jsonBodyParser中间件，该中间件负责解析请求体中的JSON。这样，在handler函数内部，我们可以直接通过event.body.name来访问名字属性，而不需要手动解析请求体。

- 阅读更多 -