- 博客(56)
- 收藏
- 关注
RSS订阅原创 【日常bug记录】el-checkbox 绑定对象数组
是双向绑定的值，也就是选中之后传到表单数据里面的值，一般设置为。标签内部再使用插值表达式写上多选框框里面要显示的属性就可以了。这个写法很怪异哦，但确实管用。
2024-07-12 16:15:03
177
1
原创 Monaco Editor系列（八）插入自定义DOM、删除指定位置的单词、给特定单词着色
在编辑器中插入DOM的使用场景还是挺常见的，例如查找单词的时候复现出来的查找框编辑时候浮现出来的建议列表以及 gitlab 中，给别人的合并请求添加修改建议的小框框可以发现上面几个框框虽然都是独立于编辑区域的，但是显示上还是有区别的，搜索的框框和建议列表框框是浮在编辑器上的，给合并请求提建议的框框是插入到上下两行的中间的，会把两行撑开，并且不会占用行号。所以其实 monaco 的编辑器之外的DOM有两种，一种是，一种是。
2024-06-19 18:04:12
872
原创 【日常bug】process is not defined at node_modules/path/path.js (path.js:25:17)
在Vue3中不能直接使用 process，解决方法，在 vue.config.ts 中增加 define 配置项。
2024-06-17 15:50:01
266
原创 《数据结构与算法之美》学习笔记二
前言：本篇文章介绍了一下二叉树中的基本知识点，包括二叉树的种类、二叉树的存储方式以及二叉树的深度和广度优先遍历；以及《数据结构与算法》中对于数组的讲解记录，只记录了本前端能看懂的🤓，还有很多知识点是我看不懂的，后端老师请自行探索吧。
2024-06-11 15:24:26
987
原创 Monaco Editor系列（七）代码信息指示器CodeLens、使用API触发键盘事件、自动完成配置
本篇文章主要介绍了三个功能CodeLens 代码信息提示器的配置和自动补全配置很类似，都是隶属于 languages 命名空间，从函数名上看，都是通过注册 Provider 的方式，增加配置，里面传参也很类似，第一个参数都是语言，第二个是配置项CodeLens 和 Markers 很类似，都是提供代码提示的，帮助开发者更好的理解代码，但是 Markers 是鼠标浮动到代码上才会出现，并且可以显示的内容比较多，CodeLens 直接显示在代码里面，占据独立一行，但是不占用行号，复制时不会被复制到剪切板中。
2024-06-05 11:38:49
1167
9
原创 Monaco Editor系列（六）Range详解、Uri 自动匹配语言模型、缩略图 miniMap 配置
前情回顾：一鼓作气，再鼓，再鼓！！哈哈哈。争取早日占领 Monaco 领地。上一篇文章讲到的三个功能分别是 Position 类型、设置 markers、指定位置插入或替换内容涉及到的知识点：⛈️ 获取光标位置：⛈️ 获取某个位置处的单词：这一篇文章继续来探索更多的功能吧！遨游在 monaco editor 的世界里是不是很快乐啊哈哈哈哈（bushi，大佬写的非常好，是少有的成系列的学习 Monaco Editor 的学习资料，并且有很多总结性的东西都给总结好了。
2024-06-04 10:42:52
809
原创 《数据结构与算法之美》学习笔记一
所以说就像这门课程的作者王争老师提到的，不管是数据结构与算法，还是其他的原理性的知识、提高性的知识，你不学，就永远觉得没用，但是你学了，总有一天你会应用上，并且比普通的笨方法更优雅。对一组数据结构进行连续操作时，大部分情况下时间复杂度都很低，只有个别情况时间复杂度比较高，并且在高时间复杂度后面，跟着连续的低时间复杂度的操作，此时就可以将一组操作放到一块儿进行分析，将高时间复杂度平均到低时间复杂度上，能够使用均摊分析的场景中，一般均摊时间复杂度就等于最好情况时间复杂度。但是我们可以知道相对的执行时间。
2024-05-11 10:37:12
946
原创 Monaco Editor系列（五）Position 类型详解、设置Marker、指定位置插入或替换文本
前情回顾：上一篇文章主要探索了三个功能点，分别是版本对比功能、新建命令和菜单项和滚动条滚动的功能，涉及到的方法在这里稍稍的回顾一下。这样把所有的方法列出来，等到真正使用 Monaco 的时候，就比较方便了🪡 创建版本对比的编辑器 `monaco.editor.createDiffEditor(容器, 配置)`🪡 给 `diffEditor` 设置内容 `editor.setModel({original:旧版本model, modified:新版本model})`
2024-04-20 11:42:17
1343
2
原创 Monaco Editor系列（四）版本对比、自定义右键菜单、光标滚动
在 Monaco 中，已经有很多现成的很好用的快捷键，例如 crtl+f 搜索代码。Monaco 其实还提供了接口，允许我们自定义命令。另外右键菜单里面的命令，和快捷键往往都是一对一的关系右键出来的菜单项的专业术语叫做Action。所以我们这一章就来学一学怎么自定义命令以及Action菜单项吧！我们来实现一个简单的命令，alert 弹出一句话添加自定义命令的方法是为了方便大家点击链接跳转，以后我就直接贴官网的文档链接啦！这个方法需要接受一个参数，类型为。
2024-04-18 15:56:43
2275
原创 Monaco Editor系列（三）修改内容、多文件编辑、自定义主题
前言：上一篇文章讲了如何在我们下载的源码项目中，增加一个自己的路由页面供我们自由发挥，下面的若干篇文章，我会和大家一起探索 Monaco Editor 的 API，探索 Monaco Editor 的功能。Monaco Editor 的官方文档特别的简便，这也是学习来困难的原因之一。但是学习它一定是非常有价值的。接下来继续本篇文章的探索吧！一起加油吧！
2024-04-16 18:05:28
2705
原创 Monaco Editor系列（二）Hello World 初体验
前言：上一篇文章我主要分享了从 Monaco Editor 入口文件以及官方提供的示例项目入手，对一部分源码进行剖析，以及分享了初始化阶段代码的大致执行步骤，这一篇了来讲一下我们要用 Monaco Editor 的时候该怎么用。其中会涉及到一些 API，我会对 API 的源码进行深入的解析，但不保证能完全看懂 😂。这种复杂的源码，不要着急，实在深入不下去，就换一个入口，继续探究，最后你学到的东西会呈网状交织在一起，覆盖到所有的代码。
2024-04-03 14:00:33
1137
原创 Monaco Editor系列（一）启动项目与入门示例解析
本篇从 Monaco Editor 下载、启动开始，顺着入口文件以及示例 Hello World 项目的脉络，学习了源码的执行过程。学习这种大型项目的源码一定要有耐心，另外就是在学习的过程中需要查漏补缺，遇到不会的东西补一补，慢慢的积累。
2024-03-20 19:10:31
4821
原创 vue中使用prettier
配置Prettier在这里使用文件的形式，在src目录下新建文件，使用CommonJS的方式导出，先写上官网提供的简单的实例semi: false, // 结尾不使用分号singleQuote: false, // 字符串使用双引号。
2024-02-28 16:57:17
839
1
原创 JavaScript版数据结构与算法（二）图、堆、搜索排序算法、算法设计思想
图是网络结构的抽象模型，是一组由边连接的节点。图可以表示任何二元关系，比如道路、航班…JS中没有图，但是可以用 Object 和 Array 构建图。图的表示法：邻接矩阵、邻接表…1、邻接矩阵：用矩阵表示节点之间是否存在连接关系2、邻接表：用对象和数组表示一个节点都和哪个节点有链接，还可以用链表等表示。
2024-01-29 16:38:24
791
原创 JavaScript版数据结构与算法（一）栈、队列、链表、集合、树
为什么要学习数据结构与算法？最重要的就是面试要考算法，另外就是如果在实际工作当中，能够使用算法优化代码，会提升代码质量和运行效率，作为一名前端人员可能在实际中用的并不是特别多。数据结构与算法是分不开的，数据结构是，算法是，程序就是。算法刷题大家都知道，就是力扣。刷题顺序推荐按类型刷题，比如栈相关的题，一次刷好几道，巩固巩固。刷题过程中需要重点关注的是。其实这跟高中初中做数学题很像，有通用的套路可循，但是需要多复习，多看错题，做题的时候尽量把这道题考察的知识点都总结出来。
2024-01-08 14:29:03
1185
原创 CommonJS模块规范
不同之处在于它接受的参数是一个对象和一个数组，其中数组中的元素将作为参数传递给函数。方法是函数对象的一个方法，通过该方法可以调用一个函数，并将指定的对象作为函数的上下文（也称为 this 值）来执行函数。webpack 可以将CommonJS模块的代码转换为浏览器支持的代码，所以我们看一下webpack是怎么转换的。文件名和模块内容会以键值对的形式存储在一个对象里面，每个模块中的代码都被放在一个函数里面，以形成独立的作用域。第一个参数是要设置为函数上下文的对象，后面的参数是传递给函数的参数。
2023-12-06 09:08:51
302
原创 webpack.DefinePlugin创建全局变量；禁止使用eval
源代码映射是一种将打包后的代码映射回原始源代码的技术，可以帮助开发者在调试代码时更方便地定位错误和问题。会创建一个全局变量，在打包的时候，寻找js文件中所有的该变量的引用，并且直接替换为变量的值。项目中经常在不同的环境中有不同的配置，在js文件中是没有办法直接获取环境是正式环境还是测试环境的，可以通过。: 生成单独的源代码映射文件（.map文件），它能够映射到原始的源代码，但会增加打包的时间和文件大小。: 也是生成较快速的源代码映射，同时会将模块的信息添加到映射文件中，能够映射到原始的源代码和模块。
2023-12-05 09:55:47
302
原创 模块三：Vuex 数据流管理及Vue.js 服务端渲染（SSR）（二）服务端渲染基础与NuxtJS
本篇文章首先简述了渲染页面的三种方式：服务端渲染、客户端渲染、同构渲染；其次介绍了基于Vue的同构渲染框架NuxtJS，最后应用NuxtJS书写实例项目，在实践中体会NuxtJS的使用。
2023-11-07 10:13:28
1135
原创 模块三：Vuex 数据流管理及Vue.js 服务端渲染（SSR）（一）Vuex状态管理
本篇文章主要对vue组件之间的通信方式进行总结，并且探索vuex状态管理的核心概念和基本使用，以及自己模拟实现一个vuex。并不是任何项目都适合使用vuex，只有中大型项目才适合使用vuex。
2023-09-22 11:15:28
156
原创 div实现placeholder的效果
用来选中没有子节点的元素，这里的子节点包括元素节点和文本节点（包括空格），注释、处理指令和通过css设置的content属性不会影响。请注意，除了注释之外，大部分处理指令都是与服务器端交互相关的，并且需要服务器端进行相应的处理才能生效。：这是HTML中的注释标记，在此处编写的内容不会被浏览器呈现给用户，只是作为开发者的备注信息。：这是PHP的处理指令，用于嵌入服务器端的PHP代码到HTML文档中，实现动态内容生成。的效果，即输入框中没有内容的时候显示提示，用户输入内容后提示就消失。
2023-09-07 10:10:04
694
原创 【grunt+postcss应用】给一个css文件中所有选择器加上父级选择器
这种形式允许每个目标可以省略files属性，直接在目标任务的属性位置增加src属性和dest属性，分别指向源文件和目标文件。但是不能直接作为单任务的属性，不能写到一级任务属性中。name: 'grunt', // 常量})这样会导致src和dest被解析成两个目标，而不是配置文件的属性。name: 'grunt', // 常量task1: {},task2: {})这种格式支持额外属性上述讲述了定义src-dest一一对应关系的几种格式。
2023-09-05 19:21:37
132
原创 Vue.js 源码剖析（二）-- 虚拟DOM
h()函数实现了重载机制，能传多种参数类型。参数一：标签选择器或组件的选项对象参数二：给标签设置属性或事件参数三：字符串（内容）/数组（子元素）这段代码会创建出来一个虚拟DOMvNode，并且会创建对应的真实DOM，并且填充到el中。
2023-07-31 15:43:39
57
原创 Vue.js 源码剖析（一）- 响应式原理（3）数据响应式原理
数据响应式主要用于将vm.$data中的数据转换为响应式数据，在修改数据的时候，保证依赖数据的视图可以自动更新。数据响应式主要由三个类配合完成的：🎃Observer：用于将对象转换为。数组和对象的响应式实现是不同的，首先得考虑它们是如何被修改的。对于数组而言，是通过数组的原生方法被修改的，例如；所以就要将改变数组的原生方法进行重写，在修改数组的同时，通知依赖更新。对于对象而言，对象的定义可以使用实现，每次通过obj[key]修改对象属性都会进入对象的setter中，所以要将普通对象使用。
2023-07-26 11:51:13
142
原创 Vue.js 源码剖析（一）- 响应式原理（2）Vue初始化及首次渲染过程
讲述Vue源码中初始化和首次渲染过程，通过思维导图清晰展现源码执行的流程
2023-07-20 15:05:06
94
原创 Vue.js 框架源码与进阶（三）--- Virtual DOM的实现原理
本文是对虚拟DOM库SnabbDOM实现虚拟DOM的源码进行分析，其中有很多流程图、思维导图帮助理解，对几个关键函数的执行使用流程图的形式展示出来。
2023-07-14 09:58:48
178
原创 Vue.js 框架源码与进阶（二）--- 模拟Vue.js响应式原理
本文探究vue响应式原理，使用Object.defineProperty模拟实现一个最小版本的vue，实现简单的数据驱动视图和双向数据绑定。
2023-07-04 15:23:22
110
原创 Angular学习笔记七之RxJs
RxJs是一个专门用来处理异步操作的JavaScript库。可以将RxJs想象成面向事件的Lodash。RxJs库是以纯函数为基础的，因此特性强大、功能稳定。RxJs库拥有一整套在可观察者对象中控制事件流的算子，可以在事件流的各个阶段实现监听和控制。
2023-06-14 11:52:11
811
原创 Angular学习笔记六之路由
使用到该路由守卫的组件类中应该定义一个名称相同的方法，用来告诉路由守卫能不能离开当前页面，在路由守卫中调用这个方法来决定返回值是什么。路由模块懒加载可以实现用户首次请求应用的时候只请求根模块，其他模块等用户访问的时候再加载，优化用户体验。一个路由可以应用多个守卫，所有守卫都允许，路由才可以访问。是一个接口，我们需要自定义一个路由守卫类，路由守卫类要实现这个接口。中，定义子级路由的跳转链接并且给子级路由定义路由插座。路由守卫会告诉路由是否允许导航到请求的路由。在定义路由的时候，通过路由的。
2023-05-31 14:02:29
852
原创 工作记录之查漏补缺
font-face：应用该字体的时候使用的名字src：字体文件路径 字体格式（从前往后依次查找）在angular中动态绑定自定义属性应该用，这样就可以用找这个自定义属性的值。
2023-05-19 19:05:02
59
原创 Angular学习笔记五之表单
自定义验证器有如下几条规则自定义验证器是一个TypeScript类类中包含具体的验证方法，验证方法必须为静态方式，使用static修饰验证方法接受一个参数control，类型为，就是类的实例对象的类型。如果验证成功，返回null如果验证失败，返回一个对象，key为验证标识，value为true，表示该项验证失败验证器是一个ts类，所以要定义到一个.ts文件里面接收的参数类型是返回的参数类型是方法名和标识名保持一致这个类需要被组件引入，所以需要使用export导出import {
2023-05-16 17:18:14
423
原创 Angular学习笔记四之依赖注入与服务
在这段代码中，Car类里有一个私有属性engine，是Engine类的实例对象，此时这个属性的创建过程就会严重依赖Engine类的定义，如果Engine类需要接受的参数个数或类型发生改变，就需要立马修改engine属性的创建代码，代码的耦合度过高。在类的外部创建engine，这样Car类就不要管engine的传参问题，就不需要与Engine类耦合了。对象的创建过程Angular内部已经帮我们实现好了，所以我们在使用服务时，不需要再次创建，只要在的参数列表中声明并且使用变量接收即可。
2023-05-04 17:25:15
166
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人