js函数去重

2022-12-31

unocss

忍把浮名，换了浅斟低唱。——柳永《鹤冲天》分享一个css框架unocss 可以通过class规则，生成对应样式，例如通过m-1生成margin: 0.25rem 而且规则可以通过 https://uno.antfu.me/ 进行查询除了预制规则，还可以自定义规则： 123rules: [ ['m-1', { margin: '0.25rem' }],] 即可生成 1.m-1 { margin: 0.25rem; } 还可以通过正则的方式 1234rules: [ [/^m-(\d+)$/, ([, d]) => ({ margin: `${d / 4}rem` })], [/^p-(\d+)$/, match => ({ padding: `${match[1] / 4}rem` })],] 使用起来 123456<div class="m-100"> &...

2024-05-17

处理js的JSON.parse中Number太长导致精度丢失问题

大自然的真实和单纯，常是重要艺术极点的基础。——恩格斯代码如下： 1"token".split(".").slice(0,2).map(i=>JSON.parse(atob(i))) 这里主要是 JSON.parse 导致的，我简单复现一下 1JSON.parse('{"id":9052710354240385291}') 得到的是 1{id: 9052710354240385000} 可以看到后面的 291 变为 000 了解决方式这里使用正则匹配 /:\s*([-+]?\d+(\.\d+)?([eE][-+]?\d+)?)/g 例如： 123456JSON.parse('{"id":9052710354240385291}'.replace(/:\s*([-+]?\d+(\.\d+)?([eE][-+]?\d+)?)/g, (match, p1) => { ...

2020-11-26

vue路由NavigationDuplicated错误

有志者，事竟成，破釜沉舟，百二秦关终属楚；苦心人，天不负，卧薪尝胆，三千越甲可吞吴。——蒲松龄如果遇到了Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location异常可以在router里配置一下 1234567891011121314151617181920import Vue from 'vue'import Router from 'vue-router'// 解决路由重复问题const originalPush = Router.prototype.pushRouter.prototype.push = function push(location) { return originalPush.call(this, location).catch(err => err)}Vue.use(Router)export default new Router({...

2024-07-24

js日期库moment

健全的身体比金子还珍贵，强壮的体魄比享用不尽的财富还有价值。——佚名 https://github.com/moment/moment 用于解析、验证、操作和格式化日期的 JavaScript 日期库。文档： Moment.js | Docs 使用非常简单 1npm install moment 12var moment = require('moment'); // requiremoment().format(); 或者 12import moment from 'moment';moment().format(); 解析时间 1var day = moment("1995-12-25"); 格式化时间： 1moment("12-25-1995", "MM-DD-YYYY");

2021-06-27

before和after选择器

在科学上没有平坦的大道，只有不畏劳苦，沿着陡峭山路攀登的人，才有希望达到光辉的顶点——马克思我们可以使用::before和::after去选择我们节点内部的首项或尾项例如我这里代码如下 123456789101112131415161718192021222324252627282930313233343536<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> .ruben-parent { width: 100%; border: 0.1em solid #ababab; text-align: center; } .ruben-parent::before, .ruben-parent::after { margin: 0 auto; content: ''; ...

2024-07-09

css透视效果位置perspective-origin

真理是时间的孩子，不是权威的孩子。——伽利略正如我们在前一篇文章中提到的，CSS具备处理3D变换的能力。继续这一话题，本文将重点介绍perspective-origin属性，这个属性允许我们调整透视效果的原点，影响3D变换的视觉输出。详细信息可以参考这个链接：MDN文档让我们通过一个例子来看看perspective-origin的实际效果： .cube { width: 100px; height: 100px; position: relative; transform-style: preserve-3d; transform: rotateX(45deg) rotateY(45deg); } .face { position: absolute; width: 100%; height: 100%; background: rgba(255, 165, 0, 0.8); display: flex; align-items: center; justify-cont...