Donmind29-CSDN博客

原创 javascript事件循环Event Loop，宏任务与微任务

1、javascript的运行机制介绍 javascript是单线程的语言，默认情况下一个时间点只能做一件事情，因此引入异步模型 javascript是一门解释性脚本语言，即（边解释边运行）2、阻塞式代码和非阻塞式代码阻塞式代码：同步代码代码会严格按照单线程(从上到下，从左到右)执行代码逻辑，以此标准来进行代码的解释和运行const a = 1, b = 2let d1 = new Date().getTime(), d2 = new Date().getTime(.

2022-03-28 18:18:38 2088 1

原创 Vue2.x + element ui 导入导出excel

实现内容：导入excel文件最终将其展现在页面table中将页面table中的表格转换为excel文件仓库地址：完整代码在这里：https://github.com/Nigo-yyy/vue-excel依赖安装：需要安装三个依赖包，和两个JS包npm包：分别安装 file-saver、 xlsx、 script-loader三个依赖npm install -S file-saver xlsx（这里其实安装了2个依赖）npm install -D script-loaderJS文件

2022-03-27 01:56:35 1561 6

原创 vue2.x el-table二次封装支持编辑修改

最近开发新业务，看到有些功能一样的表格，想着封装一个组件，记录一下：大概实现是：封装一个通用的表格接收两个数组，一个控制行数，一个控制列数表格可进行编辑操作官方文档图中我们可以看到：:data="tableData"中传入的tableData用来控制表格行数el-table-column用来控制列数，有几个el-table-column, 表格就有几列因此我们再定义一个数组，去对应tableData中的要显示的项，用来产生需要的列comTable代码如下：//data是从

2022-03-23 01:05:40 2539

原创 mac m1使用picGo + gitee搭建免费图床

简介图床也就是储存图片的服务器，用来存储我们计算机上的图片，写博客时更加方便了不是因为最近github访问很慢，经常打不开，也是就选择国内gitee去托管图片其实单独使用gitee也可以搭建图床，使用picGo能使我们的操作更加方便picGo是一个很方便的工具，可以帮我们把图片push到预设好的仓库中，最终返回图片地址，以供我们使用好了，直接开始准备工作需要两步：gitee上新建一个仓库，存放图片下载picGo，并进行配置机器是m1的mac一、gitee新建仓库并进行设置

2022-03-19 23:11:18 1370 5

原创 vue2.6 element-ui 按需引入样式未生效 Error: Cannot find module ‘babel-preset-es2015解决

element-ui按需引入遇到两个问题元素会显示，但是样式没有生效编译过程中遇到错误Error: Cannot find module ‘babel-preset-es2015‘官方文档：element-ui按需引入一、样式问题：引入组件的同时，要引入样式文件main.js中：import Vue from 'vue'import App from './App.vue'import router from './router'//引入组件及对应的样式文件import {

2022-03-17 13:02:08 2640 1

原创 echarts 格式化legend并设置样式

要实现的效果官方文档：echarts-api要实现两个需求：- legend每一项默认只会显示类目名称，要添加相对应的值进去- 设置类目名称对应值各自的样式legend相关配置如下：legend: { //纵向排列 orient: 'vertical', //与外部容器之间的距离 left: '5%', top:'30%

2022-03-17 00:07:54 7853 1

原创 JS 函数中的this、手写call、 apply、bind

函数中的this指向this可以理解为函数的执行上下文，在普通函数和箭头函数中this的指向是不同的this是个关键字，JS中不允许给this赋值普通函数this指向谁取决于函数最终被谁调用。普通函数中的this只有函数被调用时才能确定指向谁箭头函数箭头函数中的this是静态的，不可被被改变this总是继承自身定义环境所在的this值，即箭头函数没有this, this会作为变量一直向上级词法作用域查找，直到找到为止普通函数(function) this绑定规则：

2022-02-23 16:54:49 222

原创 vue-router实现(hash模式与history模式)

核心代码：Main.js:import Vue from 'vue'import Router from 'vue-router'//Vue.use可以传入对象和函数//传入函数：直接调用这个函数//传入对象：调用该对象的install方法Vue.use(Router)const router = new Router({ //配置路由规则 routes:[ //配置路由 ]})//创建vue实例并传入刚刚创建好的router对象new Vue({

2022-02-22 00:50:58 905

原创 ES6模块化理解

ES6之前，虽然有commonJS和AMD两种模块加载方案，但是JS在语言标准的层面上是没有模块体系的为了解决这一问题，便引入了export import命令来实现模块化ES6模块化与commonJS区别：一、// CommonJS模块let { state, exiets, redafile } = require('fs');// 等同于let _fs = require('fs');let stat = _fs.stat;let exists = _fs.exists;let r

2022-02-21 23:56:43 378

原创 gulp-sass 使用报错Error:gulp-sass no longer has a default Sass compiler； please set one yourself

使用gulp-sass报错，报错信息如下：跟个上面提示，我们发现，需要自己指定一个sass解释器，即安装sass或者node-sass，便执行以下操作npm i sass -d并且在引入gulp-sass时，要这样写const sass = require('gulp-sass')(require('sass'))然后gulp-sass就可以使用了...

2022-02-15 23:03:53 1375

原创 vue 指定元素滚动到页面可视区域

使用场景：1、点击页面tab，或步骤条的某一步，使其对应元素滚动到页面可视区域2、使遍历而来的list滚动到页面可视区域实现：使用el.scrollIntoView() API实现scrollIntoView()方法会滚动元素的父容器，使被调用scrollIntoView()的元素对用户可见。注意：要设置页面(最外层容器)可滚动，否则不会生效语法： element.scrollIntoView(); // 等同于element.scrollIntoView(true) element.s

2022-02-07 11:27:26 4740

原创 element-ui el-steps自定义进度图标及完成图标

项目中需要自定义 el-steps的图标同时完成时图标也要进行修改，记录一下，有写的不好的地方欢迎大佬们指正:实现步骤：首先在templete部分：el-step中添加一个插槽 slot=“icon”，为其添加类名，以便于修改样式<el-steps class="handlerSteps"> <el-step @click.native="scrollToTop('build')" :status="flag.

2022-01-25 19:08:14 12763

原创 Vue自定义指令，自定义指令封装全局防抖函数

Vue自定义指令除了核心功能默认内置的指令 (v-model 和 v-show等)，Vue允许我们注册自定义指令用于元素上当我们需要对普通 DOM 元素进行底层操作时，就可以用到用到自定义指令。如何注册我们可以全局注册自定义指令，也可以局部注册全局注册：全局注册自定义指令是将我们的自定义指令挂载到vue实例上的，在项目中都可以使用全局指令注册方法为：Vue.directive(dName, options) 传入两个参数分别是指令名和配置对象创建完之后，我们就可以使用 v-指令名

2022-01-13 16:45:39 583

原创防抖与节流

防抖与节流什么情况下需要防抖与节流：在一些高频率事件触发的场景下，不希望对应的事件处理函数多次执行比如：滚动事件 input输入框的模糊查询轮播图切换点击操作等浏览器默认情况下都会有自己的监听事件间隔(谷歌浏览器 4 - 6 ms)，如果检测到多次，就会造成不必要的资源浪费防抖：对于高频操作来说，我们只希望识别一次点击，即只触发一次对应的事件，第一次或最后一次都可以节流：对于高频操作，可以自行设定事件触发频率，以使多次触发的事件，在规定时间内，只触发一次防抖实现：<

2022-01-11 00:32:46 167

原创 JS性能优化策略

JS性能优化策略一、减少不必要的全局变量使用为什么要尽量少使用全局变量呢？全局变量定义在全局执行上下文，是所有作用域链的顶端，从下向上根据作用域链查找的时间损耗是比较大的，代码执行效率相对是比较低的。全局执行上下文一直存在于上下文执行栈，直到程序退出才会被释放，不利于GC进行垃圾回收。因此，在能用局部变量解决的地方，就用局部变量验证一下：let i , str = ""function packageDom(){ console.time('使用全局变量') for(

2022-01-09 23:43:09 690

原创 JS内存管理

内容概要：在程序运行中，性能优化是必不可少的。从认识内存空间的使用，到垃圾回收的机制，一步步地写出更高效的代码内存管理垃圾回收与常见GC算法V8引擎的垃圾回收Performance工具代码优化示例内存管理介绍：内存：由可读写单元组成，表示一片可操作空间管理：人为的去操作一片空间的申请、使用和释放内存管理：开发者主动申请空间、使用空间、释放空间流程：申请-使用-释放JS中的内存管理JS中的内存管理是自动进行的，没有相关API去进行实现，以下内容就可以看做是JS中

2022-01-03 17:53:21 124

原创 JS内存管理

内容概要：在程序运行中，性能优化是必不可少的。从认识内存空间的使用，到垃圾回收的机制，一步步地写出更高效的代码内存管理垃圾回收与常见GC算法V8引擎的垃圾回收Performance工具代码优化示例内存管理介绍：内存：由可读写单元组成，表示一片可操作空间管理：人为的去操作一片空间的申请、使用和释放内存管理：开发者主动申请空间、使用空间、释放空间流程：申请-使用-释放JS中的内存管理JS中的内存管理是自动进行的，没有相关API去进行实现，以下内容就可以看做是JS中

2022-01-03 17:48:42 1057

原创 flow使用及基本语法

为何要使用flow因为js弱类型且动态类型的语言弱类型：代码内部允许进行隐式类型转换动态类型语言： 1、在运行阶段，才能明确一个变量的类型，且变量的类型随时可以改变 2、也就是说，在动态类型语言中，变量没有类型，变量中存放的值有类型因为该特点，导致JS代码有一些问题只有在运行时才能暴露出问题，编译时不可预知到问题所在而flow在代码编写阶段就为我们提供了静态类型检测的能力flow语法参考文档：flow语法如何使用flow:flow是一个帮我们进行JS数据类型检测的小工具

2021-12-28 01:28:00 2440

原创 JS let、const、var的区别、块级作用域理解

let constlet用于声明变量，不存在变量提升(不允许先试用后声明)，可以只声明变量之后赋值，可以使用一条let同时声明多个变量let i, j , klet x = 1, y = 2, z = x*y同一个块级作用域内不可重复声明同一个变量声明的变量不会挂载到全局对象上constconst用于声明常量，一旦被声明不可被改变(引用数据类型内存地址改变才视为改变)const声明常量必须赋值同一个块级作用域内不可重复声明同一个常量名块级作用域 let

2021-12-27 17:16:33 672

原创 Vue axios取消发送某个请求

在项目中遇到一个情况，因为参数不同而频繁请求一个接口，因为接口的响应速率不同，从而导致最后一次请求的结果被之前的请求覆盖，显示的内容就会出错想要实现当触发同样的请求时，不轮同时触发多少，只进行最后一次请求解决方案：axios.CancelToken官方文档：http://www.axios-js.com/zh-cn/docs/#%E5%8F%96%E6%B6%88 该api可以用来取消请求官方示例：const CancelToken = axios.CancelToken;let canc

2021-12-16 18:23:24 1050

原创 vue图片查看器，支持放大缩小还原

Vue中使用图片查看器如何使用项目中使用的是 vue + element-ui 要求查看图片时能够实现图片放大缩小翻转等功能，于是找到一个适合的插件，首先看下效果:功能与我们设想的一样，下面看下如何使用GitHub地址：viewerjs官网：https://fengyuanchen.github.io/viewerjs/如何使用1、首先安装v-viewernpm i v-viewer --save如果安装不上使用cnpm安装2、然后main.js中引入 v-viewerimpo

2021-10-29 16:46:04 2512

原创 vue 项目使用momentjs格式化时间

第一步、安装momentjsnpm i moment --save第二步、在需要格式化时间的文件中引入momentjs<script>let moment = require('moment')export default { components:{ pageBar, noData, addNotice, review }, data() {第三步、使用 this.startTimeStr = moment(this.formData.time[0]).format(

2021-08-01 16:25:59 149

原创 el-checkbox-group获取选中的id 禁止选中已有项

<el-checkbox-group v-model="checkModel"> <el-checkbox @change="getCheckModel(item)" v-for="item in checkList" :key="item.id" :disabled="checkModel_.some(item_ => item_ == item.name)" :label="item.name"></el-checkbox&g

2021-07-19 16:55:50 1894

原创 vue下载pdf到本地，后端返回文件流

vue项目，axios去请求接口request文件中代码：import request from "封装好的axios请求文件"//下载用户手册PDF时请求的接口export const getGuide = (param) => { return request({ url:"请求url", method:"get", params:param, //一定要加responseType responseType: "blob

2021-07-07 17:33:47 1082

原创 watch监听基本数据类型，初始化立即执行

当我们监听引用数据类型时，可以这样写，data(){ return { obj:{} }},watch:{ obj:{ handler(newV){ console.log(newV) }, deep:true, immediate:true //加了这个属性就可以在页面初始化时立即执行 }}监听基本数据类型时，如果想要页面初始化立即执行，就要这样写data(){ return { a:1 }},watch:{ obj:{ handler:

2021-06-30 23:20:19 1044

原创 el-form label与表单元素换行

找到el-label,添加如下属性：//怕影响其他el-form，于是给这个dialog加了一个class.applyDialog{ & .el-form-item__label{ text-align:left; //加下面两条就行 float: none; // 取消浮动 word-break: break-word; // 支持单词截断换行 } }效果

2021-06-29 16:08:41 5989

原创 vue使用pdf.js预览pdf文件加水印，下载pdf文件

项目背景：vue-cli3脚手架pdf.js版本为官方最新稳定版2.8.335pdf.js下载地址：http://mozilla.github.io/pdf.js/getting_started/#download根据自身需求去选择对应版本开始使用一、项目中放置pdf.js的包在项目的public文件夹下，新建一个pdfjs文件夹，将下载下来的build和web文件夹丢进去，目录结构如下：vue-cli3下public文件夹中的内容不参与打包，打包生成的index.html直接可以访问到

2021-06-28 17:49:39 3617 11

原创百度地图 JS api使用

首先进入百度地图开放平台，注册成为开发者，并创建应用，得到自己的AK地址：http://lbsyun.baidu.com/apiconsole/key/create#/home然后在页面中引入JS文件：<script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=自己的AK"></script>完整代码：<!DOCTYPE html

2021-05-07 16:28:01 278

原创 Vue 大屏适配方案2 锁定宽高比

创建一个外层包裹容器，，用该容器包裹所有的router-view,根据屏幕的可视区尺寸与设计稿尺寸得到一个宽高缩放比例，根据比例去对外层包裹容器进行缩放，以适应屏幕包裹容器完整代码：<template> <div id="container" ref="wrapper"> <template v-if="show"> <slot></slot> </template>

2021-04-26 15:51:17 1532

原创 vue svg制作loading组件

制作一个loading组件，颜色，大小等内容都可以根据需求去修改组件完整代码：<template> <div class="container"> <svg :width="width" :height="height" viewBox="0, 0, 80, 80" preserveAspectRatio="xMinYmid meet"> <circle cx="40"

2021-04-23 09:47:10 276

原创 VUE项目 openlayers简单使用

在项目中安装依赖npm i ol --save调用相关API选取一个DOM元素，并进行相关的配置，完整代码：<template> <div id="wrapper"> <div id="map"></div> </div></template><script>import Map from "ol/Map";import View from "ol/View";// 添加图层impor

2021-04-16 15:09:46 609

原创前端使用canvas,处理图片压缩上传服务器

前端总是遇到一些上传图片的需求，当用户上传的图片过大时，为减轻服务器压力，就需要对图片进行一定的压缩，然后上传到我们的服务器简单说下实现思路，完整代码在下面，注释比较详细一、将input标签设置为type="file"便可实现选择本地图片的功能，accept属性表示接收图片的类型，我们监听input的change事件，并将用户上传的图片机型处理二、将用户上传的文件信息转换成base64格式的数据三、创建一个canvas对象，对base64数据流进行处理，然后使用canvas.toDataURL将结果

2021-04-15 23:41:57 304

空空如也

空空如也