![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端
文章平均质量分 55
胡聊前端
这个作者很懒,什么都没留下…
展开
-
String.prototype.matchAll called with a non-global RegExp argument
使用正则全局匹配MatchAll的解析与注意事项原创 2023-01-17 21:42:25 · 2278 阅读 · 1 评论 -
SOLID五种设计模式 & REACT === 更干净可读的代码
设计模式,是一个面试过程中经常问到的问题。其实有时候在我们日常开发当中,已经在使用了,只不过没有注意到而已 本文就通过面向对象编程中,最基本的五种设计模式S.O.L.I.D在React中的应用原创 2022-12-01 09:16:12 · 850 阅读 · 0 评论 -
ESlint Prettier Git 中使用 ignore忽略文件的规则解释
概述我们经常在项目中使用.gitignore去忽略文件,比如# .gitignore忽略项目依赖和打包文件node_modulesdist其实,除了Git,ESLint和Prettier同样提供了对应的ignore文件.eslintignore 为ESLint忽略指定文件.prettierignore 为Prettier忽略指定文件同Git,显然我们不希望对如node_modules依赖文件夹中的文件进行格式化或者做代码质量检查,所以忽略指定文件是必要的。幸运的是,ESLint和Pr原创 2022-04-18 14:47:37 · 6342 阅读 · 0 评论 -
mac系统下安装taro提示permission denied, mkdir ‘/usr/local/lib/node_modules/@tarojs...
如题,其实错误已经很明显了,即taro在初始化项目时需要在/usr/local/lib/node_modules/@tarojs目录下添加临时文件,但当前用户并没有权限,所以就是permission denied。我没百度,直接尝试了以下的命令chown -R xxxx /usr/local/lib/node_modules/@tarojs/其中xxxx是你的用户名,你可以用以下命名来查看whoami之后再次尝试初始化项目即可。但一般而言,临时文件不会存放到全局node_modules文件原创 2022-04-10 21:20:41 · 2364 阅读 · 0 评论 -
PhantomJS not found on PATH 关于PhantomJS安装问题汇总
注意是centos环境下遇到的各种问题标题中的错误是PhantomJS在全局环境变量中没有找到,所以npm install的过程中会自动安装。但过程比较曲折…我的成功解决办法npm install phantomjs@2.1.1 --unsafe-perm以上,之所以加--unsafe-perm是因为phantomjs安装过程会创建软连接到全局变量,而phantormjs是以spawn子进程的方式创建,没有这个flag,即便使用root用户安装,同样会提示Error: EACCES: permis原创 2022-04-08 09:49:19 · 3611 阅读 · 0 评论 -
TS error: property values does not exist on objectconstructor
翻译一下:Object对象上不存在values属性实际上,Object.values这个API属于ES2017即,此时要求,TS编译器需要包含ES2017以上的API,才能够编译通过。那么,默认情况下,TS会以Javascript(ECMAScript)哪个版本的API为基础呢?TypeScript includes a default set of type definitions for built-in JS APIs (like Math), as well as type definit原创 2022-03-24 13:14:06 · 2103 阅读 · 0 评论 -
在TypeScript使用React forwardRef
React forwardRef 用于获取子结点的DOM元素引用。当结合TS使用时,需要注意类型断言。import { forwardRef, useEffect } from "react";const Test = forwardRef<HTMLDivElement>((props, ref) => { useEffect(() => { console.log(ref.current); }, []); return <div ref={r原创 2021-10-09 15:29:53 · 5409 阅读 · 1 评论 -
Typescript Control flow analysis(控制流分析)与Type guard(类型守卫)
所谓Control flow analysis是指,typescript根据代码上下文的可以推断出当前变量类型。比如典型的类型断言:// 字符串存在substring方法// 数字存在toFixed方法const foo11 = (arg: string | number) => { // type guard (类型守卫) if (typeof arg === "string") { // 这里此时一定是字符串 arg.substring(0, 1); } else原创 2021-09-24 09:59:47 · 337 阅读 · 0 评论 -
npm link / yarn link的简单使用
当我们开发一个库的时候,不可能每次都去发布到npm或者私服,然后再去应用中安装。所以,无论npm或者 yarn都提供了link命令用以简化开发流程。以yarn为例,首先进入到库的根目录中,执行yarn link,值得注意的时候,当前目录显然应该有package.json文件,且应包含发布的名称和入口文件。比如:{ "name": "@scope/your-lib", "version": "0.1.0", "description": "", "main": "./dist/main.j原创 2021-06-22 12:53:41 · 3125 阅读 · 0 评论 -
There appears to be trouble with your network connection
出现这个问题的原因基本就是你的网速很慢。有以下几个原因:你的网速真的很慢。。。你使用了很慢的源,比如官方源 https://registry.yarnpkg.com/一些二进制文件需要在本机上编译,会直接从比如github下载,而不使用taobao源等,所以即使换了源,也会很慢。一般而言,要下载的包并不会很大,如果详细的报错信息指明是超时问题。可以修改下载包的超时时间。ESOCKETTIMEDOUT以上的错误就可以尝试通过以下的参数解决yarn install --network-tim原创 2021-05-28 12:01:18 · 3543 阅读 · 0 评论 -
关于Vue $forceUpdate的一些理解
在官方文档上仅仅有这一句话迫使 Vue 实例重新渲染。注意它仅仅影响实例本身和插入插槽内容的子组件,而不是所有子组件。我的理解是,所谓重新渲染,仅仅是指重新渲染DOM并与原有的DOM做code diff。对于有变更的,渲染到页面。结合官方解释,可以确认有两点不会发生:不会重新触发生命周期钩子函数,比如mounted不会渲染子组件的更新,即使子组件的props发生改变了。既然如此,什么场景下会需要使用呢?我们知道,在Vue中,响应数据发生改变后,会自动触发更新,但有一些条件,不会触发更新,原创 2021-05-26 11:03:10 · 1363 阅读 · 0 评论 -
Typescript error “Cannot write file xxx because it would overwrite input file
出现这个问题基本是因为开启了allowJs。因为allowJs即允许Typescript编译器去编译js。而编译之后的输出文件也就是xxx.js与源文件是一样的。所以就会报出“会覆盖输入文件”这样的错误。事实上,我们日常开发使用第三方打包工具比如webpack。编译输出是由ts-loader负责的,所以不必关心每个TS文件的输出。此时可以设置noEmits为trueNo Emit -Do not emit compiler output files like JavaScript source原创 2021-05-02 21:16:22 · 3421 阅读 · 0 评论 -
Javascritp Selection 与 Range
在操作文本框或者可编辑元素的时候,我们可能会使用到这两个api。在这里简单记录下区别。RangeSelectionSelection 指代的是用户选择的区域。该区域可以是多个,但目前谷歌并不支持选择多个,但Firefox应该是支持的。Range也是代表一段区域,这个这个区域是很抽象的,他不像Selection那样你看到了选择的具有蓝色背景的区域,那就是Selection。而Range可以通过js去构造并选择,而实际用户看不到任何选择。下图:selection是可以看到的Range既可以是上原创 2021-04-26 14:06:06 · 162 阅读 · 0 评论 -
Reflect.has / Reflect.ownKeys / in / getOwnPropertyDescriptor 等几种获取对象属性的区别
可以把获取属性的这些API分成几部分:均可以获取普通属性,这是必然的…是否可以获取不可枚举属性是否可以获取Symbol属性是否可以获取存在于原型上的属性而具备访问对象属性的api分为以下部分Reflect 静态方法(has() / ownKeys() 等)Object 静态方法(getOwnPropertyNames 等)in 操作符,包含直接使用或者for in 使用当然还有.操作符或者[‘key’]这样直接访问可能ES标准委也觉得这么多访问属性的api多少有些难为开发者。所以原创 2021-04-02 10:11:18 · 1026 阅读 · 2 评论 -
Javascript 获取图片的真实宽高和文件大小
获取图片的真实尺寸getImageSize(imgSrc) { return new Promise((resolve, reject) => { const newImg = new Image(); newImg.onload = () => { resolve([newImg.width, newImg.height]); }; newImg.onerror = (err) => { reject原创 2021-03-28 21:02:04 · 1189 阅读 · 0 评论 -
element-ui 按需加载情况下覆盖预置scss变量
element-ui的默认主题theme-chalk是通过scss预编译的,可以通过修改scss变量达到修改主题的目的。在项目中改变 SCSS 变量Element 的 theme-chalk 使用 SCSS 编写,如果你的项目也使用了 SCSS,那么可以直接在项目中改变 Element 的样式变量。新建一个样式文件,例如 element-variables.scss,写入以下内容:/* 改变主题色变量 /$–color-primary: teal;/ 改变 icon 字体路径变量,必需 */原创 2021-03-24 17:12:15 · 4923 阅读 · 2 评论 -
first-child 与 first-of-type
二者均是用于选择某父级元素的第一个子元素。区别如下:<div class="parent"> <div>Child</div> <!-- div:first-child, div:first-of-type --> <div>Child</div> <div>Child</div> <div>Child</div></div><div class=原创 2021-03-13 12:19:31 · 714 阅读 · 0 评论 -
vue服务端渲染vue-server-render支持的模板语法
在vue ssr官方文档中,并没有一一说明渲染模板都支持那些语法。仅仅是简单的说了,支持{{}} 转义插值{{{}}} 插入HTML如果想使用别的模板语法,官方并未提及。其实,他的模板语法支持的不止于此,因为其也是使用了第三方库loash.template api。lodash给人的感觉就是小而美。比如你完全可以通过语法判断去实现一些逻辑。比如如下判断是否需要插入某个JS. <% if (routerPath === '/') {%> <script src原创 2021-03-12 16:54:03 · 342 阅读 · 0 评论 -
Vue中的Provide/Inject 实现响应式数据
Vue中, Provide/Inject实现了跨组件的通信。但可惜数据并不是响应式的(设计如此)。提示:provide 和 inject 绑定并不是可响应的。这是刻意为之的。然而,如果你传入了一个可监听的对象,那么其对象的 property 还是可响应的以上引用自官网可能之所以这样设计,是为了避免数据的混乱。就如同props不能被子组件直接修改一样。从代码角度讲 data() { return { foo: 'foo', bar: 'bar' baz: {hello: '原创 2021-03-12 11:44:18 · 11781 阅读 · 3 评论 -
TypeScript 发布新版手册(handbook)
TypeScript发布了自己的最新版本手册,帮助你更容易的学习typescript原创 2021-03-06 09:43:30 · 522 阅读 · 0 评论 -
正确配置babel的preset-env与transform-runtime
如果是公司的项目(不是发布到npm的库),则可以直接如下配置:# babel.config.json{ "presets": [ [ "@babel/preset-env", { "targets": { "browsers": ["ie >= 11"] }, "useBuiltIns": "entry", "corejs": "3.9.1" } ] ],原创 2021-03-05 09:30:20 · 748 阅读 · 1 评论 -
yarn workspace的原理剖析以及简单使用
随着项目的不断增大,子项目拆分的越来越多,开发过程可能会遇到如下的两个问题:多个项目具有相同的外部依赖,导致重复安装,占用磁盘空间多个项目之间相互依赖,依赖之间的更新流程繁琐(需要发布到npm,或者使用npm link)开源社区中有lerna这样的优秀的monorepo管理工具来解决这两个问题。但其实,这应该属于npm包管理工具自身的问题范围。所以作为后起之秀的yarn,就希望能够通过其原生的workspace去解决这些问题:下面是一个基于yarn workspace测试项目的目录结构,可以看出原创 2021-02-20 12:40:29 · 2831 阅读 · 0 评论 -
Computed property was assigned to but it has no setter
Vue中,计算属性默认只有getter,如果你在代码中尝试给你计算属性赋值(需要setter),那么就会有如上的错误,即计算属性相当于是只读的。// 以下计算属性只用getter。即只能读取foocomputed: { foo() { return 'hello' + this.bar; }}// 尝试给foo赋值,会给出Computed property "foo" was assigned to but it has no setterthis.foo = 'hello baz';原创 2021-02-19 14:43:56 · 1649 阅读 · 0 评论 -
mac下切换node版本管理n模块的源
n模块可以方便的切换node的版本,然后使用官方源速度有些慢。官方提供了更换源的方法如下:# 设置环境变量export N_NODE_MIRROR=https://npm.taobao.org/mirrors/node# 切换node的版本$ sudo -E n stable其中-E参数是指保留当前的环境变量。否则root用户仍旧拿不到N_NODE_MIRROR的环境变量。更多详情,可以参考这里...原创 2021-02-17 19:26:17 · 1815 阅读 · 1 评论 -
波浪号~@在vue项目中的作用,以及静态资源引用的几种方式
在vue单文件组件中,有一套自己的处理静态资源路径的逻辑。其包含了四种引用方式:绝对路径相对路径~开头的模块@开头的模块~开头的引用并非一个别名,而是可以将~后边的内容当做一个模块请求被解析,所以其后边甚至可以放一个node模块,进而实现更高级的功能(见下文),实现这一功能的是vue-loader,在vue-cli项目中已经内置了。@则是一个真正的别名,可以通过vue inspect命令查看当前webpack的配置:# 以下可以看到 @ 是一个别名 alias: { '@':原创 2021-02-16 21:07:09 · 2032 阅读 · 1 评论 -
图文讲解flexbox 布局 以及几个高频度属性的深度剖析。
文章目录display: flexflex-directionflex-growflex-shrinkalign-itemsjustify-contentflex布局中,涉及到的CSS属性以及对应的值还是非常多的。但实际应用中,其实只要掌握几个重要的核心属性就可以应付95%以上的场景了。这些属性如下:display: flex这个是必须的,但值得注意的是,当声明了容器为flex布局之后。容器内的原有的布局,比如基于BFC和浮动的Layout布局就不起作用了。下图:两个浮动元素下图:当使用flex原创 2021-02-08 11:23:00 · 171 阅读 · 0 评论 -
从类型系统看TypeScript中 interface与type的区别
文章目录前言使用上的区别本质区别参考文档前言在TypeScript中,有两中声明类型的方式。即Interface与Type,那么为什么会需要两个API呢?interface X { a: number b: string}type X = { a: number b: string};上面两种方式均可,所以很让人困惑,到底他们的区别是什么?什么时候该使用type,什么时候该使用interface?使用上的区别可能这个问题实在困扰人,所以TS的官方原创 2021-02-05 10:39:44 · 975 阅读 · 0 评论 -
vue中v-model的白话讲解 & 在自定义组件中定义自己的双向数据绑定
v-model原理你可以用 v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇,但 v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据,并对一些极端场景进行一些特殊处理。以上是官方的讲解,其实就是v-bind与@input语法糖而已。如下图:正是通过v-bind指令将响应式的数据绑定到文本框上,之后再给文本框添加input原创 2021-02-04 14:05:15 · 289 阅读 · 0 评论 -
浏览器渲染原理中的那些事儿,前端开发必看
参加浏览器渲染的一些概念DOM(文档对象模型)CSSOM(CSS对象模型)Render Tree (渲染树)Layout(布局)Paint(绘制)Rasterize (栅格化)Layer(图层)Composite(合成)渲染过程首先DOM、CSSOM大家耳熟能详, 二者就是文档加载之后创建的对象模型。前者描述了结构,后者描述了样式。接着会将二者结合起来生成渲染树上图中,我们可以看到,DOM中存在的一些元素比如head,因为是没必要显示的,所以不会出现在渲染树中的。即使是body中的原创 2021-01-27 22:42:00 · 107 阅读 · 0 评论 -
require.context的白话版讲解
webpack打包完成之后是类似于这样的:{"1": "module1""2": "module2""3": "module3"...}当你代码中出现require('./module1'),就会为module1生成id1当需要导入模块的时候,就会按照id寻找对应模块言下之意,在webpack打包的过程中,id和对应的模块都已经确定了。但如果某些模块是动态的呢?比如我又两个模块,我想在代码运行时根据条件判断来确定导入哪个,比如:require('module' + index);原创 2021-01-26 20:21:43 · 358 阅读 · 0 评论 -
一文帮你搞懂typescript中的unknown与any
在typescript中,当我们不确定一个类型是什么类型的,可以选择给其声明为any或者unkown。但实际上,typescript推荐使用unknown,因为unknown是类型安全的。什么是类型安全的?如下,如果是any,你可以任意的取值赋值,不会进行任何的类型检查。但unkown就不一样了,必须先进行断言 就是使用typeof 或 instanceof 来判断类型。其实二者是有本质的区别的,说起来要引入一个多态的概念。举个简单的例子,人类的祖先是猿人,他们也会生火,也会穿一些简单的衣服…所原创 2021-01-16 13:20:09 · 4290 阅读 · 0 评论 -
dependencies devDependencies peerDependencies三者的区别
文章目录DependenciesDevDependenciesPeerDependencies参考Dependencies首先dependencies是大家最常用的,比如项目依赖了vue,那么vue就是dependencies,这里的依赖是会被最终构建到部署环境的// 将会保存到dependencies中npm install vue --save// 或者不写--save也可以,默认就会到dependencies中npm install vue// 再简单一些npm iDevDepen原创 2021-01-09 16:36:04 · 7848 阅读 · 0 评论 -
理解javascript offsetHeight / offsetWidth 与 clientHeight /clientWidth 以及 scrollHeight/scrollWidth的含义
首先介绍一个api:someHtmlNode.getBoundingClientRect可以看到里面包含了该元素的各个尺寸位置信息,尤其注意他的坐标(x,y)其实在浏览器中,我们把可视区域左上角的坐标定为(0,0),那么任何一个元素都在这个坐标系内。之说以引入坐标系的概念,因为offset这个单词的意思是偏移。顾名思义,即当前元素相对于坐标原点的偏移量。所以offsetLeft 和 offsetTop分别是指当前元素距离坐标原点的偏移距离。同理offsetHeight 与 offsetWid原创 2021-01-07 20:48:21 · 397 阅读 · 0 评论 -
如何避免在鼠标选择区域上触发点击事件
今天遇到这样一个问题,比如我给一个div区域绑定了页面跳转的点击事件,当点击的时候后跳转。然而我并不希望当用鼠标选择div中的文字之后触发跳转。默认行为是会触发点击事件的,那么应该如何判断。其实我们使用window.getSelection()可以获取到选择的文字,进而通过当前是否有选择文字而进行判断if (window.getSelection().toString()) { // 用户在选择而非点击 return; }...原创 2021-01-06 13:06:06 · 658 阅读 · 0 评论 -
Antd如何优雅的定制主题
官方有详细的说明,可以看官方文档说明我这里白话说一下:antd react vue的配置是一样,思路就是:因为antd的ui色调都是定义在了公用的样式配置文件:完整版可以看这里所以你可以使用你提供的less文件覆盖antd的less文件,达到定制主题的目的。antd也是官方推荐这样做。详尽的覆盖原理还是看less的官方文档,也就是这个功能其实是less自身提供的。改起来也很简单,如果你使用了vue-cli初始化的项目,只需要添加如下配置:// vue.config.jsmodule.expor原创 2021-01-05 15:53:52 · 2971 阅读 · 0 评论 -
关于html中viewport和initial-scale以及device-width的理解
上图是一些放大镜,不是打酱油的…我们在初始化一个html页面的时候,往往会首先在页面头部加上这样一个标签:<meta name="viewport" content="width=device-width, initial-scale=1">那么这个标签中viewport,width=device-width, initial-scale=1分别都是什么意思,为什么需要这样设置呢?首先说一下viewport,中文翻译过来可以称为视窗。我举个简单的例子:比如你使用放大镜去看清明上河.原创 2021-01-05 13:40:53 · 6505 阅读 · 1 评论 -
如何使用vue-router在新的标签页打开文章
let routeData = this.$router.resolve({name: 'routeName', query: {data: "someData"}});window.open(routeData.href, '_blank');按如上操作即可,如果是使用router-link 可以直接添加target属性<router-link :to="{ name: 'fooRoute'}" target="_blank"> Link Text</router-link原创 2021-01-02 12:19:02 · 1153 阅读 · 2 评论 -
如何在vue项目中引入svg图标
svg,即Scalable Vector Graphics,可缩放矢量图形。相对于jpg,png图标,svg可以在任意分辨率下保证不会模糊,即便是网页缩放了。上图是支护的截图,可以看到铃铛图标是svg的,消息数量是CSS写的,二者缩放到任意体积都可以保持一个同等的清晰度。而且现在很多ui标注的软件都已经支持直接下载svg,那为何不尝试一下呢。svg是一种用xml描述的语言,也就是说,html中引入svg,是以嵌入xml的方式进行的。如上,比如circle标签表示圆,和html是很相似的,只是其原创 2021-01-01 23:33:52 · 3020 阅读 · 0 评论 -
用最少的依赖和代码初始化一个vue3的工程
首先说明,初始化一个vue3工程最好使用@vue/cli 或者 vite 工具进行初始化。我之所以想实现用最少的依赖去初始化,因为我日常需要学习一些前端知识要基于一个项目脚手架,我又觉得使用官方脚手架每次初始化vue3下载的依赖着实有点多,才想着看看最简单的依赖会有哪些,所以才有了此文。我这里是基于webpack进行预编译, 先放出package.json文件{ "name": "simplest-vue3-project", "version": "0.1.0", "description原创 2021-01-01 15:38:59 · 147 阅读 · 0 评论 -
jsdoc的简单使用
安装npm install jsdoc -g书写jsdoc有一套自己的规范,要按规矩办事,比如下:/** * 求两个数的积 * @param {number} x - 乘数 * @param {number} y - 被乘数 * @return {number} 积 */function multiply(x, y) { return x * y;}这里有个小技巧,一般ide都会支持自动补全注释,也就是最好先写好你的方法,之后再去写jsdoc的注释。比如上边的方法,再方法写原创 2020-12-29 17:26:56 · 404 阅读 · 0 评论