- 博客(141)
- 收藏
- 关注
RSS订阅原创 js执行字符串代码
这种方式就不用但是上下文命名冲突的问题，因为代码是在函数中执行的，因此我们不需要在自调用函数中运行 new Function()。注：当前的a打印的是1，也就是Function 构造函数创建的函数仅在全局作用域中执行。注：需要注意的是，eval是在当前上下文执行的代码，如果字符串中的变量与当前上下文的变量命名冲突，就会导致报错。我们很难去避免字符串中的变量和当前上下文的变量重复，所以我们可以在自调用函数中执行eval来解决这个问题。这样就没问题了，注：这里的a打印的是2，也就是我们自调用函数作用域的a。
2024-01-25 10:34:04
804
原创 js获取元素内的文本（不包含子元素文本）
获取一个元素内的第一层文本，比如将一个div标签作为输入框时，我们可能会在里面插入一些元素，但这些元素只是作为标注使用，并不会作为用户输入的内容，这时候我们就不能获取标注元素内部的内容。成功的获取到了内容，因为是我们手动写的html标签，并不是用户输入的内容，默认会带上空格和换行，如果想要去除需要单独处理（如果是用户输入的内容，不建议对换行和空格进行单独处理）遍历所有的子节点，判断如果是text节点，就获取节点中的内容，将所有text节点内容拼接就得到了我们要的结果。// 获取所有text节点的内容。
2024-01-24 16:27:32
533
原创 原生js监听当前元素之外的点击事件
实现思路：监听整个dom的点击事件，判断当前元素是否包含点击事件的触发元素即可。当我们需要实现点击其他位置关闭弹窗的时候，就需要监听当前元素之外的点击事件。即使点击子元素，也能被我们判断到。
2024-01-16 17:22:59
726
原创 js中的Formdata数据结构
FormData 提供了一种表示表单数据的 key/value 的构造方式，主要方便我们用 XMLHttpRequest 来发送数据。这里我们要与常规的对象数据结构区分开了，FormData的key不是唯一的，它可以存在多个相同的key。因为FormData本身就是为了方便前端与后端进行接口交互的，所以可以直接作为实例化 URLSearchParams的参数，然后转为queryString。FormData也可以快捷的转为常规对象数据，但是对象的key是唯一的，所以FormData重复的数据会丢失。
2023-10-26 17:09:37
1616
原创 Iterator迭代器
Iterator迭代器是一种接口，为不同的数据结构提供一种访问机制，即for … of 循环。当使用for…of循环遍历某种数据结构时，该循环会自动去寻找 Iterator 接口。任何数据结构只要部署Iterator接口，就可以完成遍历操作(即依次处理该数据结构的所有成员）。
2023-10-25 16:11:02
177
原创 前端URL拼接路径参数
我们有时候会遇到浏览器URL拼接参数的场景，例如页面跳转时，带上一个特定的标识：https://www.baidu.com?所以我们在拼接参数的时候要先行判断，原url是否已经包含参数，如果不包含要以。这样我们的参数就添加好了，我们只需要调用。我们首先能想到用字符串拼接的方式实现。我们就得到了一个解析好的URL对象。我们可以用浏览器给我们提供的。如果我们想增加参数，直接在。方法就能得到完整的路径了。
2023-10-12 16:14:11
3744
原创 vue3-vuex持久化实现
有时候我们可能需要在vuex中存储一些静态数据，比如一些下拉选项的字典数据。这种数据基本很少会变化，所以我们可能希望将其存储起来，这样就减少了请求的数量。但是在每个位置都进行存储，好像是在做重复的逻辑，所以我们可以考虑将这个功能提取出来，作为一个插件使用。
2023-08-30 17:12:46
582
原创 前端文件的分片和组合
现在大文件上传或下载时，大概率要使用分片上传或下载，来达到断点续传的效果。不然一旦网络中断，之前已经上传或下载的一部分就丢失了，需要全部重新上传或下载。
2023-08-24 17:36:09
344
原创 vue项目配置git提交规范
项目中代码格式以及git message如果不加以约束，可能最终的格式会五花八门，这样很不利于我们的项目合作。所以我们需要使用工具来约束提交代码和信息的格式。
2023-08-22 15:34:01
2067
1
原创 数组累加器-reduce、reduceRight
如果没有指定 initialValue，则 previousValue初始化为数组中的第一个值，并且 callbackFn 从数组中的第二个值作为 currentValue 开始执行。：第一次执行回调函数时，不存在“上一次的计算结果”。否则，数组索引为 0 的元素将被用作初始值，迭代器将从第二个元素开始执行（即从索引为 1 而不是 0 的位置开始）。：对数组中的每个元素按序执行一个提供的 reducer 函数，每一次运行 reducer 会将先前元素的计算结果作为参数传入，最后将其结果汇总为单个返回值。
2023-08-17 11:15:13
421
原创 vue中的require
require 是 node 中的一个方法，他的作用是 用于引入模块、 JSON、或本地静态文件。require会在编译过程中被执行，最终会得到对应文件的内容（例如json文件）或者是文件编译后的目录路径（例如图片文件，当然如果图片大小小于一定值，会被直接转换为base64编码，具体配置参考vue-cli）。因为在js中直接使用字符串路径时，编译后也会使用当前字符串路径引入，而编译后的图片路径并不一定是图片存放的目录路径。可以遍历文件夹的文件，从中获取指定文件，自动导入模块。获取引入的所有文件的key，
2023-07-31 15:58:18
8044
原创 获取图片主题色
当我们遇到根据背景图片来修改页面样式的时候，可能就需要去实现获取图片主题色的功能。这里的数据我们可以自己做聚合、分析等等处理方式进行操作，最后得到我们自己想要的值。有兴趣可以自行去了解，我这里就使用了一个现成的库。首先引入quantize.js（模块化的项目中可以使用import或者require，这里只是方便演示）最后可以选择对前五的颜色进行加权处理，也可以直接取排第一的颜色（根据业务要求自行判断）0 是透明的，255 是完全可见的）所以我们要对数据进行处理，得到每个像素点的数据。
2023-07-13 10:38:49
421
原创 requestAnimationFrame() 方法
主要是用来实现动画的时候使用的，不管是移动动画还是数字增长动画，使用这个api可以让你的动画看起来非常平滑，因为它是要求浏览器在下次重绘之前调用指定的回调函数更新动画。它和setInterval的区别是不需要我们去设置时间间隔，因为他会根据我们的屏幕刷新率来决定何时执行回调的内容。
2023-06-06 16:43:25
2154
原创 eslint错误修改之后依然报错
当我们eslint报错我们修改之后，重新启动项目eslint依然报错。如果你确认修改了，这时候可能就是eslint缓存导致。删除最新的一份缓存文件即可。
2022-09-06 20:03:02
672
原创 vue-cli5 proxy反代查看真实路径
我们在node_modules/http-proxy-middleware/dist/http-proxy-middleware.js中的prepareProxyRequest方法中的。但是我在配置之后并没有任何日志打印在控制台。按道理源码中this.logger.debug方法应该要打印，但是它没有生效。修改源码这种方式很不推荐，因为只能在自己本地使用，而且一旦更新包就需要重新修改，还是安心等待官方进行处理吧。但是通过阅读源码发现，外面可以手动在源码中加入调试语句，不过并不推荐，仅作本地临时调试使用。..
2022-08-08 10:45:26
2335
原创 解决flex-direction: column 之后元素宽度自动变为100%
我们知道在flex中align-self和align-items的作用差不多，不过align-self是设置子元素自己的对齐方式，而align-items是设置所有子元素的对其方式。当我们设置父元素flex-direction为column后，他的子元素如果我们没有设置具体宽度（可能我们希望子元素宽度由内容撑开），这时就会发现，所有的子元素宽度默认是100%了。，也就是当我们不设置子元素的宽度时，它就会拉伸子元素填充满父元素。设置除auto和stretch之外的值就行。）而stretch的作用是。...
2022-07-28 11:34:09
5040
原创 textarea去除红色波浪线
当我们使用textarea标签时，如果我们在里面输入一些特殊命令，文本内容可能会出现红色波浪线一般来说这并没有什么影响，但是有的产品可能觉得不好看让前端去掉。其实也很简单，设置：即可 是枚举属性，定义是否可以检查元素的拼写错误。它可以具有以下值：, 设置在可能的情况下会去检查元素内容的拼写错误;, 设置在可能的情况下关闭对元素内容拼写检查。这是一个实验中的功能，但是如果你不需要兼容旧版ie的话，可以安心使用它兼容性如下：...
2022-06-29 17:04:38
1735
原创 vue中使用CodeMirror解析yaml语言
下载插件：这里使用的是codemirror5，现在codemirror最新已经是6了，不过参考文档相对较少，使用起来不是那么方便。后续文档丰富之后可以考虑使用6这里使用到的配置如下三、CodeMirror具体使用1.首先创建一个textarea标签2.然后引入相关依赖3.最后初始化编辑器四、CodeMirror语法校验1.引入语法校验依赖codemirror支持的校验库如下3.安装lint需要的其他依赖仅仅是这样还是不够的，因为codemirror对应的校验插件中可能还依赖其他
2022-06-22 10:31:09
5980
4
原创 前端超出换行-white-space
这里写目录标题一、属性介绍1. 属性值二、具体使用1. normal2. nowrap3. pre4. pre-wrap5. pre-line三、文本换行案例一、属性介绍white-space 属性设置处理元素内的空白-Space(空格)、Enter(回车)、Tab(制表符)我们在开发中应该知道，在div中无论我们敲多少空格和回车，显示在页面上的都会是一个空格。那么空格和回车具体应该怎么显示？这就是white-space 属性存在的意义注：当前文章只使用中文文本举例，英文或者数字文本还受word-
2022-04-24 10:46:53
5318
原创 前端js常用运算符（es6+）
前端常用运算符（ES6+一、简介二、常用运算符1.可选链 ?.2. 空值合并运算符 ??3. 逻辑空赋值 ??=4. 逻辑或赋值 ||=5. 逻辑与赋值 &&=一、简介本文章用于记录js中常用的运算符，主要可能是ES6版本以上的，大家在项目中使用时需要注意兼容性。二、常用运算符1.可选链 ?.当我们读取一个对象的属性的属性时，如果一级属性为空，就会报错了例如： const obj = { // people: { // name: 11 // }
2022-04-18 14:12:22
981
原创 js实现复制功能
js实现复制功能一、具体场景二、实现方式1. document.execCommand（1）具体实现（2）方法特点2.navigator.clipboard.writeText（1）具体实现（2）方法特点一、具体场景前端有时需要实现点击按钮复制的功能，这个时候就不能让用户去手动选择内容右键复制了。二、实现方式1. document.execCommand（1）具体实现复制时，先选中文本，然后调用document.execCommand(‘copy’)，选中的文本就会进入剪贴板。这就需要借助输入框
2022-04-12 15:50:21
14796
原创 使用nvm对node进行版本管理
使用nvm对node进行版本管理一、背景介绍二、安装三、使用一、背景介绍当我们在项目开发中，需要使用不同版本node时，我们通过反复的安装、卸载node来进行版本切换是不太现实的，所以nvm就是帮助我们进行node版本切换的存在二、安装nvm-windows 最新下载地址：https://github.com/coreybutler/nvm-windows/releases打开之后往下翻下载安装包傻瓜式安装即可，安装过程中需要配置node存放目录，按照自己需求进行选择（就是最终node的安
2022-03-08 10:37:06
1001
原创 textarea文本框的placeholder文字换行
textarea文本框的placeholder文字换行一、问题描述二、原生实现三、vue中实现一、问题描述textarea为前端常用的文本输入框，有时候需要placeholder的文字提示更加友好，那样提示文字可能就需要换行。二、原生实现原生textarea的实现方式如下：<textarea rows="6" style="width: 300px;padding: 0;" placeholder="标题 正文 结尾"></textar
2022-01-13 15:19:26
5479
8
原创 nodemon实现Nest.js热加载
nodemon实现nestjs热加载一、问题描述二、nodemon三、具体使用一、问题描述Nest.js是一个node框架，就像其他node框架express、egg等一样，并不像前端框架vue、react一样支持热加载。这样让我们经常写前端的开发不是很适应，所以为我们的Nest.js项目配置热加载是很有必要的。二、nodemonnodemon是一个node.js的辅助开发工具，具有监听目录文件的作用。并在监听后作出响应。就是说它能在监听到文件目录发生变化之后，帮我们自动重启项目。三、具体使用下
2022-01-04 17:01:27
10299
1
原创 vue-router偶现返回失效
vue-router偶现返回失效问题描述解决方式问题描述vue-router 动态addRoute 后 router.back和router.go(-1) 失效，点击返回之后仅仅是路由改变，页面不刷新解决方式在调用 $addRoutes 动态添加方法时，调用一下 router.history.setupListeners()for (let i = 0; i < arr.length; i++) { router.addRoute(arr[i]); // arr 登录后传进的有权
2021-12-31 09:25:30
2035
原创 webstorm设置中文界面
打开setting-plugins，搜索Chinese，下载选中的那个插件，下载完成启用之后重启webstorm即可
2021-12-31 09:15:20
4198
2
原创 H5鼠标拖动事件（drag）
H5鼠标拖动事件一、元素拖动二、相关事件1.拖拽元素（1）dargstart（2）drag（3）dragend2.目标元素（1）drop（2）dragover（3）dragenter（3）dragleave一、元素拖动HTML5已经完全支持鼠标拖动元素，其中图片和链接默认就支持拖拽，而其他的元素需要设置属性draggable=“true” 就可支持拖拽。其中在拖拽的过程中会默认触发一系列事件。二、相关事件1.拖拽元素被拖拽的元素自身<div id="box" draggable="
2021-11-15 10:46:31
2087
原创 vue-cli4配置生产环境去除console
vue-cli4配置生产环境去除console一、问题描述二、babel-plugin-transform-remove-console1.具体配置一、问题描述本地开发环境一般会打印很多console进行调试，而且一部分console可能暂时不想删除。但是直接发到生产环境就会比较难看，而且容易暴露相关信息。这个时候就需要配置生产环境去除console了。二、babel-plugin-transform-remove-console推荐使用babel的插件babel-plugin-transform-
2021-11-08 17:45:16
1562
1
原创 vue与nginx配置websocket反代
vue与nginx配置websocket反代vue配置websocket反代创建连接config配置nginx配置websocket反代vue配置websocket反代创建连接this.url = `ws://${location.host}/UMS-CLUSTER-WS/websocket/test` // 使用location.host的目的是在当前项目运行的域名和端口号下发起ws连接，例如本地为localhost:80new WebSocket(this.url) // 创建连接confi
2021-11-04 10:47:01
1884
原创 解决dart-sass转义伪元素中的字符集-elementUI字体图标乱码
解决dart-sass转义伪元素中的字符集（elementUI字体图标乱码的问题）一、问题描述二、解决办法1.修改dart-sass配置2.直接使用css一、问题描述当我在scss中使用伪元素修改elementUIselect选择框的下拉图标样式时遇到一个问题：我写的伪类content本地打包之后字符集被转义为明文，但是element原生的样式却没问题虽然直接发布依然可以显示，但是会偶发的出现乱码。二、解决办法在网上查找说是dart-sass在打包过程中会将伪元素content中的内容转义。
2021-10-19 17:30:57
1709
3
原创 Proxy代理
Proxy代理一、基本概念1.语法2.方法3.简单使用二、handler 对象的方法1.get()（1）语法（2）具体使用2.set()（1）语法（2）具体使用3.deleteProperty()（1）语法（2）具体使用4.has()（1）语法（2）具体使用5.apply()（1）语法（2）具体使用6.construct()（1）语法（2）具体使用一、基本概念Proxy 对象用于创建一个对象的代理，从而实现基本操作的拦截和自定义（如属性查找、赋值、枚举、函数调用等）。1.语法const p = ne
2021-10-09 14:51:33
1493
原创 webstorm设置打开时不自动打开最近的项目
打开webstorm时默认打开最近的项目，而不是选择项目，如果我们想在打开时手动选择项目，需要修改一下设置直接在菜单栏打开 File → Setting → Appearance & Behavior → System Settings取消勾选Reopen projects on startup即可设置完成之后，再次打开webstorm就是这种效果了我们选择自己想要的项目打开即可...
2021-09-28 09:02:21
2106
原创 前端自定义事件的触发与监听
前端自定义事件的触发与监听一、基本概念1.Event2.CustomEvent3.addEventLister4.addEventLister二、代码实现1.触发原生事件（1）不传递参数（2）传递参数2.触发自定义事件一、基本概念实现前端自定义事件的触发与监听主要有四个东西，他们分别是Event、CustomEvent、addEventLister、dispatchEvent1.Eventevent = new Event(eventNameStr, options);eventNameStr：
2021-09-18 11:02:22
2706
2
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人