1. 首页
  2. 标签
  3. Javascript
Rollup.js 配合 Babel 插件：现代JavaScript构建的新选择
System
2024-08-15
所有,javascript
// rollup.config.js
import resolve from 'rollup-plugin-node-resolve';
import babel from 'rollup-plugin-babel';
import { terser } from 'rollup-plugin-terser';

export default {
  input: 'src/index.js',
  output: [
    {
      file: 'dist/bundle.cjs.js',
      format: 'cjs',
      plugins: [terser()]
    },
    {
      file: 'dist/bundle.esm.js',
      format: 'esm',
      plugins: [terser()]
    }
  ],
  plugins: [
    resolve(),
    babel({
      exclude: 'node_modules/**', // 排除转换node_modules内的代码
      presets: [
        [
          '@babel/preset-env',
          {
            modules: false, // 指示babel不将ES6模块转换为其他模块系统
            targets: '> 0.25%, not dead' // 指定浏览器兼容性目标
          }
        ]
      ]
    })
  ]
};
JavaScript

这个配置文件定义了如何使用Rollup和Babel来转换和打包项目代码。它设置了源代码的输入文件和输出文件的路径，并指定了Babel预设来转换代码。通过配置文件，开发者可以更轻松地管理项目的构建过程，并且得到更小、更优化的代码输出。

- 阅读更多 -
three.js物理网格材质(玻璃)
System
2024-08-15
所有,javascript
import * as THREE from 'three';

// 创建一个全局的三维场景，用来放置所有的物体
const scene = new THREE.Scene();

// 创建一个相机对象
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

// 创建一个渲染器并将它的DOM元素加到HTML文档中
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 glassMaterial = new THREE.MeshPhysicalMaterial({
  color: 0xffffff, // 玻璃颜色
  clearcoat: 1.0, // 清洁层强度
  clearcoatRoughness: 0.0, // 清洁层粗糙度
  reflectivity: 0.5, // 镜面反射强度
  ior: 1.5, // 表面光学参数，玻璃的值通常是1.5
  transmission: 1.0, // 透明度
  roughness: 0.0, // 粗糙度
  metalness: 0.0, // 金属度
  specularIntensity: 0.5, // 镜光强度
  specularColor: new THREE.Color(1.0, 1.0, 1.0), // 镜光颜色
});

// 使用定义好的玻璃材质创建一个物体
const cube = new THREE.Mesh(geometry, glassMaterial);

// 将立方体添加到场景中
scene.add(cube);

// 设置相机位置并指向场景
camera.position.z = 5;

// 渲染场景
function animate() {
  requestAnimationFrame(animate);
  renderer.render(scene, camera);
}

animate();
JavaScript

这段代码创建了一个简单的三维场景，包含了一个使用玻璃材质定义的立方体。通过调整玻璃材质的属性，可以模拟出不同的玻璃表面效果。

- 阅读更多 -
OpenHarmony开发实战：自定义抽奖转盘（JS）
System
2024-08-15
所有,javascript
// 引入CanvasRenderingContext2D对象
import CanvasRenderingContext2D from 'canvas/lib/canvas-rendering-context-2d';

export default {
    data: {
        // 圆的半径
        radius: 150,
        // 圆心坐标
        centerX: 300,
        centerY: 300,
        // 起始角度
        startAngle: 0,
        // 结束角度
        endAngle: 2 * Math.PI,
        // 是否在绘制过程中
        isDrawing: false,
        // 当前角度
        currentAngle: 0,
        // 是否停止
        stop: false,
        // 是否重置
        reset: false,
        // 是否开始
        start: false,
        // 中奖索引
        winningIndex: -1,
        // 中奖名单
        winningList: [],
        // 公共颜色
        commonColor: '#ffde33',
        // 中奖颜色
        winningColor: '#ff5858',
        // 文本颜色
        textColor: '#000000',
        // 文本大小
        fontSize: 20,
        // 文本内容
        textContent: '开始',
        // 画笔宽度
        lineWidth: 10,
        // 圆环数量
        circleCount: 8,
        // 圆环颜色数组
        circleColors: ['#ffde33', '#ffb236', '#ff993e', '#ff7745', '#ff5858'],
        // 圆环线条宽度数组
        circleLineWidths: [5, 10, 15, 20, 25],
        // 圆环内半径
        innerRadius: 100,
        // 圆环外半径
        outerRadius: 150,
        // 圆环间隔角度
        angleInterval: 2 * Math.PI / 8,
        // 是否显示中奖信息
        showWinningInfo: false,
        // 中奖信息颜色
        winningInfoColor: '#ff5858',
        // 中奖信息字体大小
        winningInfoFontSize: 30,
        // 中奖信息内容
        winningInfoContent: '恭喜中奖！',
        // 中奖信息x坐标
        winningInfoX: 150,
        // 中奖信息y坐标
        winningInfoY: 100,
        // 是否显示重新开始按钮
        showRestart: false,
        // 重新开始按钮颜色
        restartColor: '#ff5858',
        // 重新开始按钮字体大小
        restartFontSize: 20,
        // 重新开始按钮内容
        restartContent: '重新开始',
        // 重新开始按钮x坐标
        restartX: 150,
        // 重新开始按钮y坐标
        restartY: 150,
    },
    // 绘制方法
    draw() {
        // 获取Canvas上下文
        const ctx = this.$refs.canvas.getContext('2d');
        // 清除画布
        ctx.clearRect(0, 0, 600, 600);
        // 如果没有开始或者停止，则继续绘制
        if (!this.start || this.stop) {
            return;
        }
        // 如果没有重置，则
JavaScript
- 阅读更多 -
前端 js 经典：数组常用方法总结
System
2024-08-15
所有,javascript

在JavaScript中，数组是一种常用的数据结构，它提供了许多内置方法来处理数据。以下是一些经典且常用的数组方法：

  1. push() - 在数组末尾添加一个或多个元素，并返回新的长度。
  2. pop() - 删除数组的最后一个元素，并返回那个元素。
  3. shift() - 删除数组的第一个元素，并返回那个元素。
  4. unshift() - 在数组的开始添加一个或多个元素，并返回新的长度。
  5. slice(start, end) - 返回从 start 到 end（不包括 end）之间的元素的新数组。
  6. splice(start, deleteCount, ...items) - 从 start 位置开始，删除 deleteCount 个元素，并可以在该位置添加 items。
  7. concat(array1, array2, ...) - 返回一个新数组，是将原数组与 array1, array2, ... 连接后的结果。
  8. join(separator) - 返回一个字符串，是通过 separator 连接数组每个元素后生成的。
  9. map(function(item, index, array) { ... }) - 返回一个新数组，其每个元素都是通过调用 function 后返回的结果。
  10. filter(function(item, index, array) { ... }) - 返回一个新数组，包含通过 function 测试的所有元素。
  11. reduce(function(accumulator, item, index, array) { ... }, initialValue) - 对数组中的每个元素执行一个由您提供的 reducer 函数，将其结果汇总为单个返回值。
  12. sort() - 对数组的元素进行排序。
  13. reverse() - 颠倒数组中元素的顺序。

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

// 创建一个数组
let numbers = [1, 2, 3, 4, 5];

// 使用push方法添加元素
numbers.push(6);

// 使用pop方法删除元素
let lastNumber = numbers.pop();

// 使用shift方法删除元素
let firstNumber = numbers.shift();

// 使用unshift方法添加元素
numbers.unshift(0);

// 使用slice方法获取子数组
let sliceNumbers = numbers.slice(1, 4);

// 使用splice方法替换元素
numbers.splice(1, 2, 'a', 'b');

// 使用concat连接数组
let concatenatedNumbers = numbers.concat([10, 11, 12]);

// 使用join生成字符串
let joinedNumbers = numbers.join(' - ');

// 使用map进行映射
let doubledNumbers = numbers.map(number => number * 2);

// 使用filter进行过滤
let evenNumbers = numbers.filter(number => number % 2 === 0);

// 使用reduce进行累加
let sum = numbers.reduce((accumulator, currentValue) => accumulator + currentValue, 0);

// 使用sort进行排序
numbers.sort((a, b) => a - b);

// 使用reverse颠倒顺序
numbers.reverse();
JavaScript

这些方法是JavaScript数组操作的基础，每个方法都有其特定的用途和行为，熟悉它们有助于提高代码操作数组的效率和质量。

- 阅读更多 -
js实现本地上传图片后实现预览与删除功能
System
2024-08-15
所有,javascript

在JavaScript中实现本地图片上传后的预览和删除功能，可以通过HTML5的FileReader API来实现。以下是一个简单的实现示例：

HTML部分：

<input type="file" id="image-upload" accept="image/*" />
<img id="image-preview" src="" alt="Image preview..." style="display: none;" />
<button id="delete-image">删除图片</button>
HTML

JavaScript部分：

document.getElementById('image-upload').addEventListener('change', function(e) {
    var file = e.target.files[0];
    var reader = new FileReader();
    reader.onload = function(e) {
        document.getElementById('image-preview').src = e.target.result;
        document.getElementById('image-preview').style.display = 'inline';
    };
    reader.readAsDataURL(file);
});

document.getElementById('delete-image').addEventListener('click', function() {
    document.getElementById('image-upload').value = null;
    document.getElementById('image-preview').src = '';
    document.getElementById('image-preview').style.display = 'none';
});
JavaScript

这段代码实现了以下功能：

  1. 用户通过<input>选择图片文件后，使用FileReader读取文件并将其转换为DataURL。
  2. 将读取到的DataURL设置为<img>的src属性，从而实现图片的预览。
  3. 点击删除按钮后，清空文件输入的值，并隐藏图片预览，实现图片的删除。
- 阅读更多 -
js的执行机制 — 事件循环机制
System
2024-08-15
所有,javascript

JavaScript的执行机制基于事件循环(Event Loop)。事件循环主要有几个阶段：

  1. 宏任务(Macro Task)：一般指执行整体的任务，如script全部代码，setTimeout，setInterval。
  2. 微任务(Micro Task)：执行的任务较小，如Promise。

当JavaScript运行时，会有一个执行栈和一个任务队列。执行栈是JavaScript执行代码时的工作空间，任务队列是存放异步任务的空间。

事件循环的步骤如下：

  1. 检查执行栈是否为空，如果为空，则执行微任务队列中的任务。
  2. 处理完微任务后，再处理宏任务队列中的任务。
  3. 重复步骤1和步骤2，直到所有任务都处理完毕。

例子代码：

console.log('script start');

setTimeout(function() {
  console.log('setTimeout');
}, 0);

Promise.resolve().then(function() {
  console.log('promise');
});

console.log('script end');

// 输出顺序为: script start, script end, promise, setTimeout
JavaScript

在这个例子中，首先执行同步代码，其中包括记录"script start"和"script end"。然后执行setTimeout中的代码，它被放入宏任务队列中。接着是Promise，它的.then函数被放入微任务队列中。当同步代码执行完毕后，JavaScript运行时开始检查微任务队列，记录"promise"，然后处理宏任务队列中的setTimeout任务，记录"setTimeout"。

- 阅读更多 -
排列组合算法（js实现）
System
2024-08-15
所有,javascript

排列组合是数学中的一个基本概念，主要有两种形式：排列和组合。

  1. 排列：排列是指将n个不同的元素，每个元素都有可能出现在每一个位置上。所以，对于n个元素的排列，总共有n!种可能。
  2. 组合：组合是指从n个不同的元素中，选取r个元素进行组合，这里不考虑顺序，所以，对于n个元素的组合，总共有C(n, r) = n! / (r! * (n-r)!)种可能。

以下是使用JavaScript实现排列和组合算法的示例代码：

  1. 排列算法：
function factorial(n) {
    if (n === 0 || n === 1) {
        return 1;
    }
    return n * factorial(n - 1);
}

function permutation(n, k) {
    return factorial(n) / factorial(n - k);
}

console.log(permutation(5, 3)); // 输出: 60
JavaScript

在上述代码中，factorial函数用于计算一个数的阶乘，permutation函数用于计算排列数。

  1. 组合算法：
function factorial(n) {
    if (n === 0 || n === 1) {
        return 1;
    }
    return n * factorial(n - 1);
}

function combination(n, k) {
    return factorial(n) / (factorial(k) * factorial(n - k));
}

console.log(combination(5, 3)); // 输出: 10
JavaScript

在上述代码中，combination函数用于计算组合数。

以上就是使用JavaScript实现排列和组合算法的简单示例。

- 阅读更多 -
vue3中使用md-editor-v3.js实现md文件的预览和编辑
System
2024-08-15
所有,javascript

在Vue 3中使用md-editor-v3实现Markdown文件的预览和编辑，你需要先安装md-editor-v3：

npm install md-editor-v3 --save
Bash

然后在你的Vue组件中引入并使用它：

<template>
  <div>
    <md-editor v-model="markdown" />
    <div v-html="compiledMarkdown"></div>
  </div>
</template>

<script>
import { ref } from 'vue';
import { marked } from 'marked';
import { MdEditor } from 'md-editor-v3';
import 'md-editor-v3/lib/md-editor-v3.css';

export default {
  components: {
    MdEditor
  },
  setup() {
    const markdown = ref('');
    const compiledMarkdown = ref('');

    // 使用marked库将Markdown转换为HTML字符串
    marked.setOptions({
      renderer: new marked.Renderer(),
      gfm: true,
      tables: true,
      breaks: false,
      pedantic: false,
      sanitize: false,
      smartLists: true,
      smartypants: false,
      highlight: function(code) {
        return hljs.highlightAuto(code).value;
      }
    });

    // 监听markdown变化，实时更新HTML预览
    watch(markdown, (newValue) => {
      compiledMarkdown.value = marked(newValue);
    });

    return {
      markdown,
      compiledMarkdown
    };
  }
};
</script>

<style>
/* 你可以添加自定义样式 */
</style>
Vue

在这个例子中，我们创建了一个Vue 3组件，其中包含了md-editor-v3以进行Markdown的编辑，并使用了marked库来将Markdown转换为HTML，以便进行预览。我们还使用了Vue的ref来创建响应式数据，并通过watch来监听编辑器中的变化，实时更新预览的HTML。

- 阅读更多 -
js 本地缓存localStorage和sessionStorage 还有cookie 用法和区别
System
2024-08-15
所有,javascript

localStorage和sessionStorage是HTML5引入的两种客户端存储方式，而cookie是一种老旧的存储方式。

  1. localStorage

    localStorage是一个会在用户浏览器中持久存在的存储对象，除非主动删除，否则数据不会消失。localStorage可以存储大量的数据，并且不会随着HTTP请求发送到服务器。

用法：

// 存储数据
localStorage.setItem('key', 'value');
// 获取数据
let data = localStorage.getItem('key');
// 删除数据
localStorage.removeItem('key');
// 清空所有数据
localStorage.clear();
JavaScript

  1. sessionStorage

    sessionStorage与localStorage类似，也是一个会在用户浏览器中存在的存储对象，但它的存储周期只在当前会话期间，关闭页面或浏览器后数据会消失。

用法：

// 存储数据
sessionStorage.setItem('key', 'value');
// 获取数据
let data = sessionStorage.getItem('key');
// 删除数据
sessionStorage.removeItem('key');
// 清空所有数据
sessionStorage.clear();
JavaScript

  1. Cookie

    Cookie是网站为了标示用户身份而储存在用户本地终端上的数据（通常是小文本文件）。

用法：

// 设置Cookie
document.cookie = "username=John Doe; expires=Thu, 18 Dec 2043 12:00:00 UTC";
// 获取Cookie
function getCookie(cname) {
  let name = cname + "=";
  let decodedCookie = decodeURIComponent(document.cookie);
  let ca = decodedCookie.split(';');
  for(let i = 0; i <ca.length; i++) {
    let c = ca[i];
    while (c.charAt(0) == ' ') {
      c = c.substring(1);
    }
    if (c.indexOf(name) == 0) {
      return c.substring(name.length, c.length);
    }
  }
  return "";
}
// 删除Cookie
document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC";
JavaScript

区别：

  • 存储大小限制：Cookie的大小是有限的，一般来说不能超过4KB，而localStorage和sessionStorage如果是在一些现代浏览器中，可以达到5MB或更大。
  • 有效期：Cookie只在设置的过期时间之前有效，localStorage和sessionStorage如果不手动清除，则会永久有效，localStorage是永久存储，sessionStorage是会话级存储。
  • 作用域：Cookie是在所有同源窗口中都有效，localStorage和sessionStorage只在当前窗口有效。
  • 网络请求：Cookie会被附加在每个HTTP请求中，而localStorage和sessionStorage不会。

根据需求选择合适的存储方式，对于需要持久存储的大量数据，可以使用localStorage；对于临时存储的数据，可以使用sessionStorage；对于需要在请求间共享数据的场景，可以使用Cookies。

- 阅读更多 -
Kriging.js - 地统计插值库
System
2024-08-15
所有,javascript

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

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

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

npm install kriging
Bash

然后，你可以在你的 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);
JavaScript

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

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

- 阅读更多 -
Copyright © 2025 Tech Blog
All Right Reserved | 京ICP备19053165号