- 博客(55)
- 资源 (5)
- 收藏
- 关注
RSS订阅原创 听说vue3使用位运算进行类型判断？
背景最近在看vue3的源码，发现vue3中有一个块的逻辑是判断 ELEMENT ，STATEFUL_COMPONENT ，TEXT_CHILDREN，ARRAY_CHILDREN这四种类型中的某种是否存在；但是它使用的是位运算来判断的，对此，进行一些个人的解读，欢迎指正。常规方法对于这种，我们通常肯定是使用对象来进行判断，比如export const type = { ELEMENT: false, STATEFUL_COMPONENT: true, TEXT_CHILDREN: fal
2022-05-24 14:53:04
814
原创 vue中a-select设置suffixIcon无效的解决方案
背景antd是一个很好用的UI组件库其中有一个a-select组件我们现在想改后面这个icon。官方文档给了一个suffixIcon来进行控制，但是设置之后发现没有生效解决方法先设置 :showArrow="true"， 因为你得先有这个icon，才能再改再写入icon slot<a-select default-value="lucy" style="width: 120px" disabled :showArrow="true"> <a-icon sl
2022-01-18 20:58:18
2224
原创 box-sizing导致的文本不垂直居中问题
box-sizingcontent-box 是默认值。如果你设置一个元素width:100px，那么这个元素的内容区会有100px 宽，并且任何边框和padding的宽度都会被增加到最后绘制出来的元素宽度中，所以元素的总高度会大于100px。border-box 告诉浏览器：你想要设置的边框和padding的值是包含在width内的。也就是说，如果你将一个元素的width设为100px，那么这100px会包含它的border和padding，内容区的实际宽度是width减去(border + pad
2021-11-02 10:58:18
405
1
原创 node.js实现一个图片压缩小工具
背景项目里面经常需要将某个图片压缩到对应目录下，基本上都是使用网站tiny-png来实现。但是这里有一个问题，就是每次都得反复的操作文件来将图片从一个目录移到另一个目录，非常的不方便，所以就萌生了一个想法，我能不能实现一个小工具，一条命令直接图片压缩并移到指定目录呢；于是，就有个这个项目。下面讲一下详细的实现步骤项目准备，tinify库在查找合适的图片压缩包时，我发现了tinify,即tiny-png官方给出的一个图片压缩包。这个是将图片传到tiny-png的服务器上，然后再将压缩后的图片返回给
2021-08-24 15:04:29
732
原创 面试大概率被问到：ajax是什么...
先来看看什么是HTTP超文本传输协议（HTTP，HyperText Transfer Protocal ），是简单、可靠的互联网文件传输协议。HTTP的传输，不是一个文件整体传输，而是把一个大的文件，分成一个个报文(message)，然后传输的。所以我们的浏览器渲染页面，一块一块加载的，图片是一条一条显示的。的确，一个jpg图片，也是通过多个报文回来的。每个报文都会进行校验，保证这个报文里面的内容是准确的、和服务器一致的。所以HTTP是可靠的，文件不会发生任何偏差。HTTP是无连接的，就是你访问一个
2021-08-16 17:47:21
88
原创 ES6模块和CommonJS区别，终于搞懂了
ESMES6 模块的设计思想是尽量的静态化，使得编译时就能确定模块的依赖关系，以及输入和输出的变量。因为ESM是静态化的，所以在运行前的编译阶段就可以确定模块关系，从而进行一些模块之间的操作，比如treeshaking等等CMDCommonJS 只能在运行时确定这些东西。比如，CommonJS 模块就是对象，输入时必须查找对象属性。比如const a = 'func'； const func = require('./test/'+a+'.js'), 这个括号里面是可以放表达式的！！表达式 只
2021-07-15 15:01:52
2389
原创 CSS选择符大全，你学会了吗
1. * test这个是最常见的通配符，表示匹配所用东西。最常用的示例 * { margin: 0; padding: 0; }表示取消所有元素的margin和padding 2. # testid选择器， 配合id使用。使用时要注意id的唯一性。示例<div id='test'> <div/><style> #test{ border: 1px solid red}</style/&
2021-07-15 10:14:24
353
原创 前端必备，从零开始完成一个node命令行工具
前言node.js 作为一种服务器语言，其拥有很多底层操作的api，比如文件写入，http服务器等模块。同时其语法和js几乎一直，所以作为前端的我们，可以运用这些东西帮助解决一些开发中的实际问题。前置知识每当shell新开启一个会话时，shell都会生成environment即环境变量，environment里都是些定义系统属性的变量。命令行输入 env即可查看环境变量很多程序都会用到这里的变量，比如nvm会用这里的NVM_NODEJS_ORG_MIRROR=https://nodej
2021-06-20 16:10:41
2734
原创 【参透浏览器原理】1—— 为什么明明浏览器只打开了一个页面，却出现了多个进程
前言这个专题主要是结合对浏览器原理的学习而产出的一些笔记，作为一个职业前端，浏览器就像是我们的一个宝贝盒子一样，我们必须知道你们有些什么，以及为什么会有这些东西的存在，这样我们才能在日常的编码过程中更加游刃有余～废话不多说，一路火花带闪电 ， 我们开始啦浏览器有哪些进程首先我们打开任务管理器（活动监视器），来看看打开一个chrome标签页会有哪些进程吧。...
2021-06-20 11:53:16
2027
原创 Vim编辑器的使用技巧和快捷方式
vim使用手册常用操作删除命令：复制剪切命令：替换和取消命令：搜索替换命令：保存和退出命令：vim使用技巧定义快捷键常用操作删除命令：dd: 删除光标所在行,ndd： 删除n行D: 删除光标所在处到行尾内容dG: 删除光标所在处到文件末尾内容复制剪切命令：yy: 复制当前行nyy: 复制当前以下n行dd： 剪切当前行ndd:
2021-06-09 20:23:23
2121
2
原创 学习使用Vue必须掌握的开发技巧
vue必须掌握的6个开发技巧动态指令参数重用相同路由的组件侦听子组件的生命周期样式穿透强大的render函数长列表性能优化动态指令参数将指令参数动态传递给组件。假设你有一个按钮组件，并且在某些情况下想监听单击事件，而在其他情况下想监听hover事件。这就是动态参数的使用场景了：<template> ... <aButton @[someEvent]="handleSomeEvent()" />...</template><script> .
2021-06-07 20:47:41
544
3
原创 【offer收割机】—— 前端详细学习路线和学习方法
前言众所周知，前端目前在国内高校还没有相应的课程，所以大家都得靠自己学，（当然也可以去培训机构 但是有点贵了）。万事开头难，很多小伙伴刚开始都不知道要学什么或者怎么学。所以在这里本泡泡作为一个大学自学前端并且也校招拿到不错offer的优质自学带师 ，给大家分享一下详细的自学路线和方法。小白初入门首先入门肯定就是咱们的前端三件套了——HTML CSS JS针对HTML，大家可以高手进阶前端最重要的技术肯定就是js了，所以进阶主要就是针对js基础的技术进行一些深入js 你不知道的js 高级程序
2021-06-01 11:25:54
632
原创 【音视频入门基础】—— 声音
声音的概念正常的声音是模拟信号，即连续变化的信号。图形类似于三角函数的图像。就像下面这样：但是，总所周知。计算机传输都是0和1，显然上面这种连续的数据跟01压根不沾边。所以，就需要将它转称为01数据，也就是数字信号。 模数转换模数转换，也就是将模拟信号转化成数字信号。这一切都是通过A/D转换器（ADC）来实现的。ADC具体的原理我们不做过多分析。重点看一下采样问题。采样是一种微积分的思想，就是对横坐标取微分（当然实际中不会趋近到无穷），对y值取样。如
2021-05-23 12:15:14
358
原创 css中top和bottom同时为0有什么用
前言一个绝对定位的元素，一般上下、左右都只指定一个。那么同时指明top和bottom，有什么用呢。作用如果没有其他属性影响(没有指明height)，那么这个元素会拉伸顶部和底部去满足top和bottom都为0的状态。其实设置bottom: 0; top: 0; 和 设置height:100% 差不多，都是自适应高度。不过如果同时又设置了高度，那么bottom属性将会被忽略。同理。right和left也是这样。有什么应用呢隐藏滚动条，有时候内容太长会出现滚动条，可以将它隐藏.outer
2021-05-19 11:51:01
4059
原创 【offer收割机】——如何找到一份心仪的前端开发工作呢
前言之前我把找实习需要的知识储备（也就是面经啦），做了一个总结。但是我觉得那个还不够详细，它属于是知道要找实习了，准备面试了，才能起到作用。但是对于那些想找实习但是不知道怎么找的同学，就需要看看这份手册啦～保证看完之后，直接打开任督二脉，思路清晰，我是钻一。话不多说，下面开始干货：ps:以下所有内容都是根据我个人找实习的经历撰写的，内容有不适之处，还望大家多多指正～怎么找到一份优质大厂实习呢前言当你有找实习的想法当你知识储备够了之后当面试机会来了当面试过了之后 &nb
2021-05-12 20:12:43
590
4
原创 【bug霸哥日记】——做个禁止粘贴的功能，把自己秀哭
前言今天搞个特别简单的功能，花了我一下午时间。找到bug之后，我被我自己快蠢哭了，想掐死自己需求，输入框字数限制： 当粘贴的文本加上已经存在的文本 总长度 超过预设之后，禁止粘贴。好了，就是这么一个简单的需求。 说说思路就是监听paste 事件，获取要粘贴的文本。然后判断长度，超过了就event.preventDefault()，禁止粘贴。但是呢，这个死活不起作用。哎，就是玩儿！ 就是没用。return false也没用。然后我打印了defaultPrevente
2021-05-11 21:29:58
169
原创 mac安装node系列：nvm、npm、nrm
node 系列安装nvm 管理 nodejs 和 npm 的版本。npm 可以管理 nodejs 的第三方插件。nrm可以管理源。按照如下顺序安装nvm安装nvmcurl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.1/install.sh | bash配置终端输入：export NVM_DIR="$HOME/.nvm"[ -s "$NVM_DIR/nvm.sh" ] && . "$
2021-04-28 19:50:24
2293
原创 mac使用攻略，一些小tips
前言这篇文章主要就是记录一下macos的一些实用技巧会持续更新如何使用命令macos 是基于unix的，所以命令上其实和Linux差不多，所以命令的使用可以看我博客的Linux文档如何用终端打开直接 命令行输入open 文件名就会用默认的打开方式打开文件...
2021-04-28 10:14:23
123
原创 webpack stats
什么是statsstats 主要包含了webpack在编译源代码时的一些模块统计信息。这些统计数据可以用来分析应用程序的依赖关系图，也可以用来优化编译速度。webpack 有一些特定的预设选项给stats 输出：预设可选值描述‘errors-only’none只在发生错误时输出‘errors-warnings’none只在发生错误或有新的编译时输出‘minimal’none只在发生错误或新的编译开始时输出‘none’false没有输出‘no
2021-04-22 16:20:36
1648
原创 手写webpack插件，小白入门 —— md文档转成html
Compiler 模块是 webpack 的主要引擎，它通过 CLI 传递的所有选项， 或者 Node API，创建出一个 compilation 实例。 它扩展(extend)自 Tapable 类，用来注册和调用插件。const { readFileSync } = require('fs');const { resolve } = require('path');const {compileHTML} = require('./compileHTML')class MdToHtmlPlugin
2021-04-21 15:37:30
258
原创 生成器和迭代器，和可迭代对象
什么是生成器它允许你定义一个包含自有迭代算法的函数， 同时它可以自动维护自己的状态。生成器函数使用 function*语法编写。 最初调用时，生成器函数不执行任何代码，而是返回一种称为Generator的迭代器。 通过调用生成器的next() 方法消耗值时，Generator函数将执行，直到遇到 yield关键字。可以根据需要多次调用该函数，并且每次都返回一个新的Generator迭代器，但每个Generator只能迭代一次。Generator迭代器对象可以通过重复调用next（）显式地迭代。 在
2021-04-21 11:40:27
78
原创 vue如何使用mixin做UI库
什么是mixin混入 (mixins)： 是一种分发 Vue 组件中可复用功能的非常灵活的方式。混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被混入该组件本身的选项。比如，UI组件就是一个很有代表性的可复用的组件，所以今天就写一个mixin做的button组件。项目开始比如说我要在App.vue中使用一个button按钮。为了项目整体同一，并且高复用，就需要把button抽离成一个组件。/src/App.vue可以使用mixin，将button组件引入即可/src/
2021-04-19 21:05:02
232
2
原创 webpack实现ssr服务端渲染
正常情况下CSR直接在客户端用render渲染出来即可。可以看出，所有的渲染逻辑都是由打包出来的js文件完成，页面的整体框架是没有内容的，所以才说不以利SEO。（页面都没有东西啊，搜索引擎咋知道你页面是干嘛的）SSR逻辑将组组件输出成字符串将字符串输出到模板里面服务端返回模板项目结构SSR代码实现创建一个server端，写入配置/server/index.jsif(typeof window === 'undefined'){ global.window = {}}
2021-04-18 22:11:12
346
原创 git协同开发，如何发pr
步骤fork远程仓库git clone 本地仓库git remote add upstream 远程仓库origin 是本地仓库upstream 是远程仓库git checkout -b 自己的分支在自己的分支下开发git add .git commitgit pull 远程库 主分支 (很重要，要经常性的pull，保持自己代码始终是最新的版本)使现在开发的分支 即test 保持最新状态git push origin 自己的分支发pr
2021-04-18 16:22:00
271
原创 【ProseMirror学习笔记 3 】—— schema
schemaschema介绍node typesContent Expressionstodo groupMarksAttributesSerialization and Parsing schema介绍每个 Prosemirror document 都有一个与之相关的 schema. 这个 schema 描述了 document 中的的nodes 类型, 和 nodes 们的嵌套关系. 例如, schema 可以规定, 顶级节点可以包含一个或者更多的 blo
2021-04-17 10:40:25
927
原创 【ProseMirror学习笔记 2 】——document对象
ProseMirror documentdocument 基本结构document特性 —— 分裂Node类型属性介绍方法介绍查找node复制粘贴和拖拽——slicedocument 基本结构ProseMirror document 是树形结构。一个 Porsemirror 的 document 是一个 node 类型, 它含有一个 fragment 对象, fragment 对象又包含了 0 个或更多子 node.如图 都是一层层的嵌套
2021-04-16 20:41:14
739
原创 【ProseMirror学习笔记 1 】—— 基本属性
基本概念介绍最简单的编辑器ProseMirror 提供了一整套构建富文本编辑器的工具和概念, 它使用的用户界面受 所见即所得 概念的启发。Prosemirror 的核心模块并不是开箱即用的, 在开发这个库的时候, 我们坚持它的模块化和自定义程度的优先级高于简洁性四大模块：prosemirror-model 定义了编辑器的 Document Model, 它用来描述编辑器的内容.prosemirror-state 提供了一个描述编辑器完整状态的单一数据结构, 包括编辑器的选区操作, 和一个用来处
2021-04-16 10:15:45
1615
原创 【前端学习--基础篇】CSS入门详细指南
目录1、CSS简介2 属性2.1颜色表示2.1.1单词表示法2.1.2 rgb()表示法2.1.3 十六进制表示法2.2文字相关属性2.2.1 font-size2.2.2 line-height（font属性）2.2.3 font-family字体2.2.4 font-weight 加粗（！）2.2.5 text-decoration属性2.2.6 ibu3、选择器3.1基本选择器3.1.1基本选择器3.1.2 id选择器3.1...
2021-04-16 08:59:18
747
原创 webpack多页面打包配置方案
多页面应用打包方案 先来说说什么是单页面应用和多页面应用：单页面应用（SPA），通俗一点说就是指只有一个主页面的应用，浏览器一开始要加载所有必须的 html, js, css。所有的页面内容都包含在这个所谓的主页面中。多页面（MPA），就是指一个应用中有多个页面，页面跳转时是整页刷新。 单页面的优点和缺点：优点：用户体验好，快，内容的改变不需要重新加载整个页面，对服务器压力较小。前后端分离，比如vue项目完全的前端组件化，前端开发不再以页面为单
2021-04-04 11:21:53
327
原创 async/await中返回promise遇到reject报错问题
先看代码成功的function test(params) { return new Promise((resolve, reject) => { if (params.flag) { resolve(params.info); } else { reject("err"); } });}let data = { flag: true, info: 1 };async func
2021-04-03 10:42:42
2606
原创 js中import 和require 出现@ 是什么意思
含义表示指定路径名，可以由webpack配置如何配置可以在webpack resolve 中配置Resolve配置webpack如何寻找模块对应的文件。webpack内置JavaScript模块化语法解析功能，默认会采用模块化标准里约定好的规则去寻找，但你可以根据自己的需要修改默认的规则。resolve.alias配置项通过别名来把原来导入路径映射成一个新的导入路径。 配置之后import Button from '@/components/button'导入时
2021-04-02 17:18:56
3997
原创 超详细前端笔记——涵盖html css js ts react vue webpack nodejs canvas git
介绍本人是一名菜鸡前端攻城狮，大学期间自学前端，踩过不少坑。平时有记笔记的习惯，所以积累了许多笔记和各种小demo。挑选了一部分认为比较有用的东西发出来，希望能给大家带来一些些帮助。东西太多，所以只能传资源了，大家可以自行下载哈。=>>>>>>前端资源集合，戳这里！！！！！！内容包括：html css js ts react vue webpack nodejs canvas git部分资源截图cssjsreactnode.js 
2021-04-02 10:55:26
170
原创 vue.config.js 配置代理，解决跨域
为什么要配置代理？因为有跨域问题，要使用代理服务器发送请求。比如：https://ynuf.aliapp.org/service/um.json?_bx-v=2.0.31 这个接口.本地 http://localhost:8080/向它发送请求，就会发生跨域所以要把本地请求代理到https://ynuf.aliapp.org上配置代理前，访问结果是使用vue.config.js 进行配置vue.config.jsmodule.exports = { devServer: { p
2021-04-01 18:05:58
973
原创 了解vue-router 路由守卫的基本使用
1、路由守卫是什么导航守卫就是路由跳转前、中、后过程中的一些钩子函数。在这个函数中，你可以操作一些其他的事件，这就是导航守卫。包括全局守卫、组件内的、单个路由独享三种 具体这三个应该写在哪里 ，如下:全局守卫写在main.js中：组件内守卫写在组件里面中：的英文缩写。/dev这个目录对所有的用户都十分重要。因为在这个目录中包含了所有Linux系统中使用的外部设备。但是这里并不是放的外部设备的驱动程序，这一点和windows,dos操作系统不一样。它实际上是一个访问这些外部设备的端口。我们可以非常方便地去访问这些外部设备，和访问一...
2021-03-29 10:01:00
756
1
原创 react-native 出现unexpected element ＜queries＞ found in ＜manifest＞错误，解决方法
问题描述引入 react-native-image-crop-picker v0.35.0时，出现错误如下：同时，客户端报错，openPicker not defined;解决方法需要升级gradle版本以能够识别新的查询元素。buildscript { ... dependencies { classpath("com.android.tools.build:gradle:3.5.4")//升级到补丁版本 }}AndroidGradle插件需要了解
2021-03-07 16:35:14
422
原创 promise封装函数
简易封装没有传参数的情况时，可以像这样let sleep100 = new Promise((resolve,reject) => { setTimeout(() => resolve(true), 100)})resolve(true) 相当于return，直接把状态改成fullfilled并结束掉有参数传入时，可以再包一层传入参数await后面接一个会return new promise的函数并执行它await只能放在async函数里(async function(
2021-03-05 14:15:03
872
原创 react-native Image组件source传值
方法一 加载当前工程文件夹下图片使用require<Image source={require('./images/banner.jpg')} /> 方法二 加载外链图片使用uri属性<Image source = {{uri: 'http://facebook.github.io/react/img/logo_og.png'}} /> 注意这里 不是url 而是 uri巨坑！！！！！...
2020-12-26 17:24:19
570
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人