- 博客(47)
- 收藏
- 关注
RSS订阅
原创 从零配置你的Webpack
从零配置你的Webpack前言上篇文章简单的介绍了一下，前端进阶之脚手架的搭建。其实我个人认为重要的还是Webpack的配置出来的template，至于脚手架的交互体验可以后期去优化，也可以更加的个性化。但是我们的核心还是放在Webpack等一系列的配置上。这篇文章的目的可以给自己一个回顾的地方加强对Webpack的理解，每个知识点都会认认真真的彻查！尽量让每一步都是非常清晰明了的！如果可以帮助到大家那是更好不过了好了，收！话不多说开始！前提相信来到这里的小伙伴，都是有一些些前端的经验
2020-07-14 00:55:50
328
原创 canvas 教程 指南 万字总结 从入门到放弃 面试 前段 JavaScript HTML H5
重绘之前要清空、或者保留状态。画好一个东西之后要closePath至此canvas基本上算是小成了有问题欢迎留言交流所有的源码点我widthheightidBooleanclipsave()restore()fillStylefonttextAligndirectionBlob。
2023-03-22 17:34:28
372
原创 面试官：来说说svg的path吧 svg path 面试 面试题
path作为最强大的基本形状，强大终于，所有之前提到的基本形状都可以通过path来还原包括但不局限于：线条，曲线，弧形等等。换言之，基本形状就是path的特点版本的快速通道。
2023-03-06 15:51:39
499
原创 重生之我是SVG(1)-入门
SVG 图像是使用各种元素创建的，这些元素分别应用于矢量图像的结构、绘制与布局。在这里，您可以找到每个 SVG 元素的参考文档。
2023-03-01 10:10:29
200
原创 面试官：听说你对package.json很熟？package.json百科全书 全网最全package.json介绍大全 v7版本全解
前言平常在工作中，对package.json这个文件的接触非常非常少。一些同学可能还会看一下script里面有什么命令，执行了哪些方法。又或者了解一下dependencies和devDependencies其他大部分的同学可能直接就npm i和npm start就开始工作了。但是package.json的魅力远不止如此今天就和我一起探索一下这个项目中不可或缺的——package.json吧！由浅入深-核心内容准备工作手摸手新建一个空的package.jsonn
2021-06-27 19:12:20
591
原创 全网最全React源码调试傻瓜式教程
title: 全网最全React源码调试傻瓜式教程date: 2021-06-17 21:41:06tags: [react]category: [react]cover: /image/cover/react.png前言之前在阅读React源码的时候，想调试一下，然后debugger看看变量已经数据是怎么传递的，无奈。还要装这么多东西。踩了不少坑，记录一下。帮助大家少踩坑，也为自己做一个笔记。准备工作Node v8.0.0+、Yarn v1.2.0+。已安装 JDK。你已.
2021-06-17 20:21:01
1501
1
原创 大厂 学习 复习 大纲 前端
前言准备系统性的梳理一下这些年的知识点，算是一个整理，为大厂和更好的自己做好纲要以及准备。大纲前端基础JavaScript 原型链 继承 基本类型，引用类型 作用域 闭包 变量提升 this指向 立即执行函数 instanceof原理 bind的实现 apply和call 柯里化 v8的垃圾回收机制 浮点数精度 new操作符 事件循环机制 promise原理 generator原理 ES6CSS 盒子模型 CSS选择器 BFC position
2021-06-12 21:24:12
169
2
原创 【重识前端】React源码阅读（三）4千字告诉你 Fiber 初始化
前言在第一章中，我们解读到ReactDOM.render之后就没有继续了。因为我看了一下设计到了Fiber的一些知识，所以在第二章补充了Fiber的基础知识之后，我将Fiber拆分成四块来讲动机（或者说初衷初始化-Fiber树的准备工作render-Fiber树的构建commit-Fiber树映射到DOM现在是初始化阶段我们现在直接进入Fiber的初始化。Action！前情回顾回顾一下之前学习JSX的时候，阅读到ReactDOM.render。如果你没有阅读过之前的文章，强烈建议你到我
2021-04-07 21:19:31
269
原创 【重识前端】React源码阅读（二）2000字告诉你Fiber设计动机
title: 【重识前端】React源码阅读（二）2000字告诉你Fiber设计动机date: 2021-04-05 10:08:31tags: [react]category: [重拾前端]cover: /image/cover/react.png前言上一篇挖的坑几乎都是Fiber有关的，本来想先学习一下Hooks，发现也和FIber密切相关了，决定先搞定一下Fiber。不了解的可以查看我的主页。Fiber架构React写了几年时间，一篇文章肯定是讲不完的，我决定分为四个阶段介绍。动机（.
2021-04-05 10:58:20
123
原创 【重识前端】React源码阅读（一）什么是jsx react 源码 解析
前言一些废话和个人感悟，看干货的直接跳过…到jsx重识前端断断续续也写了大半年了。里面基本上都是个人技术栈的积累，以及面试题的回答。感兴趣的伙伴可以点到我的主页去看。说说今天的主角-React吧。React的源码之前一直想要去阅读学习的，也确确实实在看了，但是经常看着看着就发困。然后就开始偷懒，从一些周边的开始阅读，比如React-Router，React-Redux之类的。之前都是看完之后再开始写文章。现在想一边看一边写，换个方式看看。如果有写错的地方欢迎大家讨论，如果觉得还可以的话可以点个赞，谢谢
2021-03-30 20:40:46
408
原创 面试 地址栏中输入网址后发生了什么 url 生成网页 三次握手 四次挥手 ctp http ip
title: 【重识前端】地址栏中输入网址后发生了什么date: 2020-10-09 10:08:31tags: [浏览器]category: [重拾前端]cover: /image/cover/web.jpeg前言不说太多废话了，这个题目其实基本上是现在面试的高频考点了，现在我也想自己认认真真的捋一遍，到时候面试也可以流利的回答。开始let’s goURL解析其实有人一开始会有疑惑，至少我一开始也有疑惑，不是应该先DNS解析吗？其实不是的，现在的浏览器他会优先解析你是不是一个合法.
2021-03-29 10:05:36
292
原创 面试官，别再问我React-Router了！每一行源码我都看过了！React-Router 源码 阅读 react router
前言此处介绍一下React-Router的核心原理。特别细致的标点符号的不予讨论。学前小知识React-Router其实最核心的东西是Route组件和由统一作者开发的History库来建立的。接下来跟着镜头一起走进神秘的ßReact-Router世界吧。已经知道怎么使用的直接跳过，到下面的源码分析去┗|｀O′|┛ 嗷~~简单示例一起建一个简单的示例吧。先用react官网的create-react-app脚手架弄个react出来。npx create-react-app my-appcd my
2021-03-29 10:02:59
466
原创 如何给开源库提一个PR github git
title: 「如何给开源库提一个PR」date: 2021-01-22 16:39:14tags: [github]categories: [github]cover: /image/cover/github.jpg前言之前一直想给github上面优秀的项目做一些力所能及的事情，比如解决一下issues，或者提一个pr，修改一下bug。但是苦于一直不知道怎么正确的去做这件事情。所以搁置了，后来发现了pro-components这个项目，和我的理念非常契合，就是一个包装版的ant-design.
2021-03-29 10:00:51
282
原创 2年前端 杭州 面试 集合 面经 前端
前言说一点废话吧，算是吐槽。现在杭州的氛围很怪，双休都可以拿出来吹的那种。唉，不过虽然是疫情，前端的岗位还是蛮多的，我基本上一天2个面试。在未来科技城和滨江两头跑。不过现在已经入职啦。公司列表安恒科技 -> 挂在4面副总裁。看了知乎上面的评价然后去面的副总裁，发现加班严重，然后期望薪资开的比较高，而且副总裁期间一直在摆弄手机不知道是不是比较忙，场面经常冷静好一会。博圣生物 -> offer，但是薪资开的比较低，所以没去数秦科技 -> 已经入职啦火石创造 ->
2021-03-29 09:55:33
980
2
原创 js 前端 异步 async await promise resolve reject generator yield setTimeout 请求 原理 面试
最近在写【重拾前端】系列，下面有几个快速通道，大家自取【重识前端】原型/原型链和继承【重识前端】闭包与模块【重识前端】全面攻破this【重识前端】一次搞定JavaScript的执行机制【重识前端】什么是BFC、IFC、GFC 和 FFC【重识前端】深入内存世界【重识前端】暴走的异步编程前言老规矩，还是先了解一下什么是异步。异步其实是一个相对比较高级的一个概念。通常来说，程序都是顺序执行，同一时刻只会发生一件事。如果一个函数依赖于另一个函数的结果，它只能等待那个函数结束才能继续执行，从用户
2021-03-29 09:46:56
561
原创 redux源码阅读
最近在写【重拾前端】系列，下面有几个快速通道，大家自取【重识前端】原型/原型链和继承【重识前端】闭包与模块【重识前端】全面攻破this【重识前端】一次搞定JavaScript的执行机制【重识前端】什么是BFC、IFC、GFC 和 FFC【重识前端】深入内存世界【重识前端】暴走的异步编程【重识前端】redux源码阅读前言之前一直在使用redux，后来出了hooks，用的比较少了，但是还是会使用，他们不冲突，各自对应的场景不同。听说redux源码比较少，也比较好懂（不是贬低，越强的代码其实越
2021-03-29 09:43:17
242
原创 【重识前端】深入内存世界
前言用于记录本人的学习过程，希望可以帮助到大家~????JavaScript有自动垃圾回收机制，可能因为这个自动让我们前端开发人员忽略了对他的认识（包括我自己），但是阿里的面试官可不会和你嘻嘻哈哈。“垃圾回收的机制是什么？什么时候会去触发”我一脸懵逼…啥…这个不是他自己运行的吗…????还是老规矩，黄金圈法则：为什么有垃圾回收♻️，或者说垃圾回收的作用是什么？计算机在启动一个程序的时候，会为他分配一块内存，用来存放代码、运行中的数据和一个执行任务的主线程。我们知道电脑的内存其实是有限的，比如常
2020-08-26 16:23:56
279
原创 【重识前端】什么是BFC、IFC、GFC 和 FFC
前言其实在面试的过程中很有可能会被问到“介绍一下BFC”那今天就一口气把BFC、IFC、GFC 和 FFC这四兄弟给吃透吃透透重点介绍一下BFC，他的三兄弟这里只做介绍，感兴趣的可以上网多查查资料然后回来教教我????开始what其实在说BFC和他的三兄弟之前，我们先了解一下，什么是FC？打断一下。说FC之前我希望先说一下BOXBOX一个页面是由很多元素组成的，而这些元素都是一个接一个盒子。那有人就说了，那border-radius: 50%捏？Ok, 直接看下图吧：再来看一个更直
2020-08-13 16:03:19
701
原创 【重识前端】一次搞定JavaScript的执行机制
前言事件循环这个事情，其实在我们的工作中或多或少都会碰到，可能我们只是没有去认认真真的理解他，了解他而已。今天我们一起把事件循环吃透。单线程的JS其实，事件循环就是对于单线程的JS应运而生的。单线程？什么是线程，诶，我好像听过进程诶，他们两兄弟啥区别？为什么js一定要单线程啊，我听说CPU不是有很多核吗？为什么不多线程？线程和进程的爱恨纠葛这里我推荐阮一峰老师的一篇文章点我学习为什么JS是单线程？这个要回到Js历史了，布兰登·艾奇(Brendan Eich)老哥用10天创造js。当
2020-08-12 10:03:46
194
原创 【重识前端】全面攻破this
title: 【重识前端】全面攻破thisdate: 2020-07-16 22:02:55tags: [this, JavaScript]category: [重拾前端]cover: /image/cover/web.jpeg前言其实说起this，这个几乎是前端面试必考题，也是前端最多“脑经急转弯”的地方，也是让无数前端人烦恼的地方。今天我们就彻底的深入this，全面的攻破它！绑定规则我们来看看在函数的执行过程中调用位置如何决定 this 的绑定对象。你必须找到调用位置，然后判断需要应.
2020-07-22 22:48:26
318
原创 【重识前端】闭包与模块
前言回忆我前几年的时光，大量使用 JavaScript 但却完全不理解闭包是什么。总是感觉这门语 言有其隐蔽的一面，如果能够掌握将会功力大涨，但讽刺的是我始终无法掌握其中的门 道。JavaScript中闭包无处不在，你只需要能够识别并拥抱它。最后你恍然大悟:原来在我的代码中已经到处都是闭包了，现在我终于能理解它们了。理 解闭包就好像 Neo3 第一次见到矩阵 4 一样。定义当函数可以记住并访问所在的词法作用域时，就产生了闭包，即使函数是在当前词法作用 域之外执行。function foo()
2020-07-15 18:27:43
257
原创 重新认识session、cookie
title: session和cookie的理解date: 2020-04-11 10:31:35tags: [HTTP]categories: [HTTP]cover: /image/cover/http.png曾经的我cookie是浏览器中传输自带的; balabala…session是存在服务端的; 存一些用户信息…balabala…现在的我从以下几个角度出发一. http协议是无状态的;当我们开发一些对状态有要求的接口时, cookie和session就可以弥补这一块的不足.
2020-07-14 01:01:27
153
原创 【前端进阶】从零搭建属于你的脚手架
给自己搭建一个脚手架背景一丶跳出舒适区大部分前端选手，也包括我自己，经常都是vue-cli，或者create-react-app一把梭。不得不承认这些著名的脚手架写的确实好，能够给我们做项目提速。但是久而久之很容易进入自己的舒适区，最近不是很流行“跳出舒适区”吗？而且各大培训机构都做贩卖焦虑，就为了可以让更多的人可以去买课。这里我就不贩卖焦虑了。大家有自己的选择，只要自己不后悔就好。二丶市面上脚手架的缺陷虽然vue-cli等脚手架已经布置好了很多东西，包括router，css的解析等等。但是！
2020-07-14 00:59:34
290
原创 你真的懂React Hook吗？
前言读这篇文章的前提是你已经对React Hook有所了解的情况下，如果你还没有了解，请先移步官网学习一下。最好不要去网上看别人的总结之类的，无非就是超的官网的，而且这样会让你的认知从一开始就走偏。这篇文章主要是探究Hook的动机，使用中的一些疑问；使用的话React官网已经讲得很详细了，这里就不多赘述了。有需要看接下来的疑难点的伙伴欢迎直接跳过探究直接看具体的疑问；探究主要从3个方面研究React Hook根据黄金思维圈（What、How、Why）What什么是Hook
2020-07-14 00:57:26
491
原创 【重识前端】原型/原型链和继承
[1]重拾前端之原型/原型链和继承探究我觉得学习一个东西最重要的是搞懂三样东西What/How/WhyWhat什么是原型?什么是原型链?什么是继承?原型在JavaScript中，**原型也是一个对象，通过原型可以实现对象的属性继承，**JavaScript的对象中都包含了一个" [[Prototype]]"内部属性，这个属性所对应的就是该对象的原型。"[[Prototype]]“作为对象的内部属性，是不能被直接访问的。所以为了方便查看一个对象的原型，Firefox和Chrome中提供了"pr
2020-07-14 00:46:30
184
原创 好看的vscode字体
vscode下载上面出现的字体(自行百度搜索) (Cascadia Code, 等线)(等线是中文, Cascadia Code是英文, 自认为比较cool的搭配, 也可以自行选择)然后放到C:\Windows\Fonts 会自动安装就完事了~...
2019-09-24 18:40:36
12900
1
原创 装饰器(Decorator)和React高阶组件(HOC)
什么是装饰器(Decorator)装饰器（Decorator）是一种与类（class）相关的语法，用来注释或修改类和类方法。装饰器是一种函数，写成@ + 函数名。它可以放在类和类方法的定义前面。其实只是一个语法糖. 还没有正式发布, 还需要插件babel-plugin-transform-decorators-legacy使用装饰器(Decorator)使用类的装饰器@testable...
2019-09-15 21:55:13
1142
原创 HTTP/HTTPS协议
协议网络协议是计算机之间为了实现网络通信而达成的一种“约定”或者”规则“，有了这种”约定“，不同厂商的生产设备，以及不同操作系统组成的计算机之间，就可以实现通信。HTTP协议HTTP协议是超文本传输协议的缩写，英文是Hyper Text Transfer Protocol。它是从WEB服务器传输超文本标记语言(HTML)到本地浏览器的传送协议。设计HTTP最初的目的是为了提供一种发布和接收...
2019-08-24 19:06:10
227
原创 React Hook 倒计时
useEffect(() => { setTimeout(() => { if (count > 0) { setCount((c: number) => c - 1); // ✅ 在这不依赖于外部的 `count` 变量 } }, 1000); }, [count]); // ✅ 我们的 effect 不适用组件...
2019-07-30 20:43:11
5409
1
原创 React Hook useState useEffect componentDidMount componentDidUpdate componentWillUnmount
介绍Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。缘由Hook的初衷是为了解决原本无状态组建需要使用state, 必须改造为class这个痛点.useStateimport React, { useState } from 'react';function Example() { // 声明...
2019-07-30 17:47:27
10502
3
原创 ant design Form 组件总结 快速构建复杂Ant Design Form表单
Ant Design FormAntd 表单的核心无非是以下两点表单创建（Form.create）在this.props写入form属性表单与组件的双向绑定（this.props.form.getFieldDecorator）表单的取值（this.props.form.validateFields / this.props.form.validateFieldsAndScroll）表...
2019-07-28 20:00:52
2338
原创 chunk 0 [mini-css-extract-plugin] 解决 CSS Modules 警告
前言前两周，用公司的CI部署的时候，发现很鲜明的ERR！其实这个这个只是一个warning。但是由于环境变量（process.env.ci === true）。所以这个warning被转化成了error，导致了编译失败。一般的CI服务器会自动将这个这设置为true。解决方案因为知道了原因，所以解决方案有以下两个修复这个warning。让运维小哥哥帮忙把这个环境变量设置为false。...
2019-06-29 10:36:55
11887
转载 CleanWebpackPlugin is not a constructor
前言今天自己跟着webpack官网的demo一步步走下来。发现了这个问题。查了一圈。发现了这个博主。nice！// webpack版本：4.34.0 // 抛错原写法const CleanWebpackPlugin = require("clean-webpack-plugin"); ... plugins: [ new CleanWebpackPlugin(['di...
2019-06-22 15:53:41
839
转载 使用Hexo+GitHub 搭建属于自己的博客（基础篇）
前言准备工作1.Node.js2.GitHub账号3.Git了解…好的。直接开始（对特定知识点不同这里不多做解释咯，自行Google / Baidu）开始GitHub新建一个项目Github账户注册和新建项目，项目必须要遵守格式：账户名.github.io，不然接下来会有很多麻烦。并且需要勾选Initialize this repository with a READM...
2019-06-18 16:29:32
131
原创 JavaScript 浅拷贝 深拷贝 赋值 引用 JS
前言这个问题说严重也不严重，说不小也不小。如果你也刚刚好碰到了这个问题。就跟着我一起了解一下吧！基本类型和引用类型基本类型基本类型也称值类型，数值类型。包括了StringNumberBooleanNullUndefinedSymbol（ES6新增，表示独一无二的一个值。MDN）基本类型的是放在栈区的，访问的时候也是按值访问，就是正常的理解的赋值。引用类型和浅...
2019-04-28 21:03:28
298
原创 ant design Form 组件总结 结合Modal 自定义Modal的实现 （Upload Input Select DatePicker Cascader）
起源最近在项目中发现要写多个弹框（用于查看、编辑、新建XX信息），如下图。像这样花里胡哨的弹框在一个大型的中台管理系统中，可能要写上好几遍的Modal但是其实他们大同小异。首先，他们的title是固定的（增、改、查）底下的内容也是固定的，无非就是Upload Input Select DatePicker Cascader（写不了<>。其实应该是ant design 的组...
2019-04-28 18:18:28
2947
原创 Web前端 学习目录 学习框架 系统性的学习Web前端
前言这个是目前从一个大牛手上得到的图解，自己学习Web前端可能会用得到，特此记录一下另一个大牛的githttps://github.com/stephentian/33-js-concepts项目源码（不定期更新）（服务端）https://github.com/DerrickTel/YiJiClientServer（Web控制台（React））https://github.co...
2019-03-28 20:56:58
429
原创 解决npm 安装依赖报错：npm ERR! Unexpected end of JSON input while parsing near '...^0.1.6","cross-
原因缓存源npm 版本解决首先要以管理员模式打开cmd清除你的npm缓存 : npm cache clean -f升级npm：npm install npm -g设置淘宝源：npm config set registry https://registry.npm.taobao.org检查淘宝源：npm config get registry出现上图 === 成功成功...
2019-03-26 10:59:11
525
原创 JWT spring boot JAVA 使用步骤 spring boot2.0
前言JWT是json web token缩写。它将用户信息加密到token里，服务器不保存任何用户信息。服务器通过使用保存的密钥验证token的正确性，只要正确即通过验证。（1）JWT 默认是不加密，但也是可以加密的。生成原始 Token 以后，可以用密钥再加密一次。（2）JWT 不加密的情况下，不能将秘密数据写入 JWT。（3）JWT 不仅可以用于认证，也可以用于交换信息。有效使用 JW...
2019-03-25 10:48:44
248
原创 XX is not defined import impor了还是not defined ant design组件import还是not defined
问题如图，XX is not defined 是JS一个非常常见的错误。基本上都是因为自己没有引入，或者没有import而导致的。但是当我非常强势的去寻找的时候。有的我import了，而且按住Ctrl可以追寻到目标文件。这里我强调一个问题，有的时候，因为内存不足，你import的文件，有的时候是复制来的，但是就是说你没有引用到，这个时候你按Ctrl去追寻文件，无法追寻到，只能重新打...
2019-03-20 10:22:58
2110
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人