Tech Blog

2024-08-15

在Vue页面中，要显示多个空格，可以使用CSS属性white-space来控制。white-space属性定义了元素内的空白如何处理。

如果你想显示普通的空格，直接在模板中输入空格即可。但如果你想显示更多的空格，并且这些空格不会被浏览器忽略，你可以使用 （非断行空格）来代替每个空格。

另外，如果你想要通过Vue的绑定显示多个空格，可以在数据对象中定义一个计算属性，返回一个包含 的字符串。

下面是一个简单的例子：




<template>
  <div>
    <!-- 显示多个普通空格 -->
    <p>{{ normalSpaces }}</p>
 
    <!-- 使用v-html显示多个非断行空格 -->
    <p v-html="nonBreakingSpaces"></p>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      // 假设我们需要显示10个空格
      spaceCount: 10
    };
  },
  computed: {
    // 计算属性生成包含空格的字符串
    normalSpaces() {
      return ' '.repeat(this.spaceCount);
    },
    // 计算属性生成包含非断行空格的HTML字符串
    nonBreakingSpaces() {
      return '&nbsp;'.repeat(this.spaceCount);
    }
  }
};
</script>

在这个例子中，normalSpaces计算属性返回了一个包含普通空格的字符串，nonBreakingSpaces计算属性返回了一个包含 的字符串，这样就可以在页面上显示多个空格。使用v-html指令时要注意，确保内容是可信的，以防止跨站脚本攻击（XSS）。

- 阅读更多 -

Kriging.js - 地统计插值库

System

2024-08-15

所有,javascript

Kriging.js 是一个用于地统计插值的库，它可以通过克里金插值法来估算给定点的数据值。克里金插值法是一种空间统计方法，用于在已知少量数据点的情况下推算出更大区域内的数据分布。

以下是如何使用 Kriging.js 进行克里金插值的简单示例：

首先，确保你的环境中已经安装了 Kriging.js。如果没有安装，可以使用 npm 进行安装：




npm install kriging

然后，你可以在你的 JavaScript 代码中引入 Kriging 模块，并使用它来进行插值：




const kriging = require('kriging');
 
// 假设你有一组已知的数据点
const x = [0, 1, 2, 3, 4]; // X坐标
const y = [0, 1, 2, 1, 0]; // Y坐标
const z = [0, 0.5, 1, 0.5, 0]; // 各点的观测值
 
// 设置插值参数
const options = {
  // 指定插值类型，这里使用克里金插值
  type: 'ordinary',
  // 设置空间变异性，这里使用球形变异性模型
  sill: 1.0,
  range: 0.5,
  // 设置其他属性，如变异性，自相关系数等
};
 
// 执行克里金插值
const result = kriging.kriging(x, y, z, options);
 
// 获取插值结果
const resultX = result.x; // 插值点的X坐标
const resultY = result.y; // 插值点的Y坐标
const resultZ = result.Z; // 插值点的Z值，即预测的数据分布
 
// 输出结果
console.log(resultX);
console.log(resultY);
console.log(resultZ);

在这个例子中，我们首先定义了一组已知的数据点，然后设置了克里金插值的参数，并使用 kriging.kriging 方法来执行插值。最后，我们打印出了插值结果，包括每个点的X、Y坐标以及预测的Z值。

请注意，Kriging.js 的具体使用方法可能会随着库的版本更新而有所变化，请参考最新的官方文档以获取准确的信息。

- 阅读更多 -

Three.js3D场景编辑器

System

2024-08-15

所有,javascript

Three.js 是一个用于在网页上创建和显示3D图形的JavaScript库。它不是一个3D场景编辑器，而是一个用于创建3D内容的框架。如果你需要一个3D场景编辑器，可能需要寻找其他工具，如Blender或3DS Max，并将导出的模型导入到Three.js中。

以下是一个简单的Three.js示例，展示如何在网页上创建一个基本的3D场景，并加载一个OBJ格式的3D模型：




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Three.js 3D 模型示例</title>
    <style>
        body { margin: 0; overflow: hidden; }
    </style>
</head>
<body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
    <script>
        // 创建场景
        var scene = new THREE.Scene();
 
        // 创建摄像机
        var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
 
        // 创建渲染器
        var renderer = new THREE.WebGLRenderer();
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(renderer.domElement);
 
        // 加载3D模型
        var loader = new THREE.OBJLoader();
        loader.load('path/to/your/model.obj', function (object) {
            // 设置模型大小、位置等
            object.position.set(0, 0, 0);
            object.scale.set(1, 1, 1);
            scene.add(object);
        });
 
        // 创建灯光
        var ambientLight = new THREE.AmbientLight(0xcccccc);
        scene.add(ambientLight);
 
        // 设置摄像机位置并开始渲染循环
        camera.position.z = 5;
        function animate() {
            requestAnimationFrame(animate);
            renderer.render(scene, camera);
        }
        animate();
    </script>
</body>
</html>

在这个例子中，我们创建了一个场景、摄像机、渲染器和一个灯光。然后我们使用OBJLoader来加载一个OBJ格式的3D模型。最后，我们设置摄像机的位置并启动一个循环来不断渲染场景。

要使这段代码工作，你需要替换'path/to/your/model.obj'为你的模型文件的实际路径。你还需要确保你的服务器允许跨源资源共享（CORS），否则加载外部资源可能会遇到问题。

如果你需要一个真正的3D场景编辑器，你可能需要寻找其他工具，如Blender或3DS Max，并了解如何将模型导出为Three.js支持的格式，如.obj或.gltf。

- 阅读更多 -

JS之防抖和节流

System

2024-08-15

所有,javascript

防抖（debounce）和节流（throttle）是前端开发中常用的性能优化手段，用以控制函数执行的频率，以减少计算资源的使用。

防抖：指触发事件后，在指定的时间内，若有新的触发，则重新计时。直到指定时间内没有新的触发为止，事件处理函数才会执行一次。

节流：指连续触发事件时，保证一定时间内只调用一次事件处理函数。

防抖示例代码：




function debounce(fn, wait) {
    let timeout = null;
    return function() {
        let context = this;
        let args = arguments;
        if (timeout) clearTimeout(timeout);
        let callNow = !timeout;
        timeout = setTimeout(() => {
            timeout = null;
        }, wait);
        if (callNow) fn.apply(context, args);
    };
}
 
// 使用
let myFunc = debounce(function() {
    console.log('Function called!');
}, 2000);
window.addEventListener('scroll', myFunc);

节流示例代码：




function throttle(fn, wait) {
    let previous = 0;
    return function() {
        let context = this;
        let args = arguments;
        let now = new Date();
        if (now - previous > wait) {
            fn.apply(context, args);
            previous = now;
        }
    };
}
 
// 使用
let myFunc = throttle(function() {
    console.log('Function called!');
}, 2000);
window.addEventListener('scroll', myFunc);

- 阅读更多 -

JS（JavaScript）数据校验正则表达式

System

2024-08-15

所有,javascript




// 定义一个函数用于验证用户输入的邮箱格式是否正确
function validateEmail(email) {
    const emailRegex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/;
    return emailRegex.test(email);
}
 
// 测试函数
console.log(validateEmail('example@test.com')); // 应该输出 true
console.log(validateEmail('bad-email-format')); // 应该输出 false

这段代码定义了一个validateEmail函数，它接收一个字符串参数email，并使用正则表达式来检查这个字符串是否符合常见的邮箱格式。如果邮箱格式正确，函数返回true，否则返回false。这个例子展示了如何使用正则表达式进行数据验证，并且是数据验证中常用的一个场景。

- 阅读更多 -

vue2 使用print.js实现打印功能

System

2024-08-15

所有,javascript

在Vue 2项目中使用print.js实现打印功能，首先需要安装print.js库：




npm install print-js --save

然后在Vue组件中引入并使用print.js：




// 引入print.js
import printJS from 'print-js';
 
export default {
  methods: {
    printContent() {
      // 指定要打印的内容，可以是一个选择器或者一个对象
      printJS({ printable: 'printable-element', type: 'html', scanStyles: false });
    }
  }
}

在HTML模板中，需要有一个要打印的元素，并绑定一个点击事件来触发打印功能：




<template>
  <div>
    <div id="printable-element">
      <!-- 这里是你想要打印的内容 -->
    </div>
    <button @click="printContent">打印</button>
  </div>
</template>

确保在Vue实例中正确引入了print.js，并且在#printable-element元素中包含了需要打印的内容。点击按钮后，printContent方法会被调用，并触发打印操作。

- 阅读更多 -

nextjs中怎么import svg,并且使用

System

2024-08-15

所有,javascript

在Next.js中，你可以直接通过ES6的import语法来导入SVG文件，并将其作为组件使用。首先，确保你的Next.js项目支持静态导入功能（通常情况下，Next.js版本大于9.4就支持了）。

步骤如下：

将SVG文件放在public目录下，或者任何Next.js能够自动导入的目录下（例如images）。
使用import语法导入SVG文件。
将导入的SVG组件作为组件使用在你的JSX中。

例如，如果你有一个icons/logo.svg文件，并且放在public/icons目录下，你可以这样导入并使用：




import LogoIcon from '../public/icons/logo.svg';
 
function MyComponent() {
  return (
    <div>
      <LogoIcon width="100" height="100" />
    </div>
  );
}
 
export default MyComponent;

在上面的例子中，LogoIcon将作为一个React组件被导入，你可以像使用其他React组件那样使用它，并且可以传入props来设置SVG的属性，如width和height。

请注意，如果你的Next.js版本低于9.4，你可能需要使用next-images之类的插件来确保SVG文件可以被正确导入。

- 阅读更多 -

【JS】JavaScript模块化：深入解析三种文件暴露方式

System

2024-08-15

所有,javascript




// 假设我们有一个名为mathUtils.js的模块文件，它提供数学相关的工具函数
// mathUtils.js
function add(a, b) {
  return a + b;
}
 
function subtract(a, b) {
  return a - b;
}
 
// 使用ES6的export关键字来暴露函数
export { add, subtract };
 
// 另一个JavaScript文件，我们将导入并使用这些函数
// main.js
import { add, subtract } from './mathUtils.js';
 
console.log(add(1, 2)); // 输出: 3
console.log(subtract(3, 2)); // 输出: 1

这个例子展示了如何使用ES6的模块导出和导入特性来组织代码。mathUtils.js文件中定义了两个函数add和subtract，并通过export关键字将它们暴露出去。在main.js中，我们使用import语句来导入这些函数，并调用它们执行相应的数学运算。这是一种简洁且易于理解的模块化代码组织方式。

- 阅读更多 -

【vue2】vue2中的性能优化

System

2024-08-15

所有,javascript

在Vue 2中进行性能优化可以从以下几个方面入手：

减少重渲染：使用v-if/v-show代替v-for中的v-show。
**优化v-for：
- 提供key，确保列表渲染的稳定性和高效性。
- 避免使用非响应式数组的索引作为key。
避免在v-for中使用v-if ：这将导致循环中的每个条目都进行单独的条件渲染。
使用计算属性缓存：复杂的计算属性应该被缓存起来。
避免在watch中做大量的工作：应该使用immediate: true和deep: true选项谨慎。
使用Object.freeze()来避免对象变化：可以阻止Vue追踪依赖。
使用v-once进行单次渲染：适用于内容不会改变的场景。
使用Webpack的terser-webpack-plugin进行代码压缩和树摇（tree-shaking）。
使用服务端渲染SSR：可以预渲染页面，提高首屏加载速度。
使用Vue的生命周期钩子有效管理资源：例如在beforeDestroy和destroyed中清理定时器和订阅。

示例代码：




<template>
  <div>
    <!-- 使用key和v-for时，为每一项提供唯一的key -->
    <div v-for="item in items" :key="item.id">
      {{ item.text }}
    </div>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      items: [{ id: 1, text: 'Item 1' }, { id: 2, text: 'Item 2' }]
    };
  },
  mounted() {
    // 假设这是一个高频率更新的数据
    setInterval(() => {
      this.items.forEach(item => {
        item.text += ' (updated)'; // 这将触发列表的重新渲染
      });
    }, 1000);
  }
};
</script>

在这个例子中，每次setInterval更新items数组中的text属性时，整个列表都会重新渲染，因为我们没有使用Object.freeze()来冻结对象。优化方法是使用Object.freeze()来防止对象变化：




setInterval(() => {
  this.items = this.items.map(item => {
    const newItem = { ...item };
    newItem.text += ' (updated)';
    return Object.freeze(newItem); // 防止对象变化
  });
}, 1000);

通过使用Object.freeze()，Vue可以追踪到数据的不变性，从而避免不必要的DOM更新。

- 阅读更多 -

js监听网页iframe里面元素变化其实就是监听iframe变化

System

2024-08-15

所有,javascript

要监听iframe里面元素的变化，可以使用MutationObserver API。以下是一个示例代码，它会监听iframe内部的DOM变化，并在变化发生时输出信息。




// 确保在iframe加载完成后再进行操作
document.addEventListener('DOMContentLoaded', function() {
  // 获取iframe元素
  var iframe = document.getElementById('my-iframe');
  // 确保同源策略（Same-origin policy）不会阻止我们的访问
  iframe.contentWindow.postMessage('', '*');
 
  // 选择需要观察变动的节点
  var targetNode = iframe.contentDocument || iframe.contentWindow.document;
 
  // 创建一个观察者对象
  var observer = new MutationObserver(function(mutations) {
    mutations.forEach(function(mutation) {
      console.log(mutation);
      // 这里可以添加你想要的响应变化的代码
    });
  });
 
  // 观察者的配置（观察目标节点的子节点的变化）
  var config = { childList: true, subtree: true };
 
  // 传入目标节点和观察选项并开始观察
  observer.observe(targetNode, config);
});

请注意，由于浏览器的安全限制，如果iframe加载的页面不是同源的，你可能需要设置iframe的src为about:blank，然后通过postMessage与其内部页面通信，以确保可以正常监听其变化。

此外，MutationObserver 不能跨文档（即iframe）工作，除非你能够在iframe内部进行操作。如果iframe的内容是由另一个域提供的，你可能需要使用window.postMessage与那个域下的脚本进行通信，然后在那个域下进行MutationObserver的监听。

- 阅读更多 -