- 博客(106)
- 收藏
- 关注
RSS订阅原创 JavaScript 常见的设计模式
文章目录设计模式工厂模式简单工厂抽象工厂单例模式装饰器模式代理模式设计模式设计模式： 设计模式是解决某个特定场景下对某种问题的解决方案。因此，当我们遇到合适的场景时，可能会条件反射一样自然而然想到符合这种场景的设计模式。为什么要学习设计模式:设计模式来源众多专家的经验和智慧，它们是从许多优秀的软件系统中总结出的成功的、能够实现可维护性、复用的设计方案，使用这些方案将可以让我们避免做一些重复性的工作。设计模式提供了一套通用的设计词汇和一种通用的形式来方便开发人员之间沟通和交流，使得设计方案更加通俗
2022-02-03 11:18:50
1193
3
原创 React Hooks 原理理解
文章目录Hookshooks与fiber（workInProgress）状态派发——useState（useReducer）原理处理副作用——useEffect（useLayoutEffect）原理状态获取与缓存——useRef（useMemo）原理总结Hooks可参考之前文章：React Hooks详解Hooks 出现没有Hooks时，函数组件能够做的只是接受 Props、渲染 UI ，以及触发父组件传过来的事件。有的处理逻辑都要在类组件中写，这样会使 class 类组件内部错综复杂，每一个
2022-01-31 14:36:51
6450
4
原创 React Context 原理理解
文章目录ContextContext 相关用法Context 原理总结ContextReact提供了 Context 上下文模式，为了解决 props 每层都需要传递的问题，即Context 提供了一个无需为每层组件手动添加 props，就能在组件树间进行数据传递的方法。注意：提供者一定要是消费者的某一层父级Context 相关用法v16.3.0后，context api 正式发布用 createContext 创建出一个 context 上下文对象，context 对象提供两个组件，Provi
2022-01-29 13:44:13
4621
3
原创 React 调和（Reconciler）原理理解
文章目录FiberFiber 更新机制FiberReactv15及之前，React 对于虚拟 DOM 是采用 递归方式 遍历更新的，一次更新，从应用根部递归更新，递归开始后中途无法终端，随着项目复杂，层级变深，导致更新时间变成，给前端交互上的体验就卡顿。Fiber 诞生在 Reactv16 版本，Fiber 架构目的就是解决大型 React 应用卡顿，fiber 在 React 中是最小粒度的执行单元，在遍历更新每一个节点的时候都不是用的真实 DOM ，都是采用虚拟 DOM ，所以可以 理解成 f
2022-01-25 18:14:34
2346
2
原创 React 调度（Scheduler）原理理解
文章目录异步调度时间分片异步调度原理总结异步调度问题：由于对于大型的 React 应用，会存在一次更新，递归遍历大量的虚拟 DOM ，造成占用 js 线程，使得浏览器没有时间去做一些动画效果，伴随项目越来越大，项目会越来越卡。对比Vue：Vue 有这 template 模版收集依赖的过程，轻松构建响应式，使得在一次更新中，Vue 能够迅速响应，找到需要更新的范围，然后以组件粒度更新组件，渲染视图。React 中，一次更新 React 无法知道此次更新的波及范围，所以 React 选择从根节点开
2022-01-22 12:01:29
1636
2
原创 React 事件系统流程 原理理解
文章目录事件系统事件处理事件合成事件绑定事件触发总结事件系统问：React 为什么要写出一套自己的事件系统呢？答：1、首先，对于不同的浏览器，对事件存在不同的兼容性，React 想实现一个兼容全浏览器的框架， 为了实现这个目标就需要创建一个兼容全浏览器的事件系统。2、其次，v17 之前 React 事件都是绑定在 document 上，v17 之后 React 把事件绑定在应用对应的 容器 container 上，将事件绑定在同一容器统一管理，防止很多事件直接绑定在原生的 DOM 元素上，造成
2022-01-18 20:50:49
1054
2
原创 React Ref 原理理解
文章目录JSXReact.createElementfiber类型总结JSXReact.createElementJSX元素节点会被babel编译成 React Element 形式React.createElement( type, [props], [...children] )第一个参数：如果是组件类型，会传入组件对应的类或函数；如果是 dom 元素类型，传入 div 或者 span 之类的字符串。第二个参数：一个对象，在 dom 类型中为标签属性，在组件类型中为 props 。其他参
2022-01-16 19:36:24
1993
2
原创 React Props 原理理解
文章目录props chidren模式操作 propsprops 是 React 组件通信最重要的手段props：对于在 React 应用中写的子组件，父组件绑定在它们标签里的 属性和方法，最终会变成 props 传递给它们。1）props 可以是：① props 作为一个子组件渲染数据源。② props 作为一个通知父组件的回调函数。③ props 作为一个单纯的组件传递。④ props 作为渲染函数。⑤ render props ， 和④的区别是放在了 children 属性上。⑥
2022-01-14 15:18:45
921
2
原创 React State 原理理解
文章目录setState：React 项目中 UI 的改变来源于 state 改变，类组件中 setState 是更新组件，渲染视图的主要方式。用法：setState(obj,callback)第一个参数：当 obj 是一个对象，则为即将合并的 state当 obj 是一个函数，那么当前组件的 state 和 props 将作为参数，返回值用于合并新的 state第二个参数 callback ：callback 为一个函数，函数执行上下文中可以获取当前 setState 更新后的最新
2022-01-12 10:16:29
1587
2
原创 JavaScript 实现 归并排序、快速排序
文章目录归并排序快速排序分治算法：“分治”，分而治之。其思想就是将一个大问题分解为若干个子问题，针对子问题分别求解后，再将子问题的解整合为大问题的解。利用分治思想解决问题，一般分三步走：分解子问题求解每个子问题合并子问题的解，得出大问题的解归并排序思路分析：归并排序是对分治思想的典型应用，它按照如下的思路对分治思想“三步走”的框架进行了填充：分解子问题：将需要被排序的数组从中间分割为两半，然后再将分割出来的每个子数组各分割为两半，重复以上操作，直到单个子数组只有一个元素为止。求解
2022-01-03 19:44:25
263
2
原创 Vuex 核心概念、基本使用 及 求和案例
文章目录插槽插槽作用：让父组件可以向子组件指定位置插入html结构，也是一种组件间通信的方式，适用于 父组件 ===> 子组件 。分类：默认插槽、具名插槽、作用域插槽使用方式：默认插槽：父组件中： <Category> <div>html结构1</div> </Category>子组件中： <template> <
2021-12-31 13:06:58
727
3
原创 Vue 路由 详细总结
文章目录路由基本使用多级路由命名路由路由的参数query参数params参数路由其它props配置replace属性编程式路由导航缓存路由组件两个新的生命周期钩子路由守卫路由器的两种工作模式路由一个路由（route）就是一组 映射关系（key - value），多个路由需要 路由器（router） 进行管理。前端路由：key是路径，value是组件基本使用安装vue-router，命令：npm i vue-router应用插件：Vue.use(VueRouter)编写router配
2021-12-29 12:15:15
1914
2
原创 Vue TodoList案例、组件通信方式、webStorage、插槽（3种）
文章目录TodoList案例Vue TodoList案例、组件通信方式、webStorage、插槽（3种）
2021-12-26 21:27:12
684
3
原创 Vue 组件化编程、VueComponent实例对象
文章目录模块与组件、模块化与组件化非单文件组件单文件组件模块与组件、模块化与组件化模块：理解: 向外提供特定功能的 js 程序，一般就是一个 js 文件为什么: js 文件很多很复杂作用: 复用 js，简化 js的编写，提高 js 运行效率组件：理解: 用来实现局部(特定)功能效果的代码集合(html/css/js/image……)为什么: 一个界面的功能很复杂作用: 复用编码，简化项目编码，提高运行效率模块化：当应用中的 js 都以模块来编写的，那这个应用就是一个模块化的应
2021-12-24 20:55:40
3331
3
原创 Vue 生命周期的简述
文章目录生命周期生命周期生命周期（Life Cycle）：是指一个组件从创建 -> 运行 -> 销毁的整个阶段，强调的是一个时间段。生命周期函数：是由 vue 框架提供的内置函数，会伴随着组件的生命周期，自动按次序执行。生命周期函数中的 this指向是 vm 或 组件实例对象。注意：生命周期强调的是时间段，生命周期函数强调的是时间点生命周期图示：生命周期钩子详细
2021-12-20 10:14:49
395
2
原创 Vue 内置指令、自定义指令、过滤器
文章目录内置指令内置指令复习之前所学指令：v-bind：单向绑定解析表达式, 可简写为 :xxxv-model： 双向数据绑定v-for：遍历数组/对象/字符串v-on：绑定事件监听, 可简写为@v-if： 条件渲染（动态控制节点是否存存在）v-else：条件渲染（动态控制节点是否存存在）v-show：条件渲染 (动态控制节点是否展示)v-text指令：作用：向其所在的节点中渲染文本内容与插值语法的区别：v-text会替换掉节点中的内容，{{xx}}则不会
2021-12-17 23:09:44
460
2
原创 Vue 常用属性、三种模板 总结
文章目录属性datacomputedmethodswatchVue 三种模板html模板字符串模板render函数模板、属性data、computed、methods、watchVue 三种模板 html模板、字符串模板、render函数模板
2021-12-15 21:57:27
1398
2
原创 【LeetCode】 JS实现 二叉树（前、中、后、层序）遍历（递归、迭代法）
文章目录144. 二叉树的前序遍历、145. 二叉树的后序遍历、94. 二叉树的中序遍历、102. 二叉树的层序遍历、107. 二叉树的层序遍历、 144. 二叉树的前序遍历
2021-12-11 15:46:51
828
2
原创 【LeetCode】回溯 JS经典题型（全排列、子集与组合）汇总
文章目录46. 全排列47. 全排列 II78. 子集77. 组合回溯算法： 实际上一个类似枚举的搜索尝试过程，主要是在搜索尝试过程中寻找问题的解，当发现已不满足求解条件时，就 “回溯” 返回，尝试别的路径。回溯算法的基本思想是：从一条路往前走，能进则进，不能进则退回来，换一条路再试。 ——LeetCode46. 全排列原题链接：46. 全排列/** * @param {number[]} nums * @return {number[][]} */var permute = fun
2021-12-09 08:07:22
784
2
原创 Vue 指令、数据及事件绑定、条件和列表渲染
文章目录Vue 指令内容渲染指令属性绑定指令事件绑定指令双向绑定指令条件渲染指令列表渲染指令Vue 指令指令（Directives）是 vue 为开发者提供的模板语法，用于辅助开发者渲染页面的基本结构。注意：指令是 vue 开发中最基础、最常用、最简单的知识点。vue 中的指令按照不同的用途可以分为如下 6 大类：① 内容渲染指令② 属性绑定指令③ 事件绑定指令④ 双向绑定指令⑤ 条件渲染指令⑥ 列表渲染指令内容渲染指令内容渲染指令用来辅助开发者渲染 DOM 元素的文本内容。常用
2021-12-06 19:50:54
523
2
原创 Vue 简介、特性、使用
文章目录Vue 简介Vue 特性Vue的使用Vue 简介Vue：是一套用于构建用户界面的前端框架。构建用户界面用 vue 往 html 页面中填充数据，非常的方便框架框架是一套现成的解决方案，程序员只能遵守框架的规范，去编写自己的业务功能要学习 vue，就是在学习 vue 框架中规定的用法 vue的指令、组件（是对 UI 结构的复用）、路由、Vuex、vue 组件库Vue 的特点遵循 MVVM 模式编码简洁，体积小，运行效率高，适合移动 / PC 端开发它本身只关注
2021-12-04 19:21:57
7231
原创 浏览器输入URL后发生了什么？
文章目录URL 解析DNS域名解析建立TCP连接发送HTTP请求处理并响应HTTP请求浏览器渲染页面关闭TCP连接URL 解析URL（Uniform Resource Locator），统一资源定位符，用于定位互联网上资源，俗称网址。地址格式：scheme://host.domain:port/path/filename各部分解释如下：scheme： 定义因特网服务的类型。常见的协议有 http、https、ftp、file，其中最常见的类型是 http，而 https 则是进行加密的网络传输
2021-11-27 19:04:08
3458
2
原创 【LeetCode】 JavaScript实现 合并链表 题型汇总
文章目录21. 合并两个有序链表 / 剑指 Offer 25. 合并两个排序的链表1669. 合并两个链表23. 合并K个升序链表21. 合并两个有序链表 / 剑指 Offer 25. 合并两个排序的链表21. 合并两个有序链表剑指 Offer 25. 合并两个排序的链表/** * Definition for singly-linked list. * function ListNode(val, next) { * this.val = (val===undefined ? 0
2021-11-23 17:38:01
1582
2
原创 JS 函数防抖和节流
文章目录防抖节流防抖与节流的比较<div id="content" style="height:150px;line-height:150px;text-align:center; color: #fff;background-color:#ccc;font-size:80px;"></div> <script> let num = 1; const content = document.getElementById('content');
2021-11-21 21:00:00
251
2
原创 JS 执行机制 详解（附例题）
文章目录事件循环(Event Loop)初识任务队列宏任务与微任务事件循环(Event Loop)完整事件循环(Event Loop)初识JS分为 同步任务 和 异步任务同步任务都在主线程（这里的主线程就是JS引擎线程）上执行，会形成一个执行栈主线程之外，事件触发线程管理着一个任务队列，只要异步任务有了运行结果，就在任务队列之中放一个事件回调一旦执行栈中的所有同步任务执行完毕（也就是JS引擎线程空闲了），系统就会读取任务队列，将可运行的异步任务（任务队列中的事件回调，只要任务队列中有事件回调，就说
2021-11-18 20:31:51
1728
4
原创 JS（单线程）与浏览器（多进程）
文章目录进程与线程JS（单线程）浏览器（多进程）渲染进程中的主要线程浏览器的进程模型、线程模型浏览器内多标签页之间通信方式进程间通信的方式进程与线程1、进程： 进程是CPU资源分配的最小单位CPU是计算机的核心，承担所有的计算任务进程 字面意思就是 进行中的程序，可以理解为 一个可以独立运行且拥有自己的资源空间的任务程序进程包括 运行中的程序 和 程序所使用到的内存和系统资源。当我们启动某个程序时，操作系统会给该程序创建一块内存(当程序关闭时，该内存空间就会被回收)，用来存放代码、运行中的数据
2021-11-16 17:57:36
2581
4
原创 JS动画 与 CSS3动画 及 回流和重绘
文章目录JS动画CSS3动画浏览器的渲染流程回流(重排) 和 重绘JS动画JS动画：也被称为 逐帧动画，在时间帧上绘制内容，一帧一帧的，所以它的可再造性很高，几乎可以完成任何想要的动画形式。缺点：有可能造成丢帧的情况。JavaScript在浏览器的主线程中运行，而主线程中还有其它需要运行的JavaScript脚本、样式计算、布局、绘制任务等，对其干扰导致线程可能出现阻塞，从而造成丢帧。代码的复杂度高于CSS动画。优点：JavaScript动画控制能力很强，可以在动画播放过程中对动画进行控
2021-11-14 19:50:25
2202
2
原创 JS 内存泄漏 及 垃圾回收机制
文章目录垃圾的产生：JavaScript 的引用数据类型是保存在 堆内存 中的，然后在 栈内存 中保存一个对堆内存中实际对象的引用，所以，JavaScript 中对引用数据类型的操作都是操作对象的引用而不是实际的对象。可以简单理解为，栈内存中保存了一个地址，这个地址和堆内存中的实际值是相关的比如：首先声明了一个变量，它指向一个对象，建立了一个引用关系。接着把这个变量重新赋值了一个数组对象，也就变成了该变量引用了一个数组，那么之前的对象引用关系就没有了。没有了引用关系，也就是无用的对象，如果这种无用的
2021-11-07 21:41:50
286
2
原创 JS 闭包详解
文章目录什么是闭包?要理解 闭包 就要去理解 变量的作用域，在JS中存在两种变量的作用域，一种是全局变量，一种是局部变量。两种变量的区别就是：函数内部可以直接读取全局变量，但是在函数外部无法读取函数内部的局部变量。闭包就是能够读取其他函数作用域中局部变量的函数。只有函数内部的子函数才能读取局部变量，所以闭包可以理解成 定义在一个函数内部的函数。在本质上，闭包是将函数内部和函数外部连接起来的桥梁。声明在一个函数中的函数，叫做 闭包函数。而且内部函数总是可以访问其所在的外部函数中声明的参数和变量，
2021-11-05 19:34:30
330
2
原创 React Hooks详解
文章目录React HooksHooks简介Hook函数（9种）自定义HooksReact HooksHooks简介介绍Hooks之前，首先要说一下React的组件创建方式，一种是类组件，一种是纯函数组件，并且React团队希望，组件不要变成复杂的容器，最好只是数据流的管道。开发者根据需要，组合管道即可。也就是说组件的最佳写法应该是函数，而不是类。但是，在以往开发中类组件和纯函数组件的区别是很大的，纯函数组件有着类组件不具备的多种特点：纯函数组件没有状态纯函数组件没有生命周期纯函数组件没
2021-11-02 21:54:28
30095
3
原创 React-Redux 知识点 及 实现数据共享案例
文章目录React-ReduxReact-Redux概念相关API方法案例——用React+React-Redux实现数字求和纯函数和高阶函数数据共享——案例React-ReduxReact-Redux概念React-Redux 是 Redux 的官方 React 绑定库、插件库。专门用来简化React应用中使用Redux能够 使React组件从Redux store中读取数据，并且向 store 分发 actions 以更新数据React-Redux 并不是 Redux 内置，需要单独安装。
2021-10-31 23:21:35
902
4
原创 Redux 知识点 及 使用案例
文章目录ReduxRedux简介ReduxRedux简介redux是一个专门用于做状态管理的JS库(不是react插件库)。它可以用在react,，angular， vue等项目中, 但基本与react配合使用。作用：集中式管理react应用中多个组件共享的状态。使用场景：某个组件的状态，需要让其他组件可以随时拿到（共享）。一个组件需要改变另一个组件的状态（通信）。总体原则：能不用就不用, 如果不用比较吃力才考虑使用。设计思想：Redux 是将整个应用状态存储到一个叫做 st
2021-10-29 18:33:28
776
2
原创 React 路由组件 详解
文章目录路由组件1、HashRouter和BrowserRouter2、Route3、Router4、Link和NavLink5、Redirect6、Switch7、withRouter嵌套路由向路由组件传递参数路由跳转的两种模式编程式路由导航Router Hooks路由组件路由组件与一般组件区别：1、写法不同：一般组件：<Demo/>路由组件：<Route path="/demo" component={Demo}/>2、存放位置不同：一般组件：compone
2021-10-24 21:22:39
2510
5
原创 React 路由概念详解
文章目录路由的理解前端路由hash模式history模式路由的理解路由：一个路由就是一个映射关系(key:value)key为 路径，value可能是 function 或 component路由分类：后端路由：理解： value是 function，用来处理客户端提交的请求。注册路由： router.get(path, function(req, res))工作过程：当node接收到一个请求时，根据请求路径找到匹配的路由，调用路由中的函数来处理请求，返回响应数据前端路由：
2021-10-22 21:17:45
755
3
原创 React ajax请求 及axios、pubsub、fetch使用
文章目录React ajax前置说明常用ajax请求库axios消息订阅-发布机制Fetch案例——github用户搜索React ajax前置说明React 本身只关注于界面, 并不包含发送ajax请求的代码前端应用需要通过ajax请求与后台进行交互(json数据)react 应用中需要集成第三方ajax库(或自己封装)常用ajax请求库1、jQuery: 比较重, 如果需要另外引入不建议使用2、axios: 轻量级, 建议使用封装XmlHttpRequest对象的ajaxpr
2021-10-20 21:27:21
2063
2
原创 React 脚手架的搭建、配置代理
文章目录React脚手架脚手架创建项目并启动项目结构功能界面的组件化编码流程（通用）React脚手架脚手架用来帮助程序员快速创建一个基于xxx库的模板项目包含了所有需要的配置（语法检查、jsx编译、devServer…）下载好了所有相关的依赖可以直接运行一个简单效果React提供了一个用于创建React项目的脚手架库: create-react-app项目的整体技术架构为: react + webpack + es6 + eslint使用脚手架开发的项目的特点: 模块化, 组件化,
2021-10-17 13:31:03
250
3
原创 移动端、PC端 网页特效
文章目录PC端网页特效偏移量系列 offset可视区系列 client滚动系列 scrollPC端网页特效偏移量系列 offsetoffset 翻译过来就是偏移量， 使用 offset 系列相关属性可以 动态 的得到该元素的位置（偏移）、大小等。获得元素距离带有定位父元素的位置获得元素自身的大小（宽度高度）注意： 返回的数值都不带单位常用属性：图示：offset与style区别：offsetstyle可以得到任意样式表中的样式值只能得到行内样式表中的样式值
2021-10-10 13:57:39
5689
6
原创 移动端Web开发 响应式布局及Bootstrap框架使用
文章目录BootstrapBootstrapBootstrap 是一款非常优秀的Web前端框架，其灵活性和可扩展性加速了响应式页面开发的进程。Bootstrap遵循移动优先的原则，在开源之后迅速受到开发人员的追捧，推动了响应式技术的发展Bootstrap 来自 Twitter（推特），是目前最受欢迎的前端框架之一。是一个基于 HTML、CSS和JavaScript 语言编写的框架，具有简单、灵活的特性，拥有样式库、组件和插件Bootstrap常用来 开发响应式布局和移动设备优先的Web项目，能够
2021-10-04 21:38:25
1169
2
原创 移动端Web开发 流式布局、flex布局、rem布局
文章目录移动端Web开发流式布局flex布局布局原理常用属性rem布局rem基础媒体查询less移动端Web开发流式布局在PC端进行网页制作时，经常使用固定像素的网页布局，但这种布局方式对小屏幕的设备不友好。为了适应小屏幕的设备，在移动设备和跨平台（响应式）网页开发过程中，多数使用流式布局。流式布局是一种等比例缩放布局方式，在CSS代码中使用百分比来设置宽度，所以也称百分比自适应布局。流式布局实现方法是，将CSS固定像素宽度换算为百分比宽度，其换算公式如下：目标元素宽度 / 父盒子宽度 = 百分数
2021-09-30 21:17:35
1672
2
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人