Dark_programmer的博客

vue3 - - - - - post请求实现文件下载

网站添加中英文切换对页面的影响

如何给自己的网站添加中英文切换

js获取new Date()时区时差问题

js - - - - - 如何批量下载文件

可选链操作符 && lodash

js

函数防抖节流

js的那些你不知道的技巧1. 三元表达式 与 if...else...2. 解构赋值并重命名3. 合并对象、数组4. 空值合并操作符( ?? ) 与 逻辑或运算符( || )5. 可选链操作符( ?. )6. 使用BigInt支持大整数计算问题7. 使用Array.prototype.at()简化arr.length8. 多变量赋值操作9. 交换变量的值10. 多条件判断11. 指数运算12. 双非位运算符（~~）13. 找到数组中的最大/最小值1. 三元表达式 与 if…else…// if el

1. 问题描述在业务需求中，有关于时间的需求也是很常见的。比如展示当下时间、计算指定日期后的时间等等。在开发时就遇到这么一个需求：根据后端返回的时间获取其中月份假设后端返回的时间为2022-04-1 10:10:10，然后根据这个数据获取月份:new Date('2022-04-1 10:10:10').getMonth()+1; // 4在chrome、安卓均没问题，但是在Safari、IOS遇到了问题，结果为NAN2. 产生原因因为js的new Date()对于Safari、IOS有

axios配置cookie1. 简单实用2. 问题描述3. 解决办法1. 简单实用关于axios肯定都很熟悉。axios请求默认是不携带 Cookie的，如果需要携带 Cookie 前端需要配置// 允许携带cookie请求axios.defaults.withCredentials = true再完整点的配置：// 创建axios实例const service = axios.create({ baseURL: process.env.BASE_API, // api的base_url

JS光标1. 获取光标位置2. 光标处添加文本且重新设置光标位置只要是前端开发人员，遇到实现输入框是早晚的事情。而关于光标的处理，又是其重中之重的点。<textarea v-model="textareaValue" id="textarea" name="content" rows="3" placeholder="请输入内容。。。">1. 获取光标位置以上述标签为例，如何获取该标签的光标位置呢？function getCursorPosition(){ let element

私密数据通过接口传输时，一般都需要进行加密。而加密方式又有很多，诸如md5,sha1,sha256…在使用sha256的时候遇到一个报错信息：经过一番研究，发现sha256加密的内容必须是一个字符串，否则就报错如上。使用方式如下:import { sha256 } from '@/utils/sha256.min.js';// 我的sha256是在cdn上下载的一个js压缩文件let psd1 = 1234566;let psd1 = '1234566';console.log(sha2

js逻辑操作符1. 逻辑或 （ || ）1.1 示例1: 用于兼容错误状态1.2 示例2: 用于添件判断2. 空值合并运算符 ( ?? )3.总结1. 逻辑或 （ || ）这个运算符很是常用，用于兼容一些意想不到的错误问题示例如下：1.1 示例1: 用于兼容错误状态let obj = { a: 1, b: 0, c: '', d: null, e: undefined}console.log( obj.a || 'default value');

先上效果图：实现代码：<script>export default { name: "index", data() { return { txt: ["给个关注", "有求必应", "交个朋友", "多多留言", "点个赞吧"] }; }, beforeMount() { let _this = this; this.$nextTick(() => { let ele = document.getElement

cssTextjs操作dom元素是很常见的操作。有这么一个场景，对新创建的dom元素通过js设置多组css属性。基操：let element = document.createElement("div");document.body.appendChild(heart).innerHTML = '我是新建元素的文案';element.style.height = '100px'; // 设置元素高度element.style['text-align'] = '100px'; // 设置元素行

MOCK数据1. 为什么要mock数据？2.如何mock数据？3.项目实战之前都是本地安装mockjs来进行数据的模拟，但是如今发现一个在线接口 MOCK 平台，于是准备记录一下1. 为什么要mock数据？项目定下来之后，前端可能和后端是同时进行开发操作。那么这时接口不存在，前端无从获取数据，开发就会遇到一些问题。那么，该如何搞嘞？这种前后端同时开发是一种很常见的状态，工期紧张更要同步进行，不可能等着接口出来在进行前端开发。这时前端需要和后端同学事先约定一些内容：1.接口数量以及接口名称

如何使用fastmock：mock数据如何更加方便？快使用 fastmock之前默认接口设置如下：{ "ec": 0, "em": "success", "data": { "username": "@cname", "email": "@email", "age|10-30": 20, "gender|0-1": 1, "level|1-6": 2 }}并没有进行校验参数的地方。关于接口，肯定是需要根据参数来进行返回。那么，该如何通过参数进

安装依赖npm install @liradb2000/markdown-it-mermaidmarkdown全局引入 在main.js中import mavonEditor from ‘mavon-editor’ // 引入markdownimport markdownItMermaid from “@liradb2000/markdown-it-mermaid”; // 引入mermaidmavonEditor.markdownIt.use(markdownItMermaid);.

javaScript越更新，越贴近、方便开发者。大家肯定写过类似的语法：let length = (res && res.data && res.data.length) || 0这种代码，看起来不是很美观，而且啰哩啰嗦的。那么有没有更简洁、方便的方式呢？当然！！那就是 可选链操作符?.将上述代码使用 可选链操作符?. 改写如下：let length = res?.data?.length || 0有没有感觉用起来很舒服呢？但是越新颖的语法，对于浏览器

call、apply、bind的区别与用法1.call、apply、bind 的简单使用总结1：2.call、apply、bind 来改变this指向总结2：3.call、apply、bind 传参总结3：说到call、apply、bind，其最主要的作用，是改变 this 的指向！！！1.call、apply、bind 的简单使用这三者都是函数的一个方法，那么使用的方式就出来了 .call() 、 .apply() 、.bind()示例：// 定一个普通函数function func() {

行百里者半九十table拖拽一、安装插件并引入二、插件使用关于拖拽效果，之前手动写过拖拽交换的逻辑，但因为这次拖拽的是element的table行，所以想找下有没有好用的插件。经过一番查找，找到一个很nice的插件SortableJS，功能强大的JavaScript 拖拽库使用介绍：安装插件并引入获取拖拽元素的父元素创建并配置相关参数回调函数使用注意：element table务必指定row-key，row-key必须是唯一的，如ID，不然会出现排序不对的情况，但是不可用ind.

只有需要，才会研究之前对于sort排序的了解，不能说是一窍不通，但也差不多是一知半解。现有需求需要进行排序操作，索性细细研究并加以记录，以便后续翻阅查找。之前遇到的排序需求很简单，对一个数值型数组进行排序，So easy～。sort语法格式为：Array.prototype.sort( compareFunction )compareFunction( first, second )其比较函数包含有两个将要被比较的元素:first: 第一个用于比较的元素second: 第二个用于.

数组去重的多种姿势1. new Set()2. filter + indexOf3. reduce + includes4. map + includes5. lastIndexOf + splice6.双重for循环万物之始，大道至简，衍化至繁。 -------------------老子《道德经》复制代码，进行测试let repeatList = [];// 生成[0, 100000]之间的随机数for (let i = 0; i < 10; i++) { r

event.target和 event.currentTarget既然写法不一样，那么肯定用途也是有着区别。一个简单的栗子：<div class="a_div" @click="clickHandle"> a标签 <div class="b_div">b标签</div></div>.a_div { width: 300px; height: 300px; background-color: chocolate; .b_di

img动态路径网络资源路径 & 本地静态资源路径有的时候业务需求，是动态切换图片。而图片资源，有的时候是来自CDN托管资源的，有的时候是本地public存储的。整理了一下代码，接下来稍微分别展示一下网络资源路径 & 本地静态资源路径html布局<!-- 网络资源图片路径 --><p> src 动态 网络路径 <el-button @click="changeSrc('online')">切换</el-button><

深浅拷贝浅拷贝深拷贝所谓深浅拷贝，其实都是进行复制，主要区别在于复制出来的新对象和原来的对象是否会相互影响B复制A，修改A | B 互不影响，为深拷贝B复制A，修改A | B 互相影响，为浅拷贝浅拷贝举个栗子：let oldObj = [1,2,3,4,5,6]let newObj = oldObjnewObj[2] = 9 // newObj [1, 2, 9, 4, 5, 6] // oldObj [1, 2, 9, 4, 5, 6]再举个栗子：let oldO

数据结构对类型多种多样。数组、对象。。。对于数组，可简单的进行循环遍历的操作，从而获取到每一个元素。但是对象格式的数据，并不能直接使用遍历数组的方式，那么对象该如何遍历呢？1. Object.keys() 和 Object.values()方法会返回一个由一个给定对象的自身可枚举属性组成的数组，数组中属性名的排列顺序和正常循环遍历该对象时返回的顺序一致。如：let obj = { a: 1, b: 2, c: 3}let keysArr = Object.keys(obj) // ["a

话不多说，直接上代码copyToClip(content,tips) { console.log("复制的内容", content,'复制成功后的提示文本',tips); var aux = document.createElement("input"); //创建一个input标签 aux.setAttribute("value", content); // 设置改input的value值 document.body.appendChild(aux); /

先来定义一组数据，深度为6层let arr = [1,2,9,[3,1,4,[5,3,6,[7,8,[9,[10]]]]]]关于 数组扁平化并去除其中重复数据，且得到一个升序且不重复的数组，可先将思路理清晰，步骤肯分解如下：扁平化。将多层次数组的数据整合到一个数组内去重。得到不重复的数据排序。按照既定规则排序既然步骤划分好，就可一步步实现了。1.数组扁平化知识点：flat()flat()方法会按照一个可指定的深度递归遍历数组，并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。

关于滚动，肯定要内部容器宽 or 高 大于外部容器才会发生滚动。那么如何在组件加载之后，就自动将想看到的指定内容滚动到可视区域呢？（如过指定内容初始被隐藏）知识点：【scrollIntoView】scrollIntoView()是有一些参数的，详情可参考⬆️scrollIntoView() 方法会滚动元素的父容器，使被调用scrollIntoView()的元素对用户可见。语法：element.scrollIntoView(); // 等同于element.scrollIntoView(tru

在进行业务功能实现时，有时需要根据鼠标当前位置进行一定的操作。那么该如何获取到鼠标当前的位置呢？经过一番尝试与查询，找到一个比较便捷的方法，在此进行记录：let sh = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0, left = event.clientX - 40 <

前端使用技术为VUE踩坑记录最近在项目里，因为需要监听滚动事件，就直接写监听代码如下：尝试一、html:<div id="scroll-div" @scroll="scrollHandle">监听我的滚动<div>js:scrollHandle() { console.log("scrolll"); },但是事件并没有执行。于是想通过addEventListener原生的方式进行监听。将代码写入mounted尝试二、html:moun

评论 ，是一个系统很常见的功能，回复回复再回复。过程过于死板，那能否选中某句话？对某句话进行评论？处于对该功能的需求，花费了一定的时间进行研究、查询、尝试。终于，摸索出一个简单的办法，特此记录。先放出效果：1.鼠标滑动选中某关键字2.弹窗进行评论那么，是怎么实现的呢？思路如下：1.监听mouseup事件2.获取选中的内容3.打开弹窗4.进行评论发表关键属性：Window.getSelection返回一个 Selection 对象，表示用户选择的文本范围或光标的当前位置。【M

关于输入，input和textarea可以满足我们90%以上的需求，但人有些需求无法满足。此时，我们就可以使用div等一些标签来实现属性：contenteditable是一个枚举属性，表示元素是否可被用户编辑。 如果可以，浏览器会修改元素的部件以允许编辑。当标签加上这个属性时，就可进行内容编辑，来实现输入的效果。并且实现placeholder效果<div contenteditable placeholder='请输入文字'></div>.input{

js算法一、关于排序1.1冒泡排序1.2 快速排序二、反向输出2.1 数组反向输出2.2 字符串反向输出三、数学方法3.1 阶乘的实现3.2 斐波那契数列一、关于排序1.1冒泡排序冒泡排序算法就是依次比较大小，小的和大的进行位置交换function bubbleFunc(arr){ for(let i = 0 ;i < arr.length; i++){ // 外层循环从下标为 0 开始 ， 内层循环从下标为 1 开始 for(let j = i+1; j

用到的知识点为arr.splice(arr,num,data)数组的splice()方法，不了解的可通过传送门去学习【splice 传送门】let arr = [ {id:1,name:'张三'} , {id:2, name:'李四' }, {id:3,name:'王五'} , {id:4,name:'赵六'} ]arr[1] = arr.splice(2,1,arr[1])console,log(arr)效果如图：...

一、数组的方法join()、push()、pop()、shift() 、 unshift()、sort()、reverse()、concat()、slice()、splice()、indexOf()、 lastIndexOf()、forEach() 、map() 、filter() 、every() 、some()...

函数防抖与节流是很相似的概念，但它们的应用场景不太一样。我们先从概念上深刻理解它们。概念函数防抖（debounce）函数防抖，就是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。简单的说，当一个动作连续触发，则只执行最后一次。如果有人进电梯（触发事件），那电梯将在10秒钟后出发（执行事件监听器），这时如果又有人进电梯了（在10秒内再...

Event Loop在JavaScript中，任务被分为两种，一种宏任务（MacroTask)也叫Task，一种叫微任务（MicroTask)。