分类 javascript 下的文章

2024-08-12

在项目根目录下创建一个.eslintrc.js配置文件，并配置ESLint规则。以下是一个基本的配置示例：




module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  extends: [
    'plugin:react/recommended',
    'airbnb',
  ],
  parserOptions: {
    ecmaFeatures: {
      jsx: true,
    },
    ecmaVersion: 12,
    sourceType: 'module',
  },
  plugins: [
    'react',
  ],
  rules: {
    // 在这里添加或覆盖规则
    'react/jsx-filename-extension': [1, { 'extensions': ['.js', '.jsx'] }],
    'import/no-unresolved': [2, { commonjs: true, amd: true }],
    'import/no-extraneous-dependencies': [2, { devDependencies: true }],
  },
};

这个配置文件启用了React环境，使用了plugin:react/recommended插件，同时继承了airbnb的编码规范。你可以根据项目需求添加或修改规则。

- 阅读更多 -

Typed.js参数汇总——做出属于你自己的Web打字机效果

System

2024-08-12

所有,javascript

Typed.js 是一个轻量级的JavaScript库，用于创建一个属于你自己的网站打字机效果。以下是使用 Typed.js 时可以设置的参数列表：

element：这是你想要打字机效果的DOM元素。通常是一个<p>、<div>或其他HTML元素。
strings：这是打字机需要模拟的字符串数组。可以是单个字符串，也可以是多个字符串组成的数组。
typeSpeed：这是打字速度，以毫秒为单位。数值越高，打字速度越慢。
startDelay：这是开始打字的延迟时间，以毫秒为单位。数值越高，开始打字的时间越晚。
backSpeed：这是回退速度，以毫秒为单位。数值越高，回退的速度越慢。
loop：这是循环选项。如果设置为true，当字符串数组结束时，会重新开始循环。
loopCount：这是循环次数。如果设置为false，会无限循环。如果设置为具体数字，会循环指定次数。
showCursor：这是光标显示选项。如果设置为true，会在打字的末尾显示光标。
cursorChar：这是自定义光标字符。
contentType：这是内容类型。可以是'html'或'null'。

以下是一个简单的实例代码，展示了如何使用Typed.js创建一个基本的打字机效果：




<!DOCTYPE html>
<html>
<head>
    <title>Typed.js 打字机效果</title>
    <script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.11"></script>
</head>
<body>
    <p id="typed"></p>
 
    <script>
        var typed = new Typed('#typed', {
            strings: ['这是第一行文本', '这是第二行文本'],
            typeSpeed: 100,
            backSpeed: 50,
            loop: true
        });
    </script>
</body>
</html>

在这个例子中，我们创建了一个打字机效果，它会在<p id="typed"></p>元素上循环显示两个字符串。每个字符的打字速度是每秒100个字符，每个字符的回退速度是每秒50个字符，循环则会无限进行。

- 阅读更多 -

React18对接wujie碰到的问题与解决

System

2024-08-12

所有,javascript

在React 18中，我们可能会遇到与wujie（无接触）相关的问题，这通常是因为React 18中引入了一些与渲染过程相关的更改，这可能会影响到wujie的实现。

例如，在React 18中，新的渲染过程中，如果组件的渲染结果没有变化，React将不再重复创建DOM节点或执行更新，这可能会影响到依赖于这些副作用的库，比如wujie。

解决这类问题的一般方法是：

检查wujie库的文档和更新日志，看是否有针对React 18的特别说明或更新。
如果wujie库不支持React 18，可以尝试更新到最新版本，或者寻找替代的库。
如果必须使用当前版本的wujie库，可以考虑在React 18项目中降级到React 17，或者使用React提供的React.unstable_LegacyHiddenComponent来暂时回退到React 17的渲染行为。
联系wujie库的维护者或查看开源社区中关于React 18兼容性的讨论和pull request。

请注意，解决方案可能会依赖于wujie库的具体实现细节和你遇到的问题。如果没有具体的错误信息，很难给出更精确的解决方案。

- 阅读更多 -

JS魔法堂：函数节流（throttle）与函数去抖（debounce）

System

2024-08-12

所有,javascript




// 函数节流：确保一定时间内只执行一次函数
function throttle(fn, threshhold, scope) {
    threshhold || (threshhold = 250);
    var last,
        timer;
    return function () {
        var context = scope || this;
        var now = +new Date(),
            args = arguments;
        if (last && now - last < threshhold) {
            // 如果足够的时间没有过去，则清除定时器并重新设定执行时间
            clearTimeout(timer);
            timer = setTimeout(function () {
                last = now;
                fn.apply(context, args);
            }, threshhold);
        } else {
            // 如果时间到了，执行函数并重置执行时间
            last = now;
            fn.apply(context, args);
        }
    };
}
 
// 函数去抖：在函数执行完后等待一段时间，如果在这段时间内没有再次触发，则不再执行
function debounce(fn, delay) {
    var timer = null;
    return function () {
        var context = this,
            args = arguments;
        clearTimeout(timer);
        timer = setTimeout(function () {
            fn.apply(context, args);
        }, delay);
    };
}
 
// 使用示例
var myFunc = function() {
    console.log('Function triggered!');
};
 
// 节流
window.addEventListener('resize', throttle(myFunc, 1000));
 
// 去抖
window.addEventListener('scroll', debounce(myFunc, 500));

这段代码定义了两个函数throttle和debounce，它们可以用来控制函数的执行频率。throttle用于限制一个函数在一定时间内只能执行一次，而debounce则是在函数执行完后等待一段时间，如果在这段时间内没有再次触发，则不再执行该函数。这两种方式在不同的场景下都有其用处，例如滚动和调整浏览器大小时的事件监听。

- 阅读更多 -

3D数字孪生 - Three.js 项目介绍与基础环境搭建

System

2024-08-12

所有,javascript




// 引入必要的Three.js组件
import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.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 GLTFLoader();
loader.load('models/scene.gltf', function (gltf) {
  scene.add(gltf.scene);
}, undefined, function (error) {
  console.error(error);
});
 
// 添加轨道控制器
const controls = new OrbitControls(camera, renderer.domElement);
 
// 渲染循环
function animate() {
  requestAnimationFrame(animate);
  renderer.render(scene, camera);
  controls.update();
}
 
animate();

这段代码演示了如何使用Three.js创建一个基本的3D场景，加载一个模型，并使用OrbitControls来允许用户绕模型查看不同的视角。代码简洁，注重核心功能的实现，并提供了一个基本的3D环境的搭建示例。

- 阅读更多 -

three.js创建基础模型

System

2024-08-12

所有,javascript

在Three.js中创建一个基础模型通常涉及以下步骤：

创建场景（Scene）
创建相机（Camera）
创建渲染器（Renderer）
定义几何体（Geometry）
创建材质（Material）
创建物体（Mesh）
将物体添加到场景
渲染场景

以下是创建一个简单立方体模型的代码示例：




// 引入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.BoxGeometry(1, 1, 1);
 
// 创建材质
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
 
// 创建物体
const cube = new THREE.Mesh(geometry, material);
 
// 将物体添加到场景
scene.add(cube);
 
// 设置相机位置并指向场景中心
camera.position.z = 5;
 
// 渲染场景
function animate() {
  requestAnimationFrame(animate);
  renderer.render(scene, camera);
}
 
animate();

这段代码创建了一个立方体模型，并将其添加到Three.js场景中。然后设置了相机并启动了渲染循环，使模型动态显示在屏幕上。

System

2024-08-12

所有,javascript

报错解释：

这个错误表明在main.js文件的第46行代码中尝试访问一个名为router的变量或对象，但是在访问它之前它没有被正确初始化。这通常发生在JavaScript代码中尝试访问一个变量，但是在访问代码之前，该变量的声明或定义还没有执行。

解决方法：

确保router对象在第46行代码执行之前已经被初始化。如果router是由一个模块导入的，确保导入语句在使用router之前执行。
检查代码中的导入语句和变量声明，确保它们按正确的顺序出现，并且在你尝试使用router之前已经执行。
如果router是在某个异步过程中初始化的（例如，从服务器加载配置或路由表），确保在使用router之前，异步初始化过程已经完成。

示例代码修正：




// 假设 router 是 Vue Router 实例
import VueRouter from 'vue-router';
 
// 确保 Vue 和 VueRouter 已经加载
Vue.use(VueRouter);
 
// 初始化 router 实例
const router = new VueRouter({
  // ... 路由配置
});
 
// 现在可以安全地使用 router
new Vue({
  router,
  // ...
}).$mount('#app');

确保在创建Vue实例之前初始化router对象，并且在Vue实例中正确引用它。

- 阅读更多 -

【vuejs】$nextTick的原理分析和使用场景

System

2024-08-12

所有,javascript

$nextTick是Vue.js中的一个实例方法，用于访问下次DOM更新循环结束之后的状态。通常用于获取更新后的DOM或者在DOM更新完成后执行某些操作。

使用场景：

需要在Vue视图更新之后进行某些操作，比如获取更新后的元素尺寸或位置。
需要在数据更新后进行DOM操作，以确保DOM已经反映出最新的数据状态。

原理简述：

$nextTick方法实质上是将回调函数推迟到下一次DOM更新循环之后执行。这意味着它可以等待Vue完成数据更新并执行了必要的DOM更新之后，才会调用。

使用方法：




new Vue({
  // ...
  methods: {
    // 例如在方法中使用$nextTick
    exampleMethod: function () {
      // 修改数据
      this.someData = 'new value';
      // 使用$nextTick获取更新后的DOM状态
      this.$nextTick(function () {
        // DOM更新了
        this.getUpdatedDOMState();
      });
    }
  }
});

注意：$nextTick的回调函数中this指向的是当前Vue实例。

- 阅读更多 -

Web Spider Fiddler - JS Hook 基本使用

System

2024-08-12

所有,javascript




// 首先，我们需要在Fiddler中注册一个全局的JS钩子，用于拦截和修改请求。
// 这通常在Fiddler的OnBeforeRequest方法中实现。
// 假设我们要拦截所有访问'example.com'的请求，并在请求头中添加一个自定义字段。
 
FiddlerObject.webSession.oRequest["Custom-Header"] = "CustomValue";
 
// 然后，我们需要确保Fiddler的ScriptIsEnabled属性被设置为true，以启用JS脚本处理。
FiddlerObject.UI.lvSessions.SelectedItem.ScriptIsEnabled = true;
 
// 最后，我们可以通过以下方式保存修改后的请求，并发送给服务器。
FiddlerObject.UI.actSaveSelectedSession();

这段代码演示了如何在Fiddler中使用JS钩子来修改请求头。在实际使用时，需要确保Fiddler脚本处于启用状态，并且对代码进行适当的错误处理和异常捕获。

- 阅读更多 -

js如何实现要是有两位小数保留最多两位，如果没有小数则不展示小数

System

2024-08-12

所有,javascript

在JavaScript中，要实现保留至多位小数并且没有小数时不显示小数，可以使用以下方法：




function toFixedMax(num, maxDecimals) {
  // 转换为字符串以便处理
  const numStr = num.toString();
  // 检查是否有小数点
  if (numStr.includes('.')) {
    // 有小数点，使用toFixed保留至最多maxDecimals位小数
    return parseFloat(num.toFixed(maxDecimals)).toString();
  }
  // 没有小数点，直接返回整数
  return numStr;
}
 
// 示例
console.log(toFixedMax(123, 2)); // 输出: "123"
console.log(toFixedMax(123.456, 2)); // 输出: "123.46"
console.log(toFixedMax(123.4, 2)); // 输出: "123.4"
console.log(toFixedMax(123.0, 2)); // 输出: "123"

这个函数接受两个参数，num 是要处理的数字，maxDecimals 是希望保留的最大小数位数。如果数字中包含小数点，它会使用 toFixed 方法保留至 maxDecimals 位小数，然后将结果转换回字符串。如果没有小数点，它会返回数字的原始字符串表示。

- 阅读更多 -