- 博客(81)
- 问答 (1)
- 收藏
- 关注
RSS订阅原创 详解Promise
1. 抽象表达:1) Promise 是一门新的技术(ES6规范)2) Promise 是JS 中进行异步编程的新解决方案备注：旧方案是单纯使用回调函数2. 具体表达:1) 从语法上来说: Promise是一个构造函数2) 从功能上来说: promise 对象用来封装一个异步操作并可以获取其成功/ 失败的结果值。
2024-04-27 07:44:20
898
原创 JavaScript 如何判断当前浏览器是不是IE浏览器
ActiveXObject 是 Internet Explorer (IE) 浏览器中的一个内置对象，用于创建和操作各种 ActiveX 控件和 COM 对象。它提供了与客户端操作系统和其他应用程序交互的能力。ActiveXObject 只在 IE 浏览器中可用，并且在现代浏览器中往往不被支持。如果只是需要区分当前浏览器是不是IE浏览器，那只需要借助 ActiveXObject 来实现就行了，如果需要判断主流的浏览器版本，则需要使用window.navigator.userAgent来实现。
2024-04-26 09:24:31
103
原创 详解js中的console对象
对于前端开发而言，console对象大家肯定都很熟悉，最常用的 console.log() 是开发调试必用的但是对于console对象的其他方法，相对而言使用的就比较少了。下面详细介绍一下：谷歌浏览器输出console对象：值得一提的是不同浏览器输出console对象的内容有些许差异，像火狐浏览器中就没有context()和creatTask() 方法，我们这里只介绍通用的。
2024-04-25 19:46:51
835
原创 IE浏览器，文件下载失败，onDownloadProgress方法里报错：无法获取未定义或null引用的属性“getResponseheader“
因为当开启了gzip之后，这两个值是有问题的。在ie10浏览器下，控制台打印 progressEvent 对象，发现 progressEvent.srcElement 为null，其他版本的浏览器 progressEvent.srcElement 是有值的，并且可以通过 getResponseHeader() 获取到响应头里的值。谷歌、火狐、edge都没有问题，ie11浏览器也没有问题，ie10及以下会报错，无法获取未定义或null引用的属性"getResponseheader。
2024-04-25 19:46:28
329
原创 Jenkins 打包报错记录 error: index-pack died of signal 15
问题背景，打包每次到92%时就会报错，试了好几次都是同样的错误。把时间改长后，打包成功。
2024-04-23 09:40:41
516
2
原创 Vue项目报错：[Vue warn]: Invalid prop: custom validator check failed for prop “percentage“.
percentage 的值非法导致，percentage 只能为 0-100的数字，超过或者小于这个范围都会报错，通常percentage的值是由计算生成，我这里因为取值的undefined导致计算后的percentage值为NAN，所以报错。首先确保计算时，分子和分母的取值无误，不能为undefined或null等其他的，其次添加判断，当percentage值大于或小于0-100的范围时，重置为0-100合理范围的值。在vue项目中使用 Elementui 的进度条组件 el-progress 时报错。
2024-04-23 09:40:23
206
原创 记录CodeMirror一些常用的配置选项
mode：设置编辑器的语言模式，例如JavaScript、HTML、CSS、Markdown等。 theme：设置编辑器的主题，例如ambiance、eclipse、monokai等。 lineNumbers：设置是否显示行号。 readOnly：设置是否只读。 gutters：设置编辑器的侧边栏，例如显示行号、代码折叠等。 matchBrackets：设置是否高亮匹配的括号。 autoCloseBrackets：设置是否自动闭合括号。 extraKeys：设置自定义快捷键。 lint：设置
2024-04-07 20:29:31
455
原创 详解事件循环
程序运行需要有它自己专属的内存空间，可以把这块内存空间简单的理解为进程每个应用至少有一个进程，进程之间相互独立，即使要通信，也需要双方同意。
2024-04-07 20:28:46
1217
原创 IE浏览器兼容性问题——el-button点击失效
之前的实现是直接讲点击事件绑定到了 icon 图标上，这样在谷歌、edge、火狐等是没问题的，但是在ie浏览器下，就会出现点击事件无效的情况，点击后不会触发点击事件。el-table 中经常有这种场景：最后一列是操作，只有一个图标。解决方案：将点击事件绑定到 el-button 上就行了。如果帮助到您了，可以留下一个赞👍告诉我。
2024-04-03 11:26:02
598
原创 windows 11 如何使用 IE 浏览器
众所周知：IE 浏览器已经被微软废弃，像windows 11这种系统内置已经找不到 IE 浏览器了，这对前端工程师而言，肯定是不行的。因为项目中，经常有现场需要支持 ie 浏览器。（吐槽一下：微软都放弃了，国内的客户大佬们还没放弃，真爱啊）桌面 --> 右键新建文本文档 --> 输入以下内容 --> 保存后修改文件后缀名为 .vbs --> 双击即可打开IE浏览器。如果帮助到您了，可以留下一个赞👍告诉我。脚本来打开 IE 浏览器。
2024-04-03 11:25:25
359
原创 IE浏览器兼容性问题——get请求来自缓存的处理方案
问题背景：在IE浏览器下，新增add接口请求成功之后，调用了get查询接口，但是查询接口返回的数据没有刚刚新增add的数据。处理后，再看控制台，get请求的接口已经加上了时间戳，问题解决。1、改成post请求，这种需要后台接口同步修改。统一修改，项目里使用的axios，在请求拦截器里添加。控制查看，发现当前查询的接口有（来自缓存）几个字。2、给get请求后面加上时间戳。
2024-04-02 10:54:01
297
原创 js 模块化
将一个复杂的程序依据一定的规则(规范)封装成几个块(文件), 并进行组合在一起块的内部数据/实现是私有的, 只是向外部暴露一些接口(方法)与外部其它模块通信module1.js//内部变量数据//内部函数//向外暴露})module2.js})module3.js})
2024-04-01 10:12:33
943
原创 如何处理Jenkins打包npm install没有拉取到最新依赖的问题
主要是添加判断，如果Jenkins前端项目的工作空间中存在 node_modules 文件夹，则把node_modules 文件夹及其子文件夹都删除。我们项目中有私有依赖包 frame，是私有服务器上通过 npm 去管理。frame包 publish 之后，通过Jenkins打包时，npm install 一直没有拉取最新的代码。思考：通过在本地直接替换 node_modules 里的 frame 包，npm run build 再部署是没有问题的。那么可能就是Jenkins打包的时候，有缓存导致的。
2024-04-01 10:11:47
767
原创 el-form 的表单校验，如何验证某一项或者多项；validateField 的使用
validateField 这个方法接受两个参数，第一参数为数组或者字符串，第二个参数为回调函数。业务场景：下图点探测按钮时，只需要校验前四项，后面的表单项不需要校验。如果需要对表单里的特定一项或几项进行校验，应该如何实现？注意事项：校验多项时，第一个参数传数组，回调函数会触发多次。如果要校验某一项，第一个参数传字符串就可以了。
2024-03-18 23:04:35
1036
原创 el-table 的选择框如何根据条件设置某项不可选中
核心代码： <el-table-column type="selection" width="55" :selectable="selectable"></el-table-column> 在选择框的列上加上。，selectable是一个函数，返回值为false的时候，表格列禁止选中。效果如图：实现某条数据不可选，其他数据可选。
2024-03-13 10:40:52
787
原创 ElementUI Message 消息提示，多个显示被覆盖的问题
代码：主要是在this.$message 方法外层加上 setTimeout 方法。
2024-03-13 10:40:15
748
原创 如何在vue中使用golden-layout
在上面的代码中，我们使用了vue-golden-layout组件，并传入了两个props：config和components。config用于设置golden-layout的配置项，components用于注册golden-layout中的组件。在这个例子中，我们注册了一个名为myComponent的组件，并在golden-layout中使用了这个组件。在Vue中使用golden-layout，需要先安装golden-layout和vue-golden-layout这两个库。
2024-02-04 15:01:42
452
原创 浏览器控制台报错：Uncaught DOMException: Failed to read the ‘localStorage‘ property from ‘Window‘：Access is d
不同浏览器的设置选项不同：主要的思路就是将浏览器的Cookie设置成允许第三方Cookie。浏览器默认是选择第二项：在无痕模式下阻止第三方Cookie，所以才会出现问题。
2024-02-04 14:59:23
1093
原创 Node.js 包管理工具
包』英文单词是package，代表了一组特定功能的源码集合cnpm 是一个淘宝构建的npmjs.com的完整镜像，也称为『淘宝镜像』，网址cnpm 服务部署在国内阿里云服务器上， 可以提高包的下载速度官方也提供了一个全局工具包cnpm，操作命令与 npm 大体相同yarn 是由 Facebook 在 2016 年推出的新的 Javascript 包管理工具，官方网址：https://yarnpkg.com/
2024-02-04 14:59:02
1241
原创 npm install一直报错 failed, reason: certificate has expired
刚开始我以为是taobao镜像源的问题，所以我把npm的地址切换成了 https://resgistry.npmjs.org/ ，发现还是不行。执行上面命令之后，npm install 成功。
2024-02-03 20:27:51
603
原创 JavaScript 如何判断输入框的内容是正则表达式，不是正则表达式的话弹出提示
在 vue 中实现，ul 框架是elementui，this.content 是文本框的输入。
2024-02-03 20:27:30
319
原创 git 如何修改仓库地址
问题背景：组内更换大部门之后，代码仓的地址也迁移了，所以原来的git仓库地址失效了。虽然重新建一个新的文件夹，再把每个项目都git clone一遍也可以。但是有点繁琐，而且有的项目本地还有已经开发一半的代码，这样就不方便了。
2024-02-02 09:43:51
1231
原创 npm安装报错，出现.staging
问题场景：同事发了一个本地的安装包，拿到了没仔细看，直接npm install，没有发现根目录下的package-lock.json。然后就发现安装一直不成功，还会卡主。并且在node_modules文件夹下还会出现.staging文件夹，正常情况是不会出现这个的。删除 package-lock.json 文件，重新npm install即可。根目录下有package-lock.json。
2024-02-02 09:43:38
481
原创 前端性能优化：Vue项目打包后app.xxx.js 和 chunk-vendors.xxx.js 文件太大，导致页面加载时间太长
5、修改nginx配置之后，需要重启nginx生效，然后去页面清空浏览器环缓存后查看，app.js 和chunk-vendors.js 两个文件变成了 884kB 和642 kB，大小和加载时间都有明显的下降。3、 修改后，先本地 npm run build 打包，打包成功后，看下包里的js文件中是否包含 .gz 结尾的文件，如果包含就可以把包部署到相关环境上。问题场景，如下图，环境上的 app.js 和chunk-vendors.js 两个文件大小，高达3.4M 和 2M ，加载所耗费的时间也很长。
2024-02-01 16:45:30
1618
原创 pointer-events: none；解决页面水印导致子节点鼠标事件失效的问题
解决方案：给添加水印样式的元素，添加css样式：pointer-events: none;子元素添加css样式：pointer-events: auto;背景：实现水印功能之后，由于水印是一个遮罩层，导致z-index元素比较低的子元素，鼠标移入事件、点击事件都失效了。
2024-02-01 14:08:03
404
原创 深入浅出JavaScript中的Object.assign()方法
Object.assign()方法用于将一个或多个源对象的可枚举属性复制到目标对象中，并返回目标对象。它基于浅复制原则，只复制对象自身的属性，不复制继承自原型链上的属性。如果目标对象已经存在相同属性，则源对象的属性将覆盖目标对象的属性。
2024-02-01 14:06:39
591
原创 Node.js 模块化
将一个复杂的程序文件依据一定规则（规范）拆分成多个文件的过程称之为模块化其中拆分出的每个文件就是一个模块，模块的内部数据是私有的，不过模块可以暴露内部数据以便其他 模块使用编码时是按照模块一个一个编码的， 整个项目就是一个模块化的项目。
2024-01-30 20:08:24
1174
原创 HTTP 协议
mime 类型结构： [type]/[subType] 例如： text/html text/css image/jpeg image/png application/json。还有一些状态码，参考：https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Status。响应体内容的类型是非常灵活的，常见的类型有 HTML、CSS、JS、图片、JSON。，例如图片，视频，CSS 文件，JS文件，HTML文件，字体文 件等。
2024-01-26 09:42:23
1387
原创 el-select选择之后值不显示在文本框的问题解决
在el-collapse-item中使用子组件，子组件里是el-form-item代码。el-select在for循环中，可以有多个。查了一下博客，有的说这种场景需要给el-select添加@change事件，加上 this.$forceUpdate() 强制刷新即可。也有说使用this.$set去设置，但都不适用我的场景，试了没效果。处理：在子组件的根节点上，加上了一个class属性之后，问题修复。
2024-01-24 15:04:15
616
原创 nodejs -- fs 模块
fs全称为，称之为文件系统，是Node.js中的内置模块，可以对计算机中的磁盘进行操作。本章节会介绍如下几个操作：1. 文件写入2. 文件读取3. 文件移动与重命名4. 文件删除5. 文件夹操作6. 查看资源状态文件写入就是将数据保存到文件中，我们可以使用如下几个方法来实现该效果。
2024-01-24 15:03:35
529
原创 Error in render: “TypeError: Cannot read properties of null (reading ‘protocol‘)“
当然更多的时候，前端的数据是通过接口获取的，为了防止后台接口的数据有null或者undefined的情况，可以在赋值时通过 || {}这种方式赋默认值，也可以通过watch 对 infoObj 监听，判断 protocol 的值，赋值给一个 新的data数据： flag。再通过flag去控制元素显示与隐藏，也是可以的。在实际项目开发中，有时会在vue模版中的html标签上，使用 v-if 条件判断节点是否展示。在子组件上，通过infoObj的protocol这个key的值判断元素dom是否应该展示。
2024-01-23 19:46:03
365
原创 vue2中的事件修饰符
在Vue2中，事件修饰符是一种用于在DOM事件处理中进行特定操作的特殊标记。Vue2提供了一些内置的事件修饰符来简化事件处理逻辑。
2024-01-23 19:40:18
778
原创 ECDSA host key for xx.xx.xxx.xxx has changed and you have requested strict checking.
服务器（假设ip地址是：10.10.100.225）磁盘坏了，重开了一个新的虚拟机之后，从另一个服务器（假如ip地址是：10.10.100.123）复制文件到变更后的服务器（225）时报错。ECDSA host key for xx.xx.xxx.xxx(ip地址) has changed and you have requested strict checking.输入/225，可以找到对应的记录，假设是63，按两次dd键，可以删除这条记录，然后输入 :wq!输入yes之后，命令执行成功。
2024-01-22 16:02:18
528
原创 nvm use切换node版本时乱码报错: exit status 1:
场景：我是直接在vscode中的终端使用nvm use 版本号，然后报错，设置无效。解决：需要用管理员身份运行命令提示符，然后再执行nvm use。
2024-01-22 16:01:52
450
空空如也
关于#前端#的问题：是学java还是学node做服务端开发
2023-10-31
TA创建的收藏夹 TA关注的收藏夹
TA关注的人