_web_Z的博客

electorn读取本地视频资源

我曾经一度很迷茫，在学了 Vue、React 的实战开发和应用以后，好像遇到了一些瓶颈，不知道该怎样继续深入下去。相信这也是很多一两年经验的前端工程师所遇到共同问题，这篇文章，笔者想结合自己的一些成长经历整理出一些路线，帮助各位初中级前端工程师少走一些弯路。这篇文章会提到非常非常多的学习路线和链接，如果你还在初中级的阶段，不必太焦虑，可以把这篇文章作为一个进阶的路线图，在未来的时日里朝着这个方向努力就好。我也并不是说这篇文章是进阶高级工程师的唯一一条路线，如果你在业务上做的精进，亦或是能在沟通上八面玲珑

vue3中store中的数据获取或者设置 写法如下 非常方便

闲来无事，搞了搞Echarts，效果如下，可做毕业设计。使用的网易云提供的疫情数据接口，Koa2搭建的服务器，在线演示地址 https://www.myutils.cn/#/bigscreen可自适应各种移动端，Paid端，PC端。

一般苹果手机不会自带手势返回以及原生手机返回按钮，所以我们的组件返回功能是可以去做一些自定义的事情的。但是安卓手机大部分有原生手机自带的返回按钮以及手势返回，这个时候我们可以通过 onUnload生命周期拦截到，我们需要在当前页面设置一个flag来记录是否使用了组件的返回功能，如果使用了组件的返回功能我们不需要走 onUnload这个钩子。下面是组件返回功能如果是手势返回或者手机自带返回从而达到拦截住手势返回或者手机自带返回的效果～希望微信团队还是抓紧出了拦截手势以及手机自带返回功能的API

<!--miniprogram/custom-tab-bar/index.wxml--><cover-image class="background-bottom {{isIphoneX?'phone':''}}" src="/image/tab/tab_bgc_shadow.png"></cover-image><cover-view wx:if="{{isIphoneX}}" class="tab-bar-backgrond"></cover

shacoPage低代码模版开发文档

解决方案 ： 添加 preview-teleported 属性即可

校园服务类小程序需要哪些功能能火

安装dockeryum -y install docker启动docker服务:sudo systemctl start docker开机自启动dockersudo systemctl enable docker使用docker version 命令查看docker是否安装成功安装gitlabsudo docker run --detach \ --hostname gitlab.myutils.cn \ --publish 8443:443 --...

踩了一天的坑，终于把这该死的自定义custom-tab-bar啃下来了，代码如下<cover-image class="background-bottom {{isIphoneX?'phone':''}}" src="/image/tab/tab_bgc.png"></cover-image><cover-view wx:if="{{isIphoneX}}" class="tab-bar-backgrond"></cover-view> <

1. vue2.x的响应式实现和vue3.x的响应式实现2.diff算法实现原理3.AST抽象语法树实现原理4.webpack实现原理5.常见的loader和plugin以及loader和plugin的区别6.前端性能优化7.前端安全问题8.前端长列表优化9.浏览器缓存10.浏览器从输入url按下回车都经历了什么11.css样式垂直居中12.TCP三握四挥13.new关键字都做了什么14.两个异步任务如何比较快慢15.Promise16.vue3新

前端性能优化方案优化工具：lighthousewebpagetestchrome devtools**FCP 首次内容绘制 1s以内LCP 最大内容绘制 2.5s以内FID 首次输入延迟TTI 完全可交互TBT 总阻塞时间 所有长任务（多于50ms的任务）时间 - 50msCLS 布局抖动**html解析知识点解析html过程中 如果遇到js脚本不管是内联还是外联都会阻塞DOM的渲染 而是下载脚本并且解析脚本处理完后 继续解析Htmldefer 与 DOMContentLoa

/* 用于解决wangeditor的层级过高 .w-e-toolbar 要比 .w-e-text-container 的 z-index大 否则工具栏不会展示了 */.w-e-text-container { z-index: 1 !important;}.w-e-menu { z-index: 2 !important;}.w-e-toolbar{ z-index: 2 !important;}...

console.log( [] == ![] ) // trueconsole.log( {} == !{} ) // false在比较字符串、数值和布尔值的相等性时，问题还比较简单。但在涉及到对象的比较时，问题就变得复杂了。最早的ECMAScript中的相等和不相等操作符会在执行比较之前，先将对象转换成相似的类型。后来，有人提出了这种转换到底是否合理的质疑。最后，ECMAScript的解决方案就是提供两组操作符：相等和不相等——先转换再比较 （==）全等和不全等——仅比较而不转换

pasteTextHandle 利用的是自定义处理粘贴的文本内容// 自定义处理粘贴的文本内容 pasteTextHandle(content) { let n = new Date().getTime() let imageArr = [] // //匹配图片 var imgReg = /<img.*?(?:>|\/>)/gi; // //匹配src属性

一开始 用的是 window.open() 方法弃用的原因想必大家都知道 就是体感很差 浏览器会拦截住后来选择了使用iframe 相比 window,open() 方法 稍强一些this.picData.forEach(item=>{ if(item.isChecked){ const iframe = document.createElement("iframe"); iframe.style.display = "none"; iframe.style.heig

一开始 用的是 window.open() 方法弃用的原因想必大家都知道 就是体感很差 浏览器会拦截住后来选择了使用iframe 相比 window,open() 方法 稍强一些this.picData.forEach(item=>{ if(item.isChecked){ const iframe = document.createElement("iframe"); iframe.style.display = "none"; iframe.style.heig

首先第一步 配置package.json"dev": "nodemon ./src/main.js","prod":"nodemon ./src/main.js"然后根据 process.env.npm_lifecycle_event去区分就好了， 运行npm run dev那么process.env.npm_lifecycle_event的值是dev 运行npm run prod那么process.env.npm_lifecycle_event的值是prod无需下载任何第三方插件！！！

HTTP header 有哪些字段&HTTP 的方法有哪些方法Http中存在多个字段可实现Http功能的扩展，也就是之前所提到的易于扩展特性。数据类型与编码类型字段客户端和服务器常常需要协商返回的数据。客户端发送请求时需告知服务器所需返回的文件类型，服务端需告知浏览器实际返回的数据是什么类型。同样，他们之间也需协商数据的编码类型。常见数据类型（MIME type）text文本类型数据，具体包括纯文本文档（text/plain）、超文本文档（text/html）和样式文档（text/cs

浏览器缓存策略

答：宏任务先执行然后再执行微任务。因为script是一个大的宏任务！首先你需要了解任务分类，在js中任务分为同步任务和异步任务，为什么这么搞？因为js是单线程的，为什么是单线程的？因为js设计之初是为了解决页面交互的，一种脚本没必要那么复杂，其次如果js设计成多线程的，会有很大的问题，多线程要考虑线程之间的资源抢占，死锁，冲突之类的，加入你在操作一个dom节点把它改成了红色，然后另一个线程把它删除掉了，这时你就会完全懵掉。什么是宏任务，什么是微任务？微任务设计的目的简单讲就是为了插队！微任务在宏任务

节流：函数在一段时间内的多次调用，仅第一次有效。节流就像是一个看门大爷，每一段时间它只会放一个人进去时间戳版function throttle(func, delay) { var last = 0; return function () { var now = Date.now(); if (now >= delay + last) { func.apply(this, arguments);

浏览器采用es module imports 关键的变化是index.html 中 main.js的引入方式vite采用http请求的方式 递归请求 vue文件，转换成浏览器认识的javascript文件（注意不再是vue文件）预编译（预打包） 将请求到的文件递归方式预编译，采用相对路径方式加载node_modules中当前插件(比如vue)下的package.json中的module，这个地址代表打包js文件地址，浏览器需要加载这个地址。然后 ctx.body = rewrite..

shaco-page启动vue create-vite-app [projectName]安装所需要的的插件配置eslint 过程艰辛 后来在官网 eslint官网找到了命令 ./node_modules/.bin/eslint --initmodule.exports = { env: { browser: true, es2021: true }, extends: [ 'plugin:vue/essential', 'standard' .

关于 reactive响应式数据赋值问题const list = reactive({})当你接收到接口数据，不要直接赋值 比如 list = data这样会丢失响应式！你可以这样做： const list = reactive({ arr:[]})list.arr = data.arr或者将list声明为ref方式const list = ref([])list.value = data这样也不会丢失响应式原因：reactive声明的响应式对象被list代理 操

文案进入到柱状图中解决办法plotOptions:{ column:{ dataLabels: { crop:false, overflow: 'none' } }}或者

1.创建loding和关闭loding函数2. 请求数据的时候（请求拦截axios.interceptors.request.use）添加token 并且开启Loading状态！confing.headers.Authorization = localStorage.eToken4.接收到数据时（响应拦截axios.interceptors.response.use） 关闭Loading状态 并且根据返回的状态码判断token是否过期，过期删除当前token并且跳转到登录页面。 如果是断网了修改Lo

在任何情况下，DOMContentLoaded 的触发不需要等待图片，音频，视频等其他资源加载完成。其次，说说loadload，网页上所有资源（图片，音频，视频等）被加载后才会触发load事件。页面的load事件会在DOMContentLoaded被触发之后才触发。函数的参数传递中是按值传递！ （如果参数是引用类型，并不会修改其指向！！！注意！！！）常见AscII码值获取AscII码值以及转换成AscII码a.charCodeAt()String.fromCharCode(b..

记录今天开发中遇到的一个问题，接口请求到数据后，为每一条数据添加flag，用来控制编辑时显示input框，使用this.$set()方法的时候 数据已经更新但是 页面未响应解决方案this.$set(arr[index],'flag',true)this.$forceUpdate() //强制渲染...

开发中只适用于调试！ 不要用于线上环境，否则会有大问题！详情查看 传送门

所有跨域的js在提交post请求的时候，如果服务端设置了可跨域访问public static function setCrossDomain(){header(‘Access-Control-Allow-Origin: *’);header(“Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept”);header(‘Access-Control-Allow-Methods: GET, POST..

课程不错很给力全栈开发 努力突破

Excel 导出Excel 的导入导出都是依赖于js-xlsx来实现的。在 js-xlsx的基础上又封装了Export2Excel.js来方便导出数据。使用由于 Export2Excel不仅依赖js-xlsx还依赖file-saver和script-loader。所以你先需要安装如下命令：npm install xlsx file-saver -Snpm install script-loader -S -D 由于js-xlsx体积还是很大的，导出功能也不是一个非常常用的功能，所以使用的时

1.按需加载组件2.按需加载图标bunlde size too large集中管理所有所用到的图标 弊端：手动添加3.按需加载moment，手动引入默认英文，手动引入中文包4.按需加载echarts假如我们只使用了柱状图，只需单独引入柱状图即可...

传送门GO

1.引入AntDesign的Less文件时可能会遇到报错解决方案：1.如果使用的webpack那就在webpack的配置中找到less的配置，在选项中添加 javascriptEnabled: true2.less版本太高3.0.+，后更改为2.7.2，再npm install 就OK了。3.创建vue.config.js ,然后配置 module.exports,2.组件按需引入npm i -D babel-plugin-import 按需引入模块在babel.config.js中