晴天-CSDN博客

原创 Git学习

第一章 Git基础1. git最小配置配置user.name 和user.email.global的作用：每一次的变更，在哪个时间点是谁做出的变更，在做CR的时候，每一次的变更如果带上了用户的email地址，那么评审的人员在平台上面指出哪里有问题以后，Git会自动把变更者的email取出来，并发送邮件。git config --global user.name 'your_name'git config --global user.email 'your_email'缺省等同于loc

2022-02-05 16:03:08 366

原创 ElementUI源码分析-Row和Col组件

一、简述ElementUI的row组件和col组件属于里面的layout部分，通过基础的 24 分栏，能快速的创建布局。通过 row 和 col 组件，并通过 col 组件的 span 属性我们就可以自由地组合布局。二、解读源码通过参照源码，从新实现了一遍row和col;三、Row以下是ElementUI中的源码:export default { name: 'BsRow', // 组件的name componentName: 'BsRow', // 组件名,主要用于会被子

2021-06-27 14:50:23 2849

原创配置HTTP响应头提高Web安全

1 X-Frame-Options(点击劫持）1.1 定义**点击劫持（ClickJacking）**劫持的是用户的鼠标点击操作，劫持目标是含有重要会话交互的页面，如银行交易页面、后台管理页面等；场景：就比如通过修改偏移量，比如一个关闭按钮，有可能底下覆盖的是一个关注按钮HTTP响应头信息中的X-Frame-Options，可以指示浏览器是否应该加载一个iframe中的页面。如果服务器响应头信息中没有X-Frame-Options，则该网站存在ClickJacking攻击风险。网站可以通过设置X

2021-06-02 16:49:24 1268

原创 LeetCode-24. 两两交换链表中的节点

题目：给定一个链表，两两交换其中相邻的节点，并返回交换后的链表。你不能只是单纯的改变节点内部的值，而是需要实际的进行节点交换。输入：head = [1,2,3,4]输出：[2,1,4,3]示例 2：输入：head = []输出：[]示例 3：输入：head = [1]输出：[1]来源：力扣（LeetCode）链接：https://leetcode-cn.com/problems/swap-nodes-in-pairs著作权归领扣网络所有。商业转载请联系官方授权，非商业转载请注

2021-05-28 23:42:54 112

原创 LeetCode-21.合并两个有序链表

21.题目：将两个升序链表合并为一个新的升序链表并返回。新链表是通过拼接给定的两个链表的所有节点组成的。输入：l1 = [1,2,4], l2 = [1,3,4]输出：[1,1,2,3,4,4]示例 2：输入：l1 = [], l2 = []输出：[]示例 3：输入：l1 = [], l2 = [0]输出：[0]来源：力扣（LeetCode）链接：https://leetcode-cn.com/problems/merge-two-sorted-lists著作权归领扣网络

2021-05-27 19:19:20 84

原创 LeetCode-19. 删除链表的倒数第 N 个结点

题目：给你一个链表，删除链表的倒数第 n 个结点，并且返回链表的头结点。进阶：你能尝试使用一趟扫描实现吗？示例 1：输入：head = [1,2,3,4,5], n = 2输出：[1,2,3,5]示例 2：输入：head = [1], n = 1输出：[]示例 3：输入：head = [1,2], n = 1输出：[1]来源：力扣（LeetCode）链接：https://leetcode-cn.com/problems/remove-nth-node-from-end-of-l

2021-05-26 18:09:25 66

原创 LeetCode-2.两数相加

题目：给你两个非空的链表，表示两个非负的整数。它们每位数字都是按照逆序的方式存储的，并且每个节点只能存储一位数字。请你将两个数相加，并以相同形式返回一个表示和的链表。你可以假设除了数字 0 之外，这两个数都不会以 0 开头。输入：l1 = [2,4,3], l2 = [5,6,4]输出：[7,0,8]解释：342 + 465 = 807.输入：l1 = [0], l2 = [0]输出：[0]输入：l1 = [9,9,9,9,9,9,9], l2 = [9,9,9,9]输出：[8

2021-05-25 10:33:01 71

原创 LeetCode-237(删除链表中的节点),LeetCode-83(删除排序链表中的重复元素)

题目：请编写一个函数，使其可以删除某个链表中给定的（非末尾）节点。传入函数的唯一参数为要被删除的节点。输入：head = [4,5,1,9], node = 5输出：[4,1,9]解释：给定你链表中值为 5 的第二个节点，那么在调用了你的函数之后，该链表应变为 4 -> 1 -> 9.代码：## @lc app=leetcode.cn id=237 lang=python## [237] 删除链表中的节点# Definition for singly-linked li

2021-05-24 10:21:15 85

原创 LeetCode-1-两数之和

题目：给定一个整数数组 nums 和一个整数目标值 target，请你在该数组中找出和为目标值 target 的那两个整数，并返回它们的数组下标。你可以假设每种输入只会对应一个答案。但是，数组中同一个元素在答案里不能重复出现。你可以按任意顺序返回答案。示例1：输入：nums = [2,7,11,15], target = 9输出：[0,1]解释：因为 nums[0] + nums[1] == 9 ，返回 [0, 1] 。来源：力扣（LeetCode）链接：https://leetc

2021-05-23 23:18:24 71

原创学习React之ReactHooks

第一章 Hooks1. ReactHook简介1.1 React Hook/Hooks是什么?(1) Hook是React 16.8.0版本增加的新特性/新语法(2) 可以让你在函数组件中使用 state 以及其他的 React 特性1.2 为什么会出现React Hook/Hooks类组件的缺点：状态逻辑复用难（1）之前复用组件是利用渲染属性和高阶函数，但是都会导致层级冗余趋向复杂难以维护（1）生命周期函数混杂不相干逻辑（2）相干逻辑分散在不同生命周期函数this指向困难

2021-05-06 23:49:12 177

原创学习React之扩展相关

1. setStatesetState更新状态的2种写法 (1). setState(stateChange, [callback])------对象式的setState 1.stateChange为状态改变对象(该对象可以体现出状态的更改) 2.callback是可选的回调函数, 它在状态更新完毕、界面也更新后(render调用后)才被调用 (2). setState(updater, [callback])------函数式的setSta

2021-05-05 22:39:27 98

原创学习React之Redux（比较粗糙，用于自己理解）

第1章 redux1.1 redux理解1.1.1 学习文档英文文档: https://redux.js.org/中文文档: http://www.redux.org.cn/Github: https://github.com/reactjs/redux1.2.2 reduxredux是一个专门用于做状态管理的JS库(不是react插件库)，类似Vue的Vuex它可以用在react, angular, vue等项目中, 但基本与react配合使用。作用: 集中式管理react应用中多

2021-05-05 22:35:47 571

原创学习React之React应用

第1章 React应用(基于React脚手架)1.1 使用create-react-app创建react应用1.1.1 React脚手架脚手架: 用来帮助程序员快速创建一个基于xxx库的模板项目（1）包含了所有需要的配置（语法检查、jsx编译、devServer…）（2）下载所有相关依赖（3）可以直接运行简单效果react提供了一个用于创建react项目的脚手架库: create-react-app项目的整体技术架构为: react + webpack + es6 + eslint特点

2021-05-05 21:54:37 183

原创前端面试之前端性能优化

一、页面加载及渲染过程优化1.1 优化 DOM删除不必要的代码和注释包括空格，尽量做到最小化文件。利用 GZIP 压缩文件结合 HTTP 缓存文件1.2 优化 CSSOM原因：因为renderTree是依赖于DomTree和CSSOM Tree，所以RenderTree必须等到cssTree构建完成才会开始渲染。CSS虽然不会阻塞dom的解析，但是会阻塞dom的渲染。因此，CSSOM缩小、压缩以及缓存同样重要。优化减少关键css元素的数量，关注媒体查询，因为媒体查询影响了CRP的性

2021-05-05 19:18:32 88

原创 React入门之起步、三大核心属性和生命周期

第1章： React入门1.1 React简介React官网React由FaceBook开源，用于动态构建用户界面的JS库（只关注于视图）1.1.1 React特点声明式编码（告诉“机器"想要什么，让机器去做，类似 Array.map方法）组件化编码, 页面中的都可以拆成小组件进行展示可编写原生应用（React Native）高效：① 通过使用虚拟DOM的技术，不直接操作页面真实的DOM;② 通过diff算法找出最小更新的部分，实现精细化最小量更新以达到最小页面重绘和回流1.2

2021-05-05 19:17:12 255

原创 vue源码学习之变化侦测

一、数据驱动视图用户操作或者后端返回数据引起数据变化，从而导致页面变化，这就是数据驱动视图。公式： UI = render(state), vue就充当了render的角色，当发现state发生变化的时候，就会通过数据监测，从而反应在页面UI上。二、变化侦测所谓的变化侦测就是追踪数据的变化。angular采用脏检查机制：对脏数据的检查就是脏检查，比较ui和后台数据是否一致。只有当ui事件或者网络请求，定时器延迟事件，才会触发脏检查。angular每一个绑定到ui的数据就会有一个$watc

2021-04-19 14:12:16 76

原创 webpack和vite的比较

一、webpack和vite都是现代化打包工具二、为什么Vite启动快2.1 底层语言从底层原理上来说，Vite是基于esbuild预构建依赖。而esbuild是采用go语言编写，因为go语言的操作是纳秒级别，而js是以毫秒计数，所以vite比用js编写的打包器快10-100倍。2.2 webpack和vite的启动方式webpack原理图vite原理图webpack: 分析依赖=> 编译打包=> 交给本地服务器进行渲染。首先分析各个模块之间的依赖，然后进行打包，在

2021-04-17 23:04:32 39638 1

原创 vue面试题之MVVM详解

一、MVVM是什么？MVVM模式即 Model-View-ViewModel模式,MVVM是MVC的增强版,萌芽于2005年微软推出的基于window的用户界面框架WPF。二、MVVM详解Model层: 对应数据层的域模型（融合了行为和数据的域的对象模型），主要做域模型的同步。通过Ajax/fetch等API完成客户端和服务端业务Model的同步。在层间关系里，主要用于抽象出ViewModel中视图的Model。View层：作为视图模板存在，在整个MVVM里，整个View是一个动态模板。除

2021-04-17 19:59:14 1424

原创 class中普通函数和箭头函数的区别(基于babel编译)

一、环境搭建想要了解babel编译后的普通函数和箭头函数有什么区别，那么首先就要先搭建环境命令：npm init -y：创建项目npm install @babel/core @babel/cli @babel/preset-envnpm install --save-dev @babel/plugin-proposal-class-properties以上都安装成功以后，就可以该项目里新建.babelrc，这是一个配置文件，presets：预设，数组、预设插件集合。{ "pres

2021-04-15 22:55:31 365

原创 javascript-闭包理解

一、闭包（closure）简述闭包，又称词法闭包或者函数闭包；是在支持函数的编程语言中实现词法绑定的一种技术。闭包一直以来都是作为面试的必考点和难点。对于闭包，可以说在你的项目当初是无处不见的，只是自己没有意识到。1.1 变量作用域理解闭包之前，先要理解清楚javascript的作用域。特点： js的作用域就是：内部函数可以访问外部以及全局变量，但是外部不能访问内部变量。也就是说只能内访外，不能外访问内部。1.2 如何读取局部变量如果需要读取函数内部变量，该怎么办呢，所以就可以在函数

2021-04-15 21:27:47 95

原创事件循环之宏任务和微任务

一、什么是事件循环因为JS单线程的特点，所以提出了任务队列的概念。主线程从"任务队列"中读取事件，这个过程是循环不断的。这个过程会不断重复。所以被称为Event Loop.事件循环的概念很常见，比如在vue源码中nextTick中就有涉及到这个机制。二、为什么javascript采用单线程与其用途有关，javascript作为浏览器脚本语言，JavaScript的主要用途是与用户互动，以及操作DOM。如果两个线程同时操作dom，一个线程正在操作dom节点，一个线程删除dom节点；两者就会产生冲

2021-04-15 15:11:53 689

原创 ES6-Promise详解

简介在javascript中，将函数作为对象使用时，被称为函数对象；new函数产生的对象，简称为对象；而javascript中的回调函数同样分为了两种：（1）同步回调：立即执行，完全执行完了才会结束，不会放入回调队列中；（2）异步回调：不会立即执行，会放入回调队列中来执行。 promise就是异步编程的一种解决方案，相对于最初的回调函数更加优雅。最早由社区提出，ES6将其写入了语言标准。promise是什么通过阅读阮一峰老师的博客，可以看出，promise是一个容器，在这个容器中保存着异

2021-04-14 23:42:38 2333

原创一次完整的 HTTP 服务过程(详细)

当我们在 web 浏览器的地址栏中输入：www.baidu.com，具体发生了什么？对www.baidu.com这个网址进行 DNS 域名解析，得到对应的 IP 地址根据这个 IP，找到对应的服务器，发起 TCP 的三次握手建立 TCP 连接后发起 HTTP 请求服务器响应 HTTP 请求，浏览器得到 html 代码浏览器解析 html 代码，并请求 html 代码中的资源（如 js、css、图片等）（先得到 html 代码，才能去找这些资源）浏览器对页面进行渲染呈现给用户服务器关闭TCP

2021-04-10 11:46:51 783

原创 vscode插件以及配置

一、vscode相关vscode-icons: 文件夹的图标Path Intellisense：自动补全路径插件高亮括号，用户可以定义要匹配的字符和要使用的颜色。自动添加头信息： ctrl+alt+ivscode里阅读pdf文档高亮匹配的插件Auto Close Tag自动关闭标签Guides: 导轨二、代码相关Prettier-Code formatter: 代码格式化工具HTML CSS Support: html和css的代码补全Beautify:自动美化

2021-04-09 20:49:14 246

原创 nodejs安装详细步骤

一、安装首先去node.js的官网下载稳定版本的nodenodejs官网nodejs官网显示了两个版本，分别是LTS版本和Current版本；LTS版本是推荐版本，已经使用稳定了；而current版本是最新版本，有可能还存在某些未发现的Bug,所以在这里，我们下载14.16.1 LTS版本的nodejs;下载以后，如果不安装到其他盘，那么就是一路安装，会自动配置环境变量；如果需要安装要其他盘，则需要配置一下环境变量；配置环境变量：点击我的电脑->属性->高级系统设置->环境变

2021-04-08 21:56:48 1470

原创虚拟dom和diff算法（基于snabbdom的总结）

1. diff算法是什么diff算法，即差异查找算法，而对于计算两颗树的差异时间复杂度为O(n^3),显然成本太高；diff算法将其降至了O(n)的复杂度。在页面当中，如果我们仅仅只是新增、修改某个标签，大可只更新修改了的部分，而不是使整个dom树都重新渲染，如果很小的更改都重新渲染，那么这是对性能和资源的浪费。所以我们可以找到新旧dom树当中差异的地方进行重新渲染。在目前流行的框架中，vue和react都采用了虚拟dom和diff算法相结合，计算出虚拟DOM中真正需要变化、渲染的部分，从而保障页面的

2021-03-28 19:30:51 267

weixin_42991716的博客