- 博客(154)
- 收藏
- 关注
RSS订阅原创 vue注册全局filters属性却不能被ts正常检测
前因明明通过以下代码注册了全局的$filters对象，但是在调用时却不能被ts检测 app.config.globalProperties.$filters = { name: 'xy' }解决原因是我使用了volar插件，它会对template里面进行ts验证，因此需要写以下声明文件来写明类型，于是在main.js中加入以下代码，重启编辑器，成功解决declare module '@vue/runtime-core' { interface ComponentCustomP
2022-01-10 11:42:36
1327
2
原创 git pull --rebase origin master后出现文件丢失
前因由于新建的远程仓库只有一个redme文件，而在本地仓库与远程仓库关联后，想要进行提交时出现以下错误上网查询后得知原因：本地没有redme文件，需要首先将远程redme文件拉取并合并git pull --rebase origin master可是回车后蒙了，之前的代码文件都没了~解决1.查询git记录git reflog2.选择之前的记录这里跳转到记录为6da61d0的位置，具体看你记录情况git reset --hard 6da61d0成功回到原来状态...
2022-01-09 15:10:43
1421
3
原创 Vue3+Electron创建项目
文章目录1.vue cli创建项目2.安装引用electron1.vue cli创建项目vue create 项目名可以选择配置的方式，这里有默认的配置，也可以自己配置这里我选择自己配置，回车确认，进入配置选项这里我选择Babel编译、TypeScript编写、router、vuex、linter、formatter代码规范再选择版本，当vue3接着连环问：是否需要class风格的装饰器？一般选择no使用babel编译ts吗？选择yes，babel是更好的选择使用history模
2022-01-09 14:00:59
991
4
原创 角色权限分配与路由配置
概述在最近的后台管理系统中，涉及到了角色权限分配的问题，这也是对于管理系统中较常见的需求，往往需要前后端配合来实现不同角色有不同权限。权限分配主要采用基于角色的权限分配模型（RABC）通过用户登录后，后端返回用户的个人信息，其中包括了用户对应的角色，再通过对应的角色去获取对应角色的所有权限，这样前端就能获取到对应登录角色的功能菜单了。这主要是后端的配置。路由配置针对传过来的菜单信息，前端需要进行对应的路由注册，可是怎样进行注册显得更合理更优雅呢。方案一：直接配置所有路由组件（不推荐）当
2021-12-22 18:37:28
2192
原创 HTML系列
1.前言在面试中，虽然JavaScript考察更为深入，但是作为前端三剑客，HTML也是前端的核心之一，所以本系列列举了相关常见题型待大家参考与学习。2.HTML5H5代码结构<!DOCTYPE HTML> //声明html页面<HTML> //html开标签 <head> //页面头部 &l
2021-12-21 15:07:54
1300
原创 CSS系列
前言在面试当中，其实也有许多公司喜欢考察CSS相关的知识，像盒子模型、垂直居中的方式、清除浮动的方式，以及要求实现一些小案例等。接下来主要说明经常会提问的以及在我面试中遇到的一些CSS问题。高频考点1. 盒子模型网页布局的核心本质：即利用CSS摆盒子所谓盒子模型：就是把HTML页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器。封装周围的HTML元素包括：边框、内边距、外边距、和实际内容。盒模型分为标准盒模型 和 IE盒模型标准盒模型(默认) ：设置：box-sizing
2021-12-21 15:07:14
391
原创 JavaScript基础
前言本篇主要归纳在面试中关于JavaScript高频考点，如有不对欢迎留言讨论。JavaScript基础一、数据类型1.类型的种类及区别基本数据类型： Number、String、Boolean、Undefined、Null、Symbol(ES6新增)、BigInt(ES10新增)引用数据类型： 包含以下三类1.基本引用类型：Object、Array、Function、Date、RegExp2.基本包装类型：String、Number、Boolean3.单体内置对象：Global、Mat
2021-12-21 15:06:06
969
原创 手写系列：JavaScript基础总结
前言本篇主要归纳自己写过的一些JavaScript代码，它包含了一些实现方式，如去重的方式，数组扁平化的方式，防抖节流、发布订阅等，又或者包含了一些源码，new、call、apply、bind、数组方法等，统一将这些作为一个系列。一、实现系列1.数组去重1.1 set由于set的特点：所有元素值都是独一无二的，因此能用来去重，也是最简单的方式function removeRepeat(arr) { return [...new Set(arr)]}1.2 indexOf通过ind
2021-12-21 14:56:52
227
原创 Vuex+Typescript冲突解决
概述由于vuex对于typescript的支持不太友好，其中会遇到一系列的问题，但是也可以利用一些方法进行解决，虽然现在pinia支持更好，但是了解这些解决方式也可以更好的理解它为什么不友好，也可以方便之后避免与解决。所以本篇用来归纳vuex+ts的冲突，因为目前还在学，后续不定时补充1.子模块的状态类型限制如下结构，store仓库下有个子模块login，内部有着和根模块一样的类型文件和导出文件对于项目需要用到多模块时，通过store可以来获取根模块的state类型，而当需要用到子模块时，往往需
2021-12-20 18:29:27
633
1
原创 封装并发请求限制
概述对于存在有请求数限制的需求，如小程序刚发布时的5并发、后面的10并发，我们需要进行封装，通过传入所有请求最后能高效便捷控制请求数并返回所有的结果。实现主要的思路：通过控制当前运行的请求数最大为限制数，直至队列中所有请求完成封装一个TasksHandle类，传入异步任务数组、最大限制长度、以及最终结果的回调函数。将所有请求存入待执行队列，通过递归的形式取出请求，并实时控制当前请求的个数，将结果存入数组，当所有请求完成触发回调函数。 class TasksHandle {
2021-12-19 15:36:57
463
原创 项目规范(六)：axios多级拦截
概述在开发中，我们可能需要使用axios来请求数据，为了方便数据的发送、接收、拦截，我们往往需要进行封装，一个合理的封装设计有利于代码的维护与延申。设计需求1.可以对所有请求进行操作2.可以对含有多种BASE_URL的请求进行各自操作3.可以对唯一请求进行各自操作即以上，所有请求包含了各个BASE_URL、各个BASE_URL又包含了各自的具体请求，需要在以上三个阶段对各自的请求进行操作，比如请求响应拦截等。设计实现目录结构环境配置即可根据不同环境下适应不同的配置，详情可看项目规
2021-12-12 15:34:33
2560
原创 项目规范(五)：环境变量
概述在开发中，有时候需要根据不同环境来设置不同的环境变量，常见的环境变量有以下三种：开发环境：development生产环境：production测试环境：test主要以下三种方式来实现区分环境变量1.手动修改不同的变量这种方法比较笨重，需要人为的去根据环境改变而更改对应的变量，所以不太推荐使用export const BASE_URL = 'http://www.xy.org/dev'// export const BASE_URL = 'http://www.xy.org/pro
2021-12-06 10:09:28
303
原创 项目规范(四)：git 提交规范
概述在使用git提交代码时，如果多人开发，为了保证提交到仓库的代码足够规范，所以需要进行一些配置来实现commitizen：规范提交类型在我们提交代码时，可能是做了不同类型的更改，比如提交新功能，或修改bug，又或者重构代码等，通过commitizen有助于我们直接选择类型提交。Type作用feat新增特性 (feature)fix修复 Bug(bug fix)docs修改文档 (documentation)style代码格式修改(white-spac
2021-12-05 17:45:13
1386
原创 项目规范(三)：ESLint检测代码
概述ESLint可以帮助我们检测代码书写的规范，有利于统一代码风格。配置（.eslintrc.js）根目录创建 .eslintrc.js 文件module.exports = { root: true, env: { node: true, }, extends: [ "plugin:vue/vue3-essential", "eslint:recommended", "@vue/typescript/recommended", "@vue/
2021-12-05 17:08:06
1010
原创 项目规范(二)：prettier格式化
概述Prettier 是一款强大的代码格式化工具，支持 JavaScript、TypeScript、CSS、SCSS、Less、JSX、Angular、Vue、GraphQL、JSON、Markdown 等语言，基本上前端能用到的文件格式它都可以搞定，是当下最流行的代码格式化工具。安装首先需要安装开发环境的依赖npm install prettier -D基础配置（.prettierrc）根目录创建 .prettierrc 文件{ "useTabs": false, "tabW
2021-12-05 16:57:09
1191
原创 项目规范(一)：.editorconfig配置
概述.editorconfig配置有助于为不同 IDE 编辑器上处理同一项目的多个开发人员维护一致的编码风格。一般配置：# http://editorconfig.orgroot = true[*] # 表示所有文件适用charset = utf-8 # 设置文件字符集为 utf-8indent_style = space # 缩进风格（tab | space）indent_size = 2 # 缩进大小end_of_line = lf # 控制换行类型(lf | cr | crlf)
2021-12-05 16:40:10
959
原创 Vue3：Composition API
文章目录前言什么是Composition APIsetup函数主要API1.Reactive2.Ref3.readonly4.Reactive判断相关5.toRefs6.toRef7.ref相关8.customRef9.computed10.watchEffect11.watch前言在vue2中，我们编写组件是通过Options API的方式，将对应的属性写在对应的模块中，如data、methods、computed、watch、生命周期的勾子函数。但是其有一个很大的缺陷：由于对应代码会被拆分到各个属性
2021-11-06 09:18:12
191
原创 Vue源码：抽象语法树
文章目录概述实现概述在vue模板编译的整个过程，我们可知如下template字符串生成抽象语法树ast，ast通过渲染函数生成虚拟节点，最后才生成真实UI。本篇主要是关于template转换生成抽象语法树，关于后续过程可移步虚拟DOM和DIFF算法实现设置移动指针，判断剩余字符串是开始标签还是结束标签或文字，通过两个栈来保存标签名与容器，遇到开始标签则标签入栈1，生成容器入栈2，遇到文字填充栈2顶内容，闭合则将栈2顶内容移入栈顶前一容器。parse.jsimport parseAttrStr
2021-10-28 15:50:33
458
原创 Vue源码：数据响应式原理
文章目录概述数据劫持发布订阅流程概述在vue中，我们可以通过改变data内的数据属性，从而对应的视图组件也会产生更新，这涉及到了vue的数据响应式原理。其机制主要是通过数据劫持结合发布订阅模式来实现。数据劫持这里主要是说vue2.0的劫持方式，通过Object.defineProperty方法来对data内属性的getter、setter方法进行劫持发布订阅多个订阅者观察同一个目标，若目标内对应使用过的数据发生更改，则通知对应的订阅者调用自生更新方法进行更新流程此图为按个人理解画的流程图
2021-10-25 21:50:01
130
原创 Vue源码：虚拟DOM和DIFF算法
文章目录简介虚拟DOM简介虚拟DOM是用对象的形式来模拟DOM的结构，通过虚拟DOM前后的对比来动态更新对应的真实DOM，从而大大提高DOM更新的效率。DIFF算法是进行虚拟DOM对比的一种高效算法虚拟DOM一个虚拟DOM就是一个对象，用来表示一个DOM节点的结构，其属性有sel：标签名data：标签属性（class、id、props、src等）children：子...
2021-10-22 16:51:01
144
原创 Vue源码：mustache模板解析
文章目录什么是模板引擎数据变为视图的方法手写mustache运行流程什么是模板引擎模板引擎是将数据变为视图最优雅的解决方案，如下可以通过左侧数据最终在网页上渲染成右侧dom视图数据变为视图的方法历史上出现的数据变为视图的方法有四种：纯DOM法、数组join法、ES6反引号法、mustache模板引擎法，可以说越来越优雅。如下数据采用各种方法渲染 <div> <ul class="list"> </ul> <
2021-10-16 23:56:27
192
原创 React:新旧生命周期及其对比
文章目录概述生命周期（旧）挂载时更新时父组件rendersetStateforceUpdate卸载时生命周期（新）挂载时更新时卸载时新旧生命周期的对比概述不管是vue还是React，它都有一个生命周期，它描述了组件从创建到销毁的整个生命过程，其中含有有很多的钩子函数连接而成。这里主要讲React新旧生命周期，以及他们的对比生命周期（旧）周期图如下其中左边是挂载时，右边是更新时，下边是更新时挂载时可以看出挂载时的更新数据顺序依次如下1）constructor：构造器2）component
2021-07-09 23:14:24
485
4
原创 React：组件实例三大属性之(refs)
文章目录概述使用方式1.String类型的Refs(过时)2.回调形式使用概述作为react实例组件三大属性之一，refs主要用来获取真实DOM元素或者组件实例的属性。使用方式1.String类型的Refs(过时)String类型的使用相对是很容易理解的，但是其存在一些问题已经过时不再推荐使用。1.通过ref=“字符串名”进行ref声明2.通过this.refs.字符串名 获取 class MyComponent extends React.Component{ r
2021-07-08 11:30:57
379
1
原创 编译原理：期末总复习
文章目录第1章：引论1.1 什么是编译程序1.2 编译过程和编译程序的结构1.2.1 编译过程概述1.2.2 编译程序的结构1.2.3 编译阶段的组合第2章：文法和语言2.2 符号和字符串2.3 文法和语言的形式定义2.4文法的类型2.5 上下文无关文法及语法树2.6 句型的分析2.6.1 自顶向下的分析方法（推导过程）2.6.2 自底向上的分析方法（规约过程）2.6.3 句型分析的有关问题2.7 有关文法实际应用的一些说明2.7.1 有关文法的实用限制第3章 词法分析3.1.2 词法分析程序的输出3.3
2021-07-05 01:31:27
20167
9
原创 React：组件实例三大属性之(props)
????个人理解，如有不对，欢迎讨论文章目录概述基本使用传入类型限制默认值写入类组件内部函数组件使用props概述react组件实例中共有三大属性，分别为state、props、refs。其中props，是properties的简写，字面意思为“属性”，在组件上绑定的属性都在props里。作用： 通过标签属性从组件外向组件内传递变化的数据注意： props属性是只读的，也就是不能修改，只能读取基本使用 <!-- 创建容器标签 --> <div id="root
2021-06-27 15:35:35
302
原创 React：组件实例三大属性之(state)
????个人理解，如有不对，欢迎讨论文章目录概述进步证实使用标准使用简化使用概述react组件中共有三大属性，分别为state、props、refs。其中state，字面意思为状态，它就是用来保存数据的状态，通过在state里绑定数据，数据就会渲染显示在UI上，因此我们想要动态绑定数据，state是必须要用到的。进步证实我们知道在ES6类创建的组件中，render方法在类的原型对象上，我们打印其内部this可以看到其中就存在state属性，默认值为null使用可以通过标准和简化来使用s
2021-06-26 23:24:36
188
原创 React：组件理解及定义
文章目录概述自定义组件概述我们知道通过组件化的开发，可以划分复杂的代码，使得代码结构更加清晰，且便于代码的复用与后期的维护，那么在react中是怎么声明组件并调用的呢。自定义组件在react中，定义组件的方式有两种，分别是1.工厂函数组件（简单组件）2.ES6类组件（复杂组件 ）1.工厂函数组件（简单组件）适用于简单组件，也就是不需要state管理的组件工厂函数组件是通过函数声明来构造并return返回jsx代码，如下<script type="text/babel">
2021-06-26 22:19:29
135
原创 React: JSX
文章目录概述基本使用基本语法规则概述JSX全称为 JavaScript XML，它是由react定义的一种类似于XML的JS扩展语法：XML+JS，用来创建react的虚拟DOM对象。基本使用<script src="../js/babel.min.js"></script><script type="text/babel"> // 创建虚拟DOM const VDom = "<div id="title">Hello World&
2021-06-26 12:54:02
105
原创 React：虚拟DOM简介及创建
文章目录虚拟DOM概述渲染虚拟DOM创建虚拟DOM的两种方式虚拟DOM概述1.React提供了一些API来创建一种特别的js对象，这个对象也就是常说的虚拟DOM，如以下就是通过React.createElement创建的虚拟Domconst VDom=React.createElement("div",{id:'title'},"Hello World")2.虚拟DOM对象最终都会被React转换为真实的DOM3.在React中，我们只需要操作react的虚拟DOM相关数据，react会转换为真
2021-06-26 10:25:52
257
原创 React：初识
文章目录写在前面关于React环境搭建写在前面近期准备直接学习React了，想着最有效的方法就是吸取经验咯，于是向学长请教，最终根据学长的推荐-技术胖（React学习路线-按此路线学习顺畅无比）来进行我的react学习，并会通过不断输出博客来巩固我知识以及方便后续回顾。关于ReactReact属于当前前端三大最火框架之一，它起源于facebook的内部项目，并于2013年进行了开源，现在已经推出React17版本。优点：生态强大：React的生态体系好，几乎所有开发需求都有成熟的解决方案
2021-06-25 16:02:29
156
2
原创 JavaScript：深入Undefined
文章目录概述Undefinedvoid（）概述我们都知道 undefined 是JavaScript中的一个基本数据类型，字面意思称其为“未定义”，然而其实它还有许多特别的地方需要我们去有所了解。Undefined1.Undefined既是基本数据类型，也是原始值数据很容易理解，我们也经常数据赋值时赋值为undefinedlet a=undefined;console.log(a);//undefined若一个数据没有进行赋值，那么这个数据的数据类型为undefined，其值数据也为und
2021-06-19 00:45:11
146
3
原创 Git:同时关联多个远程仓库
文章目录写在前面步骤写在前面由于最近可能的不科学上网，导致进不了github，提交不了代码。也尝试了各种方法，比如更改hosts文件、更改DNS地址都没能成功，最后想着不能一棵树上吊死，github用不了那就再关联个仓库-gitee。步骤前提是已经建好两个远程仓库1.查看当前关联仓库git remote -v当前已经关联了github的远程仓库，仓库名为orgin，为了区分待会需要关联的gitee，这里先清空本地已经关联的仓库，并取名2.删除关联仓库git remote rm <
2021-06-07 16:52:52
344
原创 微信小程序（报错）：Cannot read property ‘name‘ of undefined TypeError
引入报错报错原因查文档发现，在引用微信小程序组件时，声明 properties 属性时需要声明其 属性类型properties: { isshow: false, },修改properties: { isshow: { type: Boolean, value: false }, },...
2021-06-04 12:20:03
4684
原创 微信小程序：scroll-view
文章目录1. 概述2. 基本使用遇到问题写在前面最近在用小程序时多次踩坑scroll-view，决定记录下1. 概述scroll-view是微信小程序里的一个视图容器，使用它我们可以实现滑动效果，通过设置scroll-x scroll-y可以实现横向滑动或竖向滑动，但是这其中也有些需要注意的问题。2. 基本使用 <scroll-view class="historyScrollView" scroll-x enable-flex> <view class="sr
2021-05-30 19:02:52
2697
原创 Vue3：Vue3的新面孔
文章目录概述源码上的变化性能上的变化API上的变化概述在2020年的9月19日，万众期待的Vue3终于发布了正式版，命名为“One Piece”。它也带来了很多新的特性：更好的性能、更小的包体积、更好的TypeScript集成、更优秀的API设计。在学习Vue3之前，先了解它与Vue2相比带来了哪些改变是很有必要的，因为对比起来的学习相信会更加的深刻。源码上的变化1.采用TypeScript重写在Vue2.x的时候，Vue使用Flow来进行类型检测；在Vue3.x的时候，Vue的源码全部
2021-05-25 21:40:54
120
原创 Vue：封装一个Toast
文章目录1.概述2.组件式封装3.插件式封装1.概述Toast（吐司），一个短期的弹出的会话，来告诉用户当前的操作是否合理。据说是因为烤吐司的时候会冒出一阵烟，然后过会烟又消失了，所以就是Toast这名字的由来。奇怪的知识增加了~2.组件式封装在vue项目中，我们可以通过组件的方式来简单的封装一个Toast，具体以下几个步骤。1.添加组件，写一个自己想要的风格这里我的例子就如上一个简单的弹窗2.在想用的组件内引用如上声明好的Toast子组件引用import Toast from "c
2021-05-21 15:18:06
920
7
原创 数据结构与算法(五)：哈希表
????如有理解不对，欢迎评论留言。文章目录1.概述2.哈希函数2.1 字符串转数字3.基本过程4. 封装哈希表在此之前，先简单概述下整个基本过程（深入链地址法为例）：插入：输入键值对，根据键key通过哈希函数生成对应的HashCode，将HashCode哈希化生成索引，在数组对应索引处的位置生成数组（链表）添加数组单元，存储键和值。删除：同理key转换为对应索引，直接往索引处查找1.概述哈希表在数据结构中有着非常重要的地位，因为它有着非常高的查找、插入、删除效率，这也是我们经常使用它的原因。
2021-05-15 15:08:09
228
原创 数据结构与算法(四)：集合
文章目录1.概述2.封装一个Set集合1.概述差不多所有的编程语言中，都存在集合结构。特点：1.集合通常是由一组无序的、不能重复的元素构成2.我们可以将集合看成一个特殊的数组，特殊在于它里面的元素没有顺序，也不能重复，没有顺序也意味着不能通过下标值进行访问。2.封装一个Set集合在ES6中其实已经包含了集合Set类，让我们试着封装以下 <script> function Set() { this.items = {}; // 1.添加数据
2021-05-15 10:36:13
71
原创 数据结构与算法(三)：链表
文章目录1.概述2.单向链表双向链表1.概述链表和数组一样，可以用于存储一系列的元素，但是链表和数组的实现机制完全不同。先来说说数组：要存储多个元素，数组可能是常用的数据结构，但它也有许多缺点，如：需要申请一段连续存储的内存空间，在大多数语言中还需要预先限定大小，所以当数组不能满足容量需求时还需要扩容。在数组开头或中间位置插入数据成本很高，需要进行大量元素的位移。所以要存储多个元素，还有一个选择就是链表相对于数组，它有以下优点：内存空间不必是连续的，可以充分利用计算机的内存，实现灵活
2021-05-15 10:12:12
83
1
原创 数据结构与算法(二)：队列
文章目录1. 概述2. 封装一个队列3. 实例(约瑟夫环)1. 概述与栈一样也是受限的数据结构，但是它是先进先出，后进后出简单理解：它是一根管道，从一端进入，另一端退出。如图：假如方向如图所示，从右往左走可知进入顺序123，退出顺序也是1232. 封装一个队列也以数组为例实现方法如下 function Queue() { this.items = []; // 1.向队列尾部添加一个或多个新的项 Queue.prototype.enqueue
2021-05-02 20:50:03
92
3
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人