- 博客(112)
- 收藏
- 关注
RSS订阅原创 关于闭包的递进理解
1.定义如果在一个内部函数里，在对外部作用域（但不是在全局作用域）的变量进行引用，那么内部函数就被认为是闭包。简单点说闭包就是个函数，只不过处于其他函数内部而已。在本质上，闭包是将函数内部和函数外部连接起来的桥梁闭包存在的意义简单理解就是让我们可以间接访问函数内部的变量，延长变量的使用寿命以及减少命名空间的污染。return {},上面的函数反应了两个闭包，这两个闭包都维持着对外部作用域的引用，因此不管调用那个都能访问外部函数中的变量。
2023-09-14 21:33:01
243
原创 关于路由懒加载
构建工具会根据路由配置中的懒加载语法，将对应的路由组件拆分成独立的文件，然后在需要的时候加载。具体来说，在使用懒加载的情况下，当用户切换某个懒加载的路由时，浏览器会发送请求去获取该路由对应的javascript文件，一旦javascript文件加载完成，路由所需的组件将会被实例化病渲染到页面上。路由懒加载是一种优化技术，它是可以延迟加载应用程序的某些模块或者组件，而不是在初始加载时一次性加载所有内容，这样可以减少初始加载的文件体积，提高应用程序的加载速度。路由懒加载是在用户访问相应的路由时才进行加载。
2023-09-12 17:55:44
647
原创 移动端ios键盘的兼容性问题
1.iOS在收起键盘的时候会触发失焦事件，但是和版本或者型号有关，mini上出现的，因为收起键盘和失焦都触发了失焦事件，就相当于一次失焦触发了两次方法，但是在2019和安卓型号的版本都不会在键盘收起的时候触发失焦事件。最近遇到一个安卓ios移动端失焦后的问题，刚开始排查的重点在于失焦事件和按钮的点击事件冲突问题上，但是试了几种方法并没有解决，但是有在前几篇中总结这个问题的解决。我的业务逻辑是在输入框失焦后对输入的数字格式化，最后点击确定事件，但是输入5000，最后会变成50，问题出在了两个方面。
2023-09-11 15:45:54
245
原创 遇到一个异步任务后是否会直接加入到异步队列当中
在javascript中，异步任务不会立即加入到异步队列（任务队列）中，而是根据不同的异步操作类型和执行环境，将对应的回调函数函数或事件加入到不同的队列中。总而言之，异步任务并不会立即加入到异步队列中，而是在适当的时机，根据异步操作的类型和执行环境，将对应的回调函数或事件加入到任务队列中等待执行。需要注意的是，具体的行为可能会收到执行环境的影响(浏览器或者node)的影响，不同的执行环境可能会有不同的异步操作类型和行为。5.当主线程空闲时，事件循环机制会从任务队列中取出这个定时器任务的回调函数，并执行它。
2023-09-09 17:39:35
143
原创 vue中的数据依赖如何追踪收集
需要注意的是，Vue 的响应式系统是基于 JavaScript 的对象属性访问的拦截来实现的。在 Vue.js 中，数据依赖的追踪和收集是通过 Vue 的响应式系统实现的。当组件渲染时，Vue 会自动追踪组件模板中使用的数据属性，并建立起数据属性和组件之间的依赖关系。在模板编译过程中，每当访问一个数据属性或表达式时，对应的 Watcher 会被记录为该数据属性的依赖项。通过上述机制，Vue 能够在组件渲染时自动追踪和收集数据的依赖关系。Vue 的模板编译器会解析组件的模板，识别其中使用的数据属性和表达式。
2023-09-07 21:32:15
502
原创 移动端输入框的失焦事件和按钮事件冲突
2.使用@click 指令替代v-on:click，在按钮上使用@click，并在点击事件处理函数中使用setTimeout延迟执行失焦操作，这样可以确保按钮点击事件能够先执行，再执行失焦操作。原因出在，在移动端，当输入框获取焦点后，点击按钮不会触发输入框的失焦事件，这是因为移动设备上的软键盘和按钮点击事件会有冲突，为了解决这个问题，可以尝试以下几种做法。3.移动设备上的按钮点击使用v-on:rouchend事件代替v-on:click,因为touched事件在移动设备上触发时，输入框已经失去了焦点。
2023-09-07 21:27:36
1152
原创 在vue中父组件更新，子组件也会更新吗
在vue中，当子组件更新的时候，父组件不会自动更新，子组件的更新只会影响子组件以及其子组件的渲染，不会直接触发父组件的重新渲染，然而父组件可以通过向子组件传递属性(props)或监听子组件的事件(events)来获取子组件的更新信息，并根据需要决定是否触发自身的重新渲染。一般情况下，子组件的重排和重绘操作不会触发父组件的重排和重绘，子组件的变化通常会影响其自身及其子组件的渲染，不会直接影响父组件，然而当子组件引起的变化导致父组件的布局或样式发生改变时，浏览器会执行整体页面的重排和重绘。
2023-09-07 21:17:42
2697
原创 monaco,monaco-editor,monaco-editor-webpack-plugin,
总之，Monaco是一个包含了Monaco Editor和Monaco Language Server两个项目的总称，Monaco Editor是Monaco项目中的一个部分，Monaco Language Server是支持多种语言的语言服务器，它们可以相互配合使用，提供更加智能的代码提示和语法检查等功能。它类似于VS Code编辑器中的编辑器部分，提供了丰富的编辑器功能和各种语言的语法高亮、智能提示、代码折叠、代码补全等功能，并具有高度的可扩展性和灵活性。
2023-08-04 17:27:39
1665
原创 ajv中FormatDefinition
然后我们定义了一个"validate"函数用于验证数据格式，它接收一个字符串类型的"data"参数，返回一个布尔值，表示数据是否符合自定义格式的定义。其中，"T"是要验证的数据类型，"validate"属性可以是一个RegExp对象，也可以是一个函数，用于验证数据是否符合定义的格式。在上面的代码中，我们定义了一个"string"类型的属性，并将其格式设置为"customFormat"，这样在验证数据时，就会使用我们定义的自定义格式进行验证。需要注意的是，自定义格式的验证逻辑必须是同步的，不能是异步的。
2023-08-04 16:52:16
308
原创 Vue received a Component which was made a reactive object. This can lead to unnecessary performance
总之，如果你将一个Vue组件对象转换为响应式对象，可能会导致不必要的性能开销，因此建议使用"markRaw"方法将组件对象标记为非响应式对象，或者使用"shallowRef"代替"ref"来创建一个浅响应式对象。为了避免这种情况，Vue建议使用"markRaw"方法将组件对象标记为非响应式对象，或者使用"shallowRef"代替"ref"来创建一个浅响应式对象。在上面的代码中，我们使用"markRaw"方法将"MyComponent"组件对象标记为非响应式对象，避免了将组件对象转换为响应式对象的情况。
2023-08-04 16:47:33
7421
原创 JSON Schema
在上面的代码中，我们使用JSON Schema描述了一个用户数据对象，包含了三个属性：“name”、“age”、“email”。其中，"name"属性的类型为字符串，"age"属性的类型为整数，并且要求其值必须大于等于0，小于等于150。最后，我们使用"required"关键字指定了"name"和"email"属性是必须的，即不能为null或undefined。通过使用JSON Schema，我们可以对前端应用程序中的数据进行验证、格式化、转换等操作，以确保数据的正确性和可靠性。
2023-08-04 16:45:34
433
原创 前端将css.html.js打包成exe/app一起打开
electron的node_modules安装失败 安装失败，报错Electron failed to install correctly。在指令后面添加 --ignore-scripts，意思是npm 将不会运行在package.json中指定的scripts。过程我是按照下面的执行的，大家可以直接参考这个博客里的过程，下面我记录一下遇到的一些问题，我的电脑是mac。3.最后执行npx electron-builder的时候也报错了，不过只能在电脑打开，在手机上还是没打开，再研究一下，后续还会再发的。
2023-07-21 09:54:54
300
原创 electron 安装失败，Electron failed to install correctly
我的电脑是mac，这个问题上网找了很多解决办法试了一下都不行，删除重装也不太行，但是单独安装是可以的。1.切到node_modules/electron执行如下指令。执行完后再启动就可以啦。
2023-07-21 09:28:20
456
原创 安装Electron时报错command sh -c node install.js
在指令后面添加 --ignore-scripts，意思是npm 将不会运行在package.json中指定的scripts。在安装Electron报如下错误。
2023-07-21 08:49:47
1264
原创 自定义指令directives:防抖,节流,element-ui的无限滚动在el-table上使用的封装
然而，有的情况下，你仍然需要对普通 DOM 元素进行底层操作，这时候就会用到自定义指令，3.update：所在组件的vnode更新时调用，但是可能发生在其子vnode更新之前，指令的值可能发生了改变，也可能没有，但是你可以通过比较更新前后的值来忽略不必要的模板更新。1.bind:只调用一次，指令第一次绑定到元素时调用，在这里可以进行一次性的初始化设置。2.局部注册，在用到的组件内注册并使用，使用如上，下面局部注册引用。2.局部注册，在用到的组件内注册并使用，使用如上，下面局部注册引用。
2023-07-13 17:59:16
1389
原创 keep-alive和router-view配合使用缓存整个路由页面以及路由切换
实现内容：通过vue实现，在页面有侧边栏动态来展示当前页面流程，右边进行页面的切换，左右两边都是组件，但是A/B/C组件的切换是通过keep-alive搭配router-view实现的，首先在当前文件中创建五个文件：index.vue,A/B/C.vue,router.json。toggle是A/B/C组件中emit事件绑定的，用来实现左边栏动态的切换，不再具体展示，具体页面路由切换在具体的A/B/C页面中，toggleHa。通过这些能实现是基于在router.js里的配置。
2023-07-13 14:16:25
1319
原创 vue3使用monaco-editor插件,报错Unexpected usage
在使用monaco-editor插件的时候，运行时没有报错，打开页面报如上错误，可以关掉，但是页面变了 还会再出现，上网找了一圈报错，是因为插件引入时产生的问题。然后再重新刷新一下页面就可以啦。
2023-07-12 18:56:28
1250
2
原创 keep-alive和router-view配合使用
keep-alive本身创建过程和patch过程，缓存渲染的时候，会根据vnode.componentInstance(首次渲染为undefined)和keepAlive属性abstract判断会不会执行created，mounted等钩子函数，而是对缓存的组件执行patch过程，直接把缓存的DOM对象直接插入到目标元素中，完成了对数据更新下的渲染过程。4.如果缓存对象存在，则直接从缓存对象中获取组件实例给vnode，不存在则添加到缓存对象中。2.获取组件实例key，如果有获取的实例key，否则重新生成。
2023-07-12 18:15:53
1300
原创 vue项目报错error Empty block statement no-empty
eslint打开后会校验导致报错，那么解决的话，可以在当前报错内容添加忽视该校验，也可以在配置中修改对整个项目文件不再校验。这个报错是因为不规则空格引起的报错，一般if(a){}内容是空会导致该报错。在报错的地方使用这两个其中一个就可以。
2023-07-12 08:43:59
2048
原创 these parameters are deprecated, see docs for addKeyword
但是这种方法已经弃用，应该用官方支持的写法，不要直接传keyword,以键值对形式写出来，也有可能是其他书写不规范造成的问题，官方链接也放在下面。在使用json schema中的自定义关键字时发生该报错，因为直接第一个参数直接传keyname，如下。
2023-07-04 21:53:33
411
原创 没有对props类型提示
在tsx文件里引入vue组件，对props并不会有类型提示，因为类型所有vue提供出来的类型，所以所有引入的vue组件，不管是props是什么类型，提示的类型都一样是vue提供出来的，可以把vue文件变成tsx文件，这时用的时候没有传避暑props会报错，类型错误也会报错，提示类型。
2023-06-15 09:53:53
227
原创 浏览器缓存策略：强缓存和协商缓存
不指定缓存的有效时间，而是直接发送请求到服务器判断是否可以继续使用缓存，服务器会根据这个请求的 request header的一些参数来判断，是否命中协商缓存，如果命中只有返回304状态码，并带上新的response header通知浏览器从缓存中读取资源，协商缓存可以解决，当内容发生改变，但是强缓存情况下并不更新的问题。3.服务器收到请求后，会优先根据Etag值判断请求的文件有没有做修改，如果一致则命中缓存，返回304，如果不一致则有改动，返回新的资源文件并带上新的Etag并返回200。
2023-04-26 10:59:57
642
1
原创 el-table实现合并表头以及表格实现单选框，el-table去掉个别边框
el-table合并表头，实现表格单选，隐藏el-radio中lable绑定的值
2022-12-08 09:53:17
3581
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人