分类 javascript 下的文章

2024-08-07

在React中，父组件可以通过refs来调用子组件的方法。以下是实现的步骤和示例代码：

在父组件中，使用React.createRef()创建一个ref。
将这个ref赋值给子组件的ref属性。
通过ref，你可以访问子组件的实例，并调用其方法。

示例代码：




// 子组件
class ChildComponent extends React.Component {
  myMethod = () => {
    console.log('子组件的方法被调用');
  };
 
  render() {
    return <div>子组件内容</div>;
  }
}
 
// 父组件
class ParentComponent extends React.Component {
  constructor(props) {
    super(props);
    this.child = React.createRef();
  }
 
  callChildMethod = () => {
    if (this.child.current) {
      this.child.current.myMethod();
    }
  };
 
  render() {
    return (
      <div>
        <button onClick={this.callChildMethod}>调用子组件方法</button>
        <ChildComponent ref={this.child} />
      </div>
    );
  }
}
 
ReactDOM.render(<ParentComponent />, document.getElementById('root'));

在这个例子中，当点击按钮时，父组件的callChildMethod方法会被调用，它通过之前创建的ref来访问子组件的myMethod方法并执行它。

- 阅读更多 -

Nodejs切换源的两种方式

System

2024-08-07

所有,javascript

在Node.js中，切换源通常指的是更改npm或yarn等包管理工具默认的仓库地址，以便安装包时使用不同的镜像源以加速下载。以下是两种常见的切换源的方式：

通过npm配置命令行工具：




npm config set registry https://registry.npm.taobao.org

通过yarn配置命令行工具：




yarn config set registry https://registry.npm.taobao.org

以上两种方式均为示例，将npm或yarn的源切换到了淘宝的npm镜像。您可以将https://registry.npm.taobao.org替换为其他您希望使用的源地址。

如果您希望在项目基础上切换源，可以在项目根目录下创建或编辑.npmrc或yarn.lock文件，添加或修改registry项：

对于.npmrc文件：




registry=https://registry.npm.taobao.org

对于yarn的yarn.lock文件，可以通过编辑文件或使用yarn命令来更改：




yarn config set registry https://registry.npm.taobao.org --filename=.yarnrc

这样，当您在该项目目录下使用npm或yarn时，都会使用指定的源地址。

- 阅读更多 -

JS——模板字符串

System

2024-08-07

所有,javascript

在JavaScript中，模板字符串（template string）是一种字符串字面量，使用反引号（ ` ）来标识。它可以包含普通字符以及嵌入的表达式。

模板字符串中可以嵌入变量或表达式，其语法是将变量名写在${}之中。这些表达式会在字符串模板执行时被计算，并且其值会被转换为字符串并包含在最终的字符串中。

下面是一个简单的模板字符串的例子：




const name = 'Alice';
const age = 25;
const greeting = `Hello, my name is ${name} and I am ${age} years old.`;
 
console.log(greeting);

输出将会是：




Hello, my name is Alice and I am 25 years old.

模板字符串还可以包含换行符和引入其他模板字符串，例如：




const multiLine = `This is a
multi-line
template string.`;
 
console.log(multiLine);

输出将会是：




This is a
multi-line
template string.

还可以通过函数调用插入复杂的表达式：




function complexCalculation(a, b) {
  return a * b;
}
 
const result = `${complexCalculation(5, 6)} is the result of the calculation.`;
 
console.log(result);

输出将会是：




30 is the result of the calculation.

- 阅读更多 -

【前端｜JS实战】使用JS来实现属于自己的贪吃蛇游戏！

System

2024-08-07

所有,javascript

下面是一个简单的贪吃蛇游戏的实现示例，使用JavaScript和HTML。这个示例提供了游戏的核心功能，包括蛇的移动、食物生成和碰撞检测。




<!DOCTYPE html>
<html>
<head>
    <title>贪吃蛇游戏</title>
    <style>
        .game-container {
            position: relative;
            width: 200px;
            height: 200px;
            border: 1px solid #000;
        }
        .snake {
            width: 10px;
            height: 10px;
            background-color: #000;
            position: absolute;
        }
        .food {
            width: 10px;
            height: 10px;
            background-color: red;
            position: absolute;
        }
    </style>
</head>
<body>
    <div class="game-container" id="gameContainer"></div>
    <script>
        const gameContainer = document.getElementById('gameContainer');
        const snake = [{ x: 10, y: 10 }];
        let food = { x: 30, y: 30 };
        let dx = 10;
        let dy = 0;
        let interval = 200;
 
        function createEl(className, x, y) {
            const el = document.createElement('div');
            el.className = className;
            el.style.left = `${x}px`;
            el.style.top = `${y}px`;
            gameContainer.appendChild(el);
            return el;
        }
 
        function createFood() {
            food = { x: Math.floor(Math.random() * 20 + 1) * 10, y: Math.floor(Math.random() * 20 + 1) * 10 };
            createEl('food', food.x, food.y);
        }
 
        function moveSnake() {
            const head = { x: snake[0].x + dx, y: snake[0].y + dy };
            snake.unshift(head);
 
            const el = document.querySelector('.snake');
            if (el) {
                el.style.left = `${head.x}px`;
                el.style.top = `${head.y}px`;
            } else {
                createEl('snake', head.x, head.y);
            }
 
            if (food.x === head.x && food.y === head.y) {
                createFood();
            } else {
                snake.pop();
                const tail = document.querySelector('.snake:last-child');
                gameContainer.removeChild(tail);
            }
        }
 
        createFood();
        setInterval(moveSnake, interval);
 
        document.addEventListener('keydown', (e) => {
            switch (e.key) {
                case 'ArrowUp':
                    if (dy !== 10) {
                        dy = -10;

- 阅读更多 -

js常用数组方法

System

2024-08-07

所有,javascript

常用的JavaScript数组方法包括：

map(): 创建一个新数组，其元素是原数组元素经过提供函数处理后的结果。
filter(): 创建一个新数组, 其包含通过所提供函数实现的测试的所有元素。
reduce(): 对数组中的每个元素执行一个由您提供的reducer函数（升序执行），将其结果汇总为单个返回值。
forEach(): 对数组的每个元素执行一次提供的函数。
push() 和 pop(): 添加和删除数组末尾的元素。
shift() 和 unshift(): 删除数组开头的元素，并添加新元素。
sort(): 对数组的元素进行排序。
concat(): 合并两个或多个数组。
slice(): 选取数组的一部分，并返回一个新数组。
splice(): 添加或删除数组中的元素。

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




// map()
const numbers = [1, 2, 3];
const doubled = numbers.map(num => num * 2);
console.log(doubled); // 输出: [2, 4, 6]
 
// filter()
const filtered = numbers.filter(num => num > 2);
console.log(filtered); // 输出: [3]
 
// reduce()
const sum = numbers.reduce((acc, num) => acc + num, 0);
console.log(sum); // 输出: 6
 
// forEach()
numbers.forEach(num => console.log(num)); // 输出: 1, 2, 3
 
// push() and pop()
numbers.push(4);
console.log(numbers.pop()); // 输出: 4
 
// shift() and unshift()
numbers.unshift(0);
console.log(numbers.shift()); // 输出: 0
 
// sort()
numbers.sort((a, b) => a - b);
console.log(numbers); // 输出: [1, 2, 3]
 
// concat()
const concatenated = numbers.concat([4, 5]);
console.log(concatenated); // 输出: [1, 2, 3, 4, 5]
 
// slice()
const sliced = numbers.slice(1, 3);
console.log(sliced); // 输出: [2, 3]
 
// splice()
numbers.splice(1, 1, 4); // 从索引1开始，删除1个元素，然后插入4
console.log(numbers); // 输出: [1, 4, 3]

- 阅读更多 -

Three.js-实现加载图片并旋转

System

2024-08-07

所有,javascript

在Three.js中，要实现加载图片并旋转，你可以使用THREE.TextureLoader来加载图片，并创建一个THREE.Mesh使用THREE.PlaneGeometry和THREE.MeshBasicMaterial，其中THREE.MeshBasicMaterial使用了加载的纹理。然后，你可以通过设置mesh.rotation的属性来旋转网格。

以下是一个简单的例子：




// 初始化Three.js场景
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 loader = new THREE.TextureLoader();
loader.load('path/to/your/image.jpg', function(texture) {
    // 创建一个平面作为网格
    const geometry = new THREE.PlaneGeometry(1, 1);
    const material = new THREE.MeshBasicMaterial({ map: texture, side: THREE.DoubleSide });
    const mesh = new THREE.Mesh(geometry, material);
    scene.add(mesh);
 
    // 旋转网格
    mesh.rotation.x = Math.PI / 4; // 旋转x轴，使其倾斜
 
    // 渲染循环
    function animate() {
        requestAnimationFrame(animate);
        renderer.render(scene, camera);
        mesh.rotation.y += 0.01; // 不断旋转
    }
    animate();
});
 
camera.position.z = 5;

在这个例子中，我们首先设置了Three.js的场景、相机和渲染器。然后，我们使用THREE.TextureLoader加载图片，在加载完成后，创建一个网格，并将该网格添加到场景中。我们还设置了网格的旋转属性，使其沿着y轴旋转。最后，我们启动了一个渲染循环，不断地更新网格的旋转。

- 阅读更多 -

vue2 使用pdf.js 实现pdf预览，并可复制文本

System

2024-08-07

所有,javascript




<template>
  <div>
    <pdf
      :src="pdfSrc"
      v-for="pageNumber in numPages"
      :key="pageNumber"
      :page="pageNumber"
      @num-pages="numPages = $event"
    ></pdf>
    <button @click="copyPdfText">复制PDF文本</button>
  </div>
</template>
 
<script>
import pdf from 'vue-pdf'
 
export default {
  components: {
    pdf
  },
  data() {
    return {
      pdfSrc: 'path/to/your/pdf/file.pdf',
      numPages: 0
    }
  },
  methods: {
    copyPdfText() {
      // 这里需要使用PDF.js的API来获取PDF文本内容
      // 假设你已经有了一个方法来获取PDF文本，这里是一个示例方法
      this.getPdfText().then(text => {
        navigator.clipboard.writeText(text).then(() => {
          console.log('PDF文本已复制到剪贴板');
        }).catch(err => {
          console.error('复制到剪贴板时发生错误:', err);
        });
      }).catch(err => {
        console.error('获取PDF文本时发生错误:', err);
      });
    },
    getPdfText() {
      // 这个方法需要使用PDF.js的API来实现，返回一个Promise
      // 这里只是示例，实际的实现需要根据PDF.js的API来编写
      // 假设你已经有了一个方法来获取PDF文本，这里是一个示例返回Promise
      return new Promise((resolve, reject) => {
        // 假设你已经有了pdfjsLib对象，并且已经加载了PDF文档
        const loadingTask = pdfjsLib.getDocument('path/to/your/pdf/file.pdf');
        loadingTask.promise.then(pdf => {
          const text = ''; // 这里应该是获取到PDF文档的文本内容
          resolve(text);
        }).catch(err => {
          reject(err);
        });
      });
    }
  }
}
</script>

在这个代码示例中，我们使用了vue-pdf组件来渲染PDF文档，并通过@num-pages来获取PDF的总页数。我们还添加了一个按钮，当点击按钮时，会触发copyPdfText方法，该方法使用navigator.clipboard.writeText()方法将PDF文本复制到剪贴板。这里假设你已经有了获取PDF文本的方法，这个方法需要使用PDF.js的API来实现，返回一个Promise。实际的实现需要根据PDF.js的API来编写。

- 阅读更多 -

JavaScript进阶：JS 垃圾回收机制_vue gc

System

2024-08-07

所有,javascript

JavaScript中的垃圾收集（GC）是自动管理内存的一种方式，它会自动释放不再使用的变量所占用的内存。Vue.js 框架并没有特别的垃圾收集机制，它使用的是JavaScript的标准垃圾收集机制。

在Vue.js中，组件被视为一种可以被垃圾收集的资源。当组件不再被使用时，它的事件监听器和子组件等资源会被自动清理。

以下是一个简单的例子，展示了Vue组件被销毁后，其所占用的内存资源将会被JavaScript的垃圾收集器回收：




<template>
  <div>
    <button @click="destroyComponent">Destroy Component</button>
    <my-component v-if="showComponent"></my-component>
  </div>
</template>
 
<script>
import MyComponent from './MyComponent.vue';
 
export default {
  components: {
    MyComponent
  },
  data() {
    return {
      showComponent: true
    };
  },
  methods: {
    destroyComponent() {
      this.showComponent = false;
      // 这里可以手动调用垃圾收集，但实际上不需要这么做
      // 因为Vue会在组件销毁时自动处理垃圾收集
      // 这里只是为了演示，通常不需要手动干预
      // global.gc(); // 调用JavaScript的手动垃圾收集函数
    }
  }
};
</script>

在这个例子中，MyComponent 组件被包含在v-if指令中，当用户点击按钮时，destroyComponent 方法被触发，showComponent 的值被设置为false，这导致MyComponent 组件被销毁。Vue.js 会自动处理该组件的垃圾收集。

需要注意的是，在生产环境中，通常不需要手动干预垃圾收集器，因为JavaScript引擎会自动管理内存。然而，在某些情况下，可以使用全局函数global.gc()来强制进行垃圾收集，但这主要用于调试目的，不应该在生产环境中频繁使用。

System

2024-08-07

所有,javascript

要在不连接互联网的情况下使用高德地图的JS API插件，您需要先下载这些插件的JS文件，然后在您的应用中引用这些本地文件。以下是一个基本的步骤和示例代码：

下载高德地图JS API库和所需插件的JS文件。
将这些文件放在本地服务器上或您的静态资源目录中。
在HTML文件中引用本地的JS文件而不是线上的URL。

示例代码：




<!DOCTYPE html>
<html>
<head>
    <title>高德地图离线部署</title>
    <!-- 引用本地的高德地图API库 -->
    <script src="path/to/your/amap-js-v1.3.0.js"></script>
    <!-- 引用本地的插件JS文件 -->
    <script src="path/to/your/RangingTool.js"></script>
    <script src="path/to/your/ToolBar.js"></script>
</head>
<body>
    <div id="container" style="width:600px;height:400px;"></div> <!-- 地图容器 -->
    <script>
        // 初始化地图
        var map = new AMap.Map('container', {
            zoom: 11, // 缩放级别
            center: [116.397428, 39.90923] // 中心点坐标
        });
 
        // 使用离线的插件
        map.addControl(new AMap.RangingTool());
        AMap.plugin(['AMap.ToolBar'], function() {
            map.addControl(new AMap.ToolBar());
        });
    </script>
</body>
</html>

在这个示例中，请将path/to/your/替换为您本地文件的实际路径。您需要确保所有必要的JS文件都已经下载并且放置在正确的位置。这样，即使在没有网络的环境下，高德地图的JS API也可以加载并使用您的插件。

- 阅读更多 -

js实现一键任意html元素生成截图功能

System

2024-08-07

所有,javascript

要实现一键生成任意HTML元素截图的功能，可以使用HTML2Canvas库来将HTML元素渲染成画布（canvas），然后将画布保存为图片。以下是实现这一功能的示例代码：

首先，需要引入HTML2Canvas库：




<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.3.2/html2canvas.min.js"></script>

然后，实现一个函数来处理截图的逻辑：




function takeScreenshot(element, filename = 'screenshot.png') {
  html2canvas(element).then(canvas => {
    // 创建一个图片元素
    let img = canvas.toDataURL('image/png');
    let a = document.createElement('a');
    a.href = img;
    a.download = filename;
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
  });
}

最后，为你想要生成截图的HTML元素添加一个点击事件，调用上面定义的函数：




<button onclick="takeScreenshot(document.getElementById('elementId'), 'custom_name.png')">生成截图</button>

在这个例子中，当按钮被点击时，takeScreenshot函数会被调用，并且传入了一个元素ID和一个自定义文件名。这个函数会将指定元素的截图下载为PNG文件。

- 阅读更多 -