- 博客(236)
- 收藏
- 关注
RSS订阅原创 当你的项目体积比较大？你如何做性能优化
Keep-Alive头对缩短浏览器和服务器之间的分布式请求的潜伏期是非常重要的，用户通过浏览器请求网页时，浏览器会读取服务器发送的特定的HTML文件，如果请求的页面中包含了外部的CSS和JavaScript文件，浏览器会再次发送独立的请求来获取这些文件，延长页面的加载时间。charset=utf-8">当一个网站一下子收到太多的HTTP请求，它的访客就会有响应时间延迟的体验，这不仅增加了CPU使用率也增加了页面的加载时间。浏览器具有缓存的功能，可以存储指定的文件，减少HTTP请求，从而提高网站的加载速度。
2024-04-12 17:46:19
1093
原创 vue前端页面弹出红色报错遮罩层 Uncaught runtime errors:at handleError (webpack-internal:///./node_modules/webpack
当你页面出现警告信息的时候 会出现警告 然后页面以为是错误 所以红色报错覆盖页面。带着疑问我去查了webpcak中文文档最终发现原因所在。当出现编译错误或警告时，在浏览器中显示全屏覆盖。在vue.config.js中添加如下配置，
2023-12-13 16:04:10
2126
原创 $nextTick和setTimeout区别（宏任务微任务）
依次循环，直到所有的异步任务完成为止。promise的then方法的函数会被推入到 microtasks(微任务) 队列中(Promise本身代码是同步执行的)，而setTimeout函数会被推入到 macrotasks(宏任务) 任务队列中，在每一次事件循环中 macrotasks(宏任务) 只会提取一个执行，而 microtasks(微任务) 会一直提取，直到 microtasks(微任务)队列为空为止。但是异步任务队列又分为: macrotasks(宏任务) 和 microtasks(微任务)。
2023-09-08 10:49:42
1539
原创 vue高频面试题
分离视图（View）和模型（Model），降低代码耦合，提⾼视图或者逻辑的重⽤性: ⽐如视图（View）可以独⽴于Model变化和修改，⼀个ViewModel可以绑定不同的"View"上，当View变化的时候Model不可以不变，当Model变化的时候View也可以不变。然后，AST会经过generate（将AST语法树转化成render funtion字符串的过程）得到render函数，render的返回值是VNode，VNode是Vue的虚拟DOM节点，里面有（标签名、子节点、文本等等）
2023-09-08 10:46:33
1291
原创 js的各种位置，比如clientHeight,scrollHeight,offsetHeight ,以及scrollTop, offsetTop,clientTop的区别？
scrollHeight: 因为子元素比父元素高，父元素不想被子元素撑的一样高就显示出了滚动条，在滚动的过程中本元素有部分被隐藏了，scrollHeight代表包括当前不可见部分的元素的高度。对于inline的元素这个属性一直是0，单位px，只读元素。scrollTop: 代表在有滚动条时，滚动条向下滚动的距离也就是元素顶部被遮住部分的高度。5、srcollTop：滚动后被隐藏的高度，获取对象相对于由offsetParent属性指定的父坐标（css定位的元素或body元素）距离顶端的高度。
2023-09-07 13:58:58
197
原创 实现 js 中所有对象的深拷贝（包装对象，Date 对象，正则对象）
对象是复合值，而且大多数对象无法真正表示为一个原始值， 因此默认的 valueOf()方法简单地返回对象本身，而不是返回一个原始值。通过递归可以简单实现对象的深拷贝，但是这种方法不管是 ES6 还是 ES5 实现，都有同样的缺陷，就是只能实现特定的 object 的深度复制（比如数组和函数），不能实现包装对象 Number，String ， Boolean，以及 Date 对象，RegExp 对象的复制。// 在深拷贝的基础上，对（包装对象Number，String，Boolean；
2023-09-07 13:54:33
310
原创 备战面试每日一题
hash（#）是URL的锚点，代表网页中的一个位置，单是改变hash（#）后面的部分，只会滚动到网页响应的位置，并不会重新刷新页面。首先主线程会去执行所有的同步任务，等所有的同步任务执行完，会查看任务队列里面的异步任务。执行完成之后，会查看任务中是否存在微任务，如果有微任务，那么会依次从微任务的队列中将读取执行完所有的微任务。this是在运行时进行绑定的，并不是在编写的时候绑定，它的上下文取决于函数调用时的各种条件。深拷贝是递归拷贝深层次，属性为对象时，深拷贝是新开栈，两个对象指向的是不同地址。
2023-09-05 13:58:53
582
原创 备战面试每日一题 [1, 2, 3, 4, 5]变成[1, 2, 3, a, b, 5]
【代码】备战面试每日一题 [1, 2, 3, 4, 5]变成[1, 2, 3, a, b, 5]
2023-09-04 09:10:22
40
原创 js中some和every用法
some() 方法用于检测数组中的元素是否满足指定条件，如果有一个元素满足条件，则表达式返回true , 剩余的元素不会再执行检测。如果没有满足条件的元素，则返回false。every跟some不同点在于，every要判断数组中是否每个元素都满足条件，只有都满足条件才返回true；只要有一个不满足就返回false；some一般使用场景大多都是用在：判断一个字段是否存在在某个数组中。some() 不会对空数组进行检测。some() 不会改变原始数组。
2023-05-29 16:13:24
1449
原创 vue解决数组对象新增键值队以后修改数据数据丢失的问题
这里新增了两个键值对象 checkInfo: false showLog: false。当我想修改showLog的属性值时出来了数据发生了改变了但页未发生改变的情况。this.$set（ target, key, value） 有三个参数。target：要更改的数据源(可以是对象或者数组)使用this.$set 进行捕获 页面数据上树。key：要更改的具体数据。value ：重新赋的值。
2023-02-15 19:20:14
433
原创 npm打包整个过程
这里注意点package.json文件夹 main放入放入当前npm run build 打包后的。当包有修改的时候， 2：先修改package.json中的版本号（version），注册需要用户名，密码和邮箱， 当注册完成后需打开邮箱进行验证（邮箱不验证无法上传）打开npm官方网站： www.npmjs.com;然后再执行npm publish；（不修改版本号上传会失败）后续会让填用户名密码和邮箱；上传时不能使用淘宝镜像。
2022-12-02 16:24:56
9960
原创 vue登录持久化获取登录状态密码放入cookie,设置过期时间加密
①若勾选了记住密码；则需要设置cookie，将复选框状态与加密后账号密码（安全起见，做了加密）设置cookie过期时间并存入cookie中，页面加载的时候判断一下是否有cookie值存在，若存在则获取对应的cookie赋值给用户名输入框、密码输入框以及记住密码复选框的状态。②若未勾选，则需要清除cookie中存放的账号密码以及复选框状态的数据，并且将cookie过期时间设为当前时间之前的时间；特别要注意的部分就是cookie过期时间以及获取cookie的时候复选框的状态，这两个容易出错。
2022-12-01 16:50:33
1800
原创 手把手告诉你如何安装多个版本的node，妈妈再也不用担心版本高低引发的一系列后遗症（非常详细，非常实用）
最近好多人都问到node怎么同时安装多个版本?如何配置node的环境变量,如何自如的在多个版本中切换node?还有就是自己在做appium自动化的时候，有时候会因为node的版本过高或者是太低用命令启动appium时候而报错，试了一下是否可以安装一个高版本和低版本的node在一个系统中，你如果需要高版本的切换高版本的node，如果需要低版本的切换低版本的node，这样这个问题就会完美解决了，因为这种种原因,所以宏哥打算写一篇文章来专门讲解如何安装多个版本的node!!!
2022-11-07 14:48:28
8318
2
原创 vite创建的项目，打包后的文件本地预览报错 Access to script at ‘...‘ from origin ‘null‘ has been blocked by COR
全局安装服务支持 http-sever ，安装后若不配置环境变量，需要使用http-server命令，也可以自己去配置环境变量，此处省略配置方法。服务开启成果后，如上图。服务开启时会自动寻找文件夹内的index.html，我们只需要打开图中地址即可正常预览打包后的项目。vite创建的项目，打包后的文件本地预览报错，原因是file文件不支持import，需要开启个服务。进入打包后的文件夹，运行cmd，输入下方命令行，开启一个服务，端口号设置不冲突即可。
2022-11-07 10:39:05
6963
1
原创 工程化vite+vue2打包配置文件配置表
打开,按照官网提示创建新的vite项目(由于原先项目没有用ts，所以创建项目不选ts版本，包管理工具也依然选择是npm)。创建完成后，使用vs code打开，打开命令行，执行npm i安装依赖npm i安装依赖完成后，使用npm run dev启动项目第二步,安装依赖配置依赖生成配置vite.config.js配置文件 注意base的路径！！！！
2022-11-07 10:33:14
949
原创 提升前端开发质量的十点经验沉淀
语言的灵活性，函数传入的参数很可能不符合预期，必要时我们需要进行判断并且进行兜底处理，不可完全信任调用方。当然，如果参数过多也需要思考一下当前函数是否承载了太多的功能，进行一下功能上的拆分。的有效值 ，此时本该处理，但会提前结束，最终引发错误。中的对象是引用，因此赋默认值的时候最好通过函数，每次都返回一个新对象。
2022-09-05 11:15:50
810
原创 vue为什么要使用template
但在使用v-show时要注意,不能使用template,因为v-show是设置显示与隐藏，而template是没有实际东西的dom，所以v-show与template联合使用将失效。lse-if与v-else时候,我们可以使用template,来代替div。在使用v-if与v-e。...
2022-07-21 11:08:30
486
原创 常用pc端 实现左边100px固定，右边自适应
flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（mainsize）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。可以用flex布局实现这个效果，用到的flex方法有flex-basis，flex-shrink，flex-grow。flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。......
2022-07-21 10:56:12
389
原创 vue 导出数据的实现
btnExport() { console.log('导出') /** * * @params * exportEnum 导出种类, */ // let params = { // exportEnum: val // } let con...
2022-04-22 11:39:17
2629
原创 路由持久化权限校验
app.vue <keep-alive> <router-view v-if="$route.meta.keepAlive"></router-view> </keep-alive> <router-view v-if="!$route.meta.keepAlive"></router-view>router.js 设置权限 //民事立案第一步 { pa...
2021-12-22 11:33:37
258
原创 Vue中mixin混入
混入我们先来看看vue官方是怎么介绍的混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。官方文档说的很详细，通俗易懂的话来说一个.vue文件由template，script，style组成，混入的方法可以把mixin这个对象和.vue文件的script里面的内容“混入”（mixin对象的结构和.vue的script里面的结构一样），既此组件既可以调用组件内
2021-12-15 10:11:37
1840
原创 判断当前走打包后的服务还是未打包的服务 以及url参数截取
// 获取截取& ?后的参数值function getQueryVariable(variable){ var query = window.location.search.substring(1); var vars = query.split("&"); for (var i=0;i<vars.length;i++) { var pair = vars[i].split("="); .
2021-11-09 16:34:41
883
原创 vue-video-player 使用插件播放视频
main.jsimport VideoPlayer from 'vue-video-player'import 'vue-video-player/src/custom-theme.css'import 'video.js/dist/video-js.css'Vue.use(VideoPlayer) <div class="demo"> <video-player class="video-player vjs-custom-skin" ref="vi.
2021-11-09 16:28:13
276
原创 自定义loading组件
自定义loading组件 在main.js 引用// Loadingimport './components/loading/index.css';import Loading from './components/loading/index.js'; /* 自定义 loading 组件 调用 this.$loading.show('加载中...'); 使用方法 this.$loading.hide(); 使用方法 作者:zhou*/ l.
2021-11-09 16:19:07
1846
原创 wangeditor图片上传回显
import E from 'wangeditor'import draggable from 'vuedraggable'html <div class="editor" id="editor" > <p class="editorText" id="text" :value="this.url "></p> </div> data editor: '', editorContent: '', 回显的.
2021-11-08 20:07:54
2317
原创 VSCode 中使用ESLint+Prettier来统一前端代码风格
代码规范除了编辑器检查以外，还有一些譬如变量名、样式名的规范，可以参考腾讯的代码规范或者百度的代码规范腾讯代码规范百度代码规范1、先行安装如下四个插件2、VScode编辑器设置settings.json{ //主题和图标配置，根据自己情况配置 "workbench.iconTheme": "simple-icons", "workbench.colorTheme": "Monokai Dimmed", //忽略搜索的文件夹 "search.e...
2021-10-19 11:09:34
353
原创 vuecli3代码压缩混淆使用uglifyjs压缩JS
、安装 “uglifyjs-webpack-plugin”cnpm i --save uglifyjs-webpack-plugin没有安装cnpm的同学可以用npm2、在项目根目录下创建一个名为 vue.config.js的文件3、在vue.config.js中引入uglifyjs-webpack-pluginconst UglifyPlugin = require('uglifyjs-webpack-plugin')4、在vue.config.js中配置uglifyjs-we
2021-10-18 11:08:39
4119
原创 vue实现模糊查询搜索
<bz-input size="small" class="search" v-model="value" placeholder="请输入关键字搜索" > <template v-slot:left-icon> <img class="icon" src="../../assets/img/综合查询/搜索.png" alt="" /> ...
2021-10-13 10:08:34
4536
原创 JS数组扁平化(flat)方法总结详解
需求:多维数组=>一维数组 1 2 let ary = [1, [2, [3, [4, 5]]], 6]; let str = JSON.stringify(ary); 第0种处理:直接的调用 1 arr_flat = arr.flat(Infinity); 第一种处理 1 ary = str.replace(/(\[\]))/g, '').split(',');
2021-10-09 18:03:10
959
原创 vue文件里写自己的function 转时间时期年月时分秒
可以写在export default的下方export default{}function toHHmmss (date) { var time; var hours = parseInt((data % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); var minutes = parseInt((data % (1000 * 60 * 60)) / (1000 * 60)); var seconds = (data % (1000 ...
2021-08-26 10:41:24
136
原创 js将时间戳转为时间日期格式
封装方法 getBeforeDate(num, time) { let n = num; let d = ''; if(time) { d = new Date(time); } else { d = new Date(); } let year = d.getFullYear(); let m.
2021-07-08 10:58:52
1084
原创 如何从数组对象中取出一个值存放在数组中
// 获取勾选内容 handleSelectionChange(val) { //当前选中勾选的数组对象 console.log(val) // 数组对象 // eslint-disable-next-line no-unused-vars let arrCode = []; //定义数组 val .map((item) => { //遍历当前的数组对象 arrCode.push(item.p...
2021-07-08 10:43:00
3905
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人