Free Joe-CSDN博客

原创优化浏览器主线程执行的几个API，着重讲解 requestIdleCallback 与 requestAnimationFrame

为了提高浏览器的性能和用户体验，现代浏览器采用了一些技术来优化主线程的执行。本文将提供浏览器因JS耗时任务导致页面卡顿的部分解决方案。 - `setTimeout` 延迟加载（使用不当可能适得其反） - `web worker` 多线程（不能操作dom，主要计算密集型的任务） - `requestIdleCallback` 帧空闲时运行（react18带🔥的，低优先级任务） - `requestAnimationFrame` 每帧都会运行（主要做动画效果调优）

2024-04-22 12:05:56 474

原创 UmiJS基础&UmiJS+Dva

Umi，中文可发音为乌米，是可扩展的企业级前端应用框架。你可以将它简单的理解为一个专注性能的类 next.js 前端框架，并通过约定、自动生成和解析代码等方式来辅助开发，减少我们开发者的代码量。

2021-03-20 23:18:05 2583 4

原创 DvaJS学习（dva = React-Router + Redux + Redux-saga）

dva 是体验技术部开发的 React 应用框架，将上面三个 React 工具库包装在一起，简化了 API，让开发 React 应用更加方便和快捷。dva = React-Router + Redux + Redux-saga数据的改变发生通常是通过用户交互行为或者浏览器行为（如路由跳转等）触发的，当此类行为会改变数据的时候可以通过 dispatch 发起一个 action，如果是同步行为会直接通过 Reducers 改变 State ，如果是异步行为（副作用）会先触发 Effects 通过serve

2021-03-17 05:22:19 1065 3

原创 redux-saga学习

如果redux需要用到 side effect 异步操作,redux-thunk 和 redux-saga 绝对是目前两个最受欢迎的中间件插件。redux-saga是一个用于管理redux应用异步操作的中间件，redux-saga通过创建sagas将所有异步操作逻辑收集在一个地方集中处理，可以用来代替redux-thunk中间件。

2021-03-16 00:50:33 2375 5

原创 MockJs学习&React+Axios+MockJs实战例子

MockJs可以生成随机数据，拦截 Ajax 请求。Mock.js 的语法规范包括两部分：- 数据模板定义规范（Data Template Definition，DTD）- 数据占位符定义规范（Data Placeholder Definition，DPD）Mock.mock( rURL, function( options ) )当拦截到匹配 rurl 的请求时，函数 function(options) 将被执行，并把执行结果作为响应数据返回。

2021-03-13 05:24:59 753

原创 React Hook学习

Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。Hook 是一些可以让你在函数组件里“钩入”(hook) React state 及生命周期等特性的函数。Hook 在 class 内部是不起作用的。Hooks的出现是为了解决 React 长久以来存在的一些问题：- 在组件之间复用状态逻辑很难- 复杂组件变得难以理解- 难以理解的 class

2021-03-11 04:58:05 383

原创 React Context 上下文对象

Context 设计目的是为了共享那些对于一个组件树而言是“全局”的数据，例如当前认证的用户、主题或首选语言。Context 通过组件树提供了新的传递数据的方法，从而避免了在每一个层级手动的传递 props 属性。

2021-03-10 23:45:42 429

原创 React Diff算法

- Tree Diff：采用分层求异的策略，将新旧两棵DOM树按照层级对应的关系进行对比，这样只需要对树进行一次遍历，就能够找到哪些元素是需要更新的。- Component Diff：查看两个组件的类型是否相同。如果类型不同，则需要更新，更新时先把旧的组件删除，再创建一个新的组件插入之前删除的位置。类型相同时，暂时不需要更新。- Element Diff：通过设置唯一key值，对元素diff进行优化。（组件类型相同时看内部元素）元素发生了改变，则找到需要修改的元素，有针对性进行修改。

2021-03-09 06:19:16 347

原创 React Router新版本入门学习

近几年单页应用（Single Page Web Application，SPA）发展迅猛，前端控制路由变为主流，单页应用也是前端路由的主要使用场景。react-router是React中用来实现路由的第三方JavaScript库，也是基于React开发的。它拥有简单API和强大的路由处理机制，如代码缓冲加载、动态路由匹配，以及建立正确的位置过渡处理。它可以快速地在应用中添加视图和数据流，保持页面展示内容和URL的同步。

2021-03-08 23:02:17 517 1

原创 Redux学习 & React+Redux实战（connect方法各个参数解读）

Redux 是 JavaScript 应用程序的状态容器，提供可预测的状态管理。在Redux中，所有的数据（比如`state`）都是保存在`store`的容器中，一个应用也只能有一个store容器。`store`本质是一个状态树，保存了所有对象的状态。任何UI组件都可以直接通过`store`访问特定对象的状态。要想更改对象的状态，需要分发一个`action`-- (`store.dispatch(action)`)。分发在这里意味着将可执行信息发送到`store`。当一个`store`接收到一个`ac

2021-03-06 07:10:37 908 1

原创简单了解前端构架模式MVC与MVVM

MVC（Model View Controller），是Model（模型）－View（视图）－Controller（控制器）的缩写。MVC不是框架，不是设计模式，也不是软件架构，而是一种架构模式。MVC的出现是为了让应用的业务逻辑、数据和界面显示分离的方法来组织代码。Model-View-ViewModel的缩写，而本质上还是MVC的改进版。其设计思想是关注Model变化，让MVVM框架去自动更新DOM。MVVM要求View不能和Model直接通信。

2021-03-03 07:27:17 2037 7

原创 React组件全方位学习

在React中，组件是应用程序的基石，页面中所有的界面和功能都是由组件堆积而成的。合理的组件设计有利于降低系统各个功能的耦合性，并提高功能内部的聚合性。在React中，可以使用花括号{}把JavaScript表达式放入其中运行，放入{}中的代码会被当作JavaScript代码进行处理。在React中，数据流是单向流动的，从父节点向子节点传递（自上而下）。

2021-03-02 12:18:48 205

原创 React事件处理——为什么React事件处理函数需要手动绑定this？手动绑定this方法有几种？

`onClick: this.handleClick`，相当于`onClick = {function}`，`onClick`是一个"中间变量"，用来接收`this.handleClick`的函数体，也就是说`this.handleClick`作为一个回调函数传给另一个函数（点击事件处理函数）调用，这样会造成回调函数中的隐式丢失。

2021-02-28 14:28:37 652 3

原创 React入门学习

用于构建用户界面的 JavaScript 库,React不是一个MVC框架，而是一个用于构建组件化UI的库，是一个前端界面开发工具React源于Facebook内部PHP框架XHP的一个分支，在每次有请求进入时会渲染整个页面。而React的出现就是为了把这种重新渲染整个页面的PHP式工作流，带入客户端应用，在使用React构建用户界面时，只需定义一次，就能将其复用在其他多个地方。当状态改变时，无须做出任何操作，它会自动、高效地更新界面。从此开发人员只需要关心维护应用内的状态，而不需要再关注DOM节点.

2021-02-22 21:53:51 267

原创一文搞懂MySQL事务（数据库事务隔离级别）

事务就是用户定义的一系列数据库操作，这些操作可以视为一个完成的逻辑处理工作单元，要么全部执行，要么全部不执行，是不可分割的工作单元。一般来说，事务是必须满足4个条件（ACID）：原子性、一致性、隔离性、持久性。- 脏读读取到的是一个未提交的数据，不可重复读读取到的是前一个事务提交的数据- 不可重复读的重点是修改：同样的条件，你读取过的数据，再次读取出来发现值不一样了- 幻读的重点在于新增或者删除：同样的条件，第 1 次和第 2 次读出来的记录数不一样事务提交方式：显示提交、隐示提交、自动提交

2021-02-09 14:52:19 779

原创一文搞懂MySQL索引（清晰明了）

索引是对数据库表中一列或多列的值进行排序的一种结构。MySQL索引的建立对于MySQL的高效运行是很重要的，索引可以大大提高MySQL的检索速度。MySQL中常用的索引结构（索引底层的数据结构）有：B-TREE ，B+TREE ，HASH 等。MySQL 的索引有两种分类方式：逻辑分类和物理分类。对于InnoDB和MyISAM而言，主键索引是根据主关键字来构建的B+树存储结构，辅助索引则是根据辅助键来构造的B+树存储结构，彼此的索引树都是相互独立的。

2021-02-08 12:23:32 133374 50

原创 MySQL体系构架、存储引擎和索引结构

MySQL的体系构架划分为：1.网络接入层 2.服务层 3.存储引擎层 4.文件系统层。MySQL中的数据用各种不同的技术存储在文件（或者内存）中。每一种技术都使用不同的存储机制、索引技巧、锁定水平并且最终提供广泛的不同的功能和能力。InnoDB存储引擎中有页（Page）的概念，页是数据库管理磁盘的最小单位，InnoDB存储引擎中默认每个页的大小为16kb，每次读取磁盘时都将页载入内存中。</brMysql数据库中的常见索引有多种方式，例如Hash索引，B-树索引，B+树索引

2021-01-30 01:25:19 17907 20

原创 Node.js集成MongoDB之Mongoose详细入门

Mongoose，是MongoDB的一个对象模型工具，是基于node-mongodb-native开发的MongoDB的nodejs驱动，也目前是Node.js操作 MongoDB的首选库。Schema：模型类的骨架，通过Schema可以生成模型类，通过模型类可以生成文档。 Model：由Schema产生的构造器，具有属性和行为。Modal的每一个实例就是MongoDB的一个文档。Instance：Model的实例，通过new Model()得到，也就是MongoDB的一个文档。

2021-01-10 04:12:39 2188 1

原创 Node.js集成MongoDB之MongoClient与模块化

MongoClient，Mongodb官方提供的Nodejs驱动,继承于mongo类（现在mongo模块被淘汰了），对MongoDB的操作和在mongo shell中几乎一致

2021-01-08 22:42:27 2021

原创 MongoDB详细入门学习

MongoDB 是由C++编写的，是一个基于分布式文件存储的开源NoSql数据库系统。MongoDB 是一个介于关系数据库和非关系数据库之间的产品，是非关系数据库当中功能最丰富，最像关系数据库的。Mongo最大的特点是他支持的查询语言非常强大，其语法有点类似于面向对象的查询语言，几乎可以实现类似关系数据库单表查询的绝大部分功能，而且还支持对数据建立索引。

2021-01-06 02:07:47 2194

原创你应该了解的一些数据库概念！RDBMS vs NoSQL，分布式 vs 集群，分区分表分片分库

NoSql的全称为Not Only SQL，泛指非关系型数据库，是对关系型数据库的一种补充，特别注意补充这两个字，这意味着NoSql与关系型数据库并不是对立关系，二者各有优劣，取长补短，在合适的场景下选择合适的存储引擎才是正确的做法。

2021-01-02 03:29:21 1307 2

原创 Koa框架学习

- Koa核心模块并未捆绑任何中间件（路由功能也需要引入别的中间件）【方便用户的拓展】- Koa使用了 Promise、async/await 语法来进行异步编程（Express 是基于事件和回调的）【避免地狱回调】- Koa增强了对错误的处理- Koa开发的web应用体积更小，功能更强大

2020-12-28 02:46:40 1023

原创 Nodejs-Express框架入门到构建简单留言板项目

Express 是一个保持最小规模的灵活的 Node.js Web 应用程序开发框架，Express 框架的核心特性如下：通过设置中间件来处理HTTP请求。通过路由来执行不同的HTTP请求操作。通过模板来渲染HTML页面。

2020-12-26 21:47:42 464 1

原创 Nodejs全方位入门

Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环，也可以简单地将Node.js理解为运行在服务端的 JavaScript。 Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型，使其轻量又高效。NodeJs中js文件中的最外层this指向什么？

2020-12-25 14:01:16 1932

原创 npm使用与package.json说明

npm是于Node社区中产生的，是nodejs的官方包管理工具。1️⃣npm1.1❀ 初始化项目1.2❀ 安装模块1.3❀ 本地安装和全局安装1.4❀ 镜像源1.5❀ 生产依赖和开发依赖1.6❀ 其他npm命令2️⃣解读package.json文件2.1❀ package.json字段说明2.2❀ 版本号说明2.3❀ 常见的版本号限定符

2020-12-24 16:21:46 1315

原创 Webpack学习（给力！篇幅较长）

Webpack是一个开源的JavaScript模块打包工具，其最核心的功能是解决模块之间的依赖，把各个模块按照特定的规则和顺序组织在一起，最终合并为一个或多个bundle。这个过程就叫作==模块打包==。一般而言，一个入口对应一个bundle，但一个入口也可产出多个bundle（比如：使用了样式分离插件）。对于webpack来说，所有的资源(.js、.css、.png)都是module。

2020-12-23 01:49:55 447

原创 Babel 学习与使用

JavaScript在不断的发展，各种新的标准和提案层出不穷。许多使用JavaScript开发的的产品，具体点，那就以浏览器为代表吧！产品肯定是落后于实现标准的，这就导致许多新的JavaScript特性无法被兼容，明明那么方便简洁特性，却用不上，这是不能被接受的。Babel是一个JavaScript编译器，也是一个工具链，集成了众多的插件和工具。Babel 主要将 ECMAScript 2015+ （ES6+）版本的代码转换为向后兼容的 JavaScript 语法，以便能够运行在当前和旧版本的浏览器

2020-12-20 04:19:44 1287 2

原创了解JS中模块概念（前端模块规范与ES6 module）

在 ES6 之前，社区制定了一些模块加载方案，最主要的有 CommonJS 和 AMD 两种。前者用于服务器，后者用于浏览器。ES6 在语言标准的层面上，实现了模块功能，而且实现得相当简单，完全可以取代 CommonJS 和 AMD 规范，成为浏览器和服务器通用的模块解决方案。

2020-12-11 01:17:49 996 1

原创开发中用得上的ES6比较运算符 ?. ??

链式运算符`?.`Null判断运算符 `??`Object.is() 同值相等链式运算符`?.`读取对象内部的某个属性，往往需要判断一下该对象是否存在。使用了`?.`运算符，直接在链式调用的时候判断，左侧的对象是否为null或者undefined。如果是，就不再往下运算，而是返回undefined。

2020-12-10 11:49:57 1498

原创 ES6 class

JavaScript 语言中，生成实例对象的传统方法是通过构造函数。相对于传统的面向对象语言，语义化等方面差强人意。ES6引入了 Class概念，作为对象的模板，一定程度上可以将class视为构造函数的语法糖。

2020-12-10 11:30:55 139

原创 JS async await

async函数是使用async关键字声明的函数。 async函数是AsyncFunction构造函数的实例，函数内允许使用await关键字。async和await关键字让我们可以用一种更简洁的方式写出基于Promise的异步行为，而无需刻意地链式调用promise。 Async 函数是 Generator 函数的语法糖。async函数就是将 Generator 函数的星号（*）替换成async，将`yield`替换成`awai

2020-12-09 00:23:19 508

社区版mongoDB官方图形界面工具

空空如也