mytheart-优快云博客

原创 vite原理

vite: https://github.com/vitejs/vitewebpack 原理图vite 原理图面试题答案：webpack会先打包，然后启动开发服务器，请求服务器时直接给予打包结果。而vite是直接启动开发服务器，请求哪个模块再对该模块进行实时编译。由于现代浏览器本身就支持ES Module，会自动向依赖的Module发出请求。vite充分利用这一点，将开发环境下的模块文件，就作为浏览器要执行的文件，而不是像webpack那样进行打包合并。由于vite在启动的时候不需要.

2022-01-14 10:40:59 572

原创 React实现图片缩放效果

JS版本import React, { PureComponent, createRef } from 'react'import PropTypes from 'prop-types'export default class PrismaZoom extends PureComponent { static propTypes = { children: PropTypes.node.isRequired, className: PropTypes.string, st

2021-09-25 11:36:45 998

原创原生js实现轮播图

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"> <title></title> <script src="htt

2021-09-24 00:37:40 273

原创 img在容器中居中剪裁展示的三种方法

用到css的clip:rect(top right bottom left);用法，需要配合position: absolute使用<img src="xxx" style="position: absolute;clip: rect(0px,250px,200px,50px);width: 300px;height: 200px">用元素的background属性 img { background-image: url(http://img2.u.

2021-09-05 01:26:05 2848

原创优秀文章整理

调试技巧：如何快速知道页面上所有元素的轮廓跟位置小程序调试新方案——WeConsole

2021-09-04 23:03:43 114

原创 webpack常用loader和plugin

webpack常用loader和pluginfile-loaderfile-loader: 生成依赖的文件到输出目录，然后将模块文件设置为：导出一个路径\//file-loaderfunction loader(source){ // source：文件内容（图片内容 buffer） // 1. 生成一个具有相同文件内容的文件到输出目录 // 2. 返回一段代码 export default "文件名"}url-loaderurl-loader：包含了file-loader的功能，

2021-07-27 14:11:21 355

原创关于滚动的属性和api整理

容器元素element.scrollTop/scrollLeft // 获取或设置一个元素的内容垂直滚动的像素数（可读可写）element.clientHeight // 如下图（只读）element.scrollHeight // 获取一个元素内容高度的度量，包括由于溢出导致的视图中不可见内容（只读）element.scrollTo(x-coord, y-coord); // 使内容滚动到给定元素的指定坐标位置 element.scrollBy(x-coord, y-coord)

2021-04-09 17:22:26 211

原创 react 常用 hooks

// 监控元素尺寸变化export function useClientRect() { const [rect, setRect] = useState(null); const ref = useCallback(node => { if (node !== null) { setRect(node.getBoundingClientRect()); } node && myObserver.observe(node) }, [])

2021-03-16 16:10:52 182

原创 react项目eslint和ts配置

如何在 React 项目中整合 Eslint 和 Prettier.eslintrc.jsmodule.exports = { "env": { "browser": true, "es6": true }, "extends": [ "airbnb" ], "globals": { "Atomics": "readonly", "SharedArrayBuffer": "readonly", "_": true

2021-01-11 17:08:40 1801

原创 redux-saga

redux-saga中文文档地址：https://redux-saga-in-chinese.js.org/纯净强大灵活[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GvT9Nm0u-1610100030495)(assets/2019-08-27-09-35-12.png)]在saga任务中，如果yield了一个普通数据，saga不作任何处理，仅仅将数据传递给yield表达式（把得到的数据放到next的参数中），因此，在saga中，yield一个普通数据

2021-01-08 18:00:59 262 1

原创 CSS笔记

CSS常用方法// 单行打点.ellipsis() { overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}// 多行打点.multi-ellipsis(@lines) { display: -webkit-box; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: @lines; /* autoprefixer:

2021-01-06 00:04:20 269

原创原生js封装的常用方法

常用方法// 1、根据身份证获取信息export function getInfoByID(idNum) { const result = {} //获取出生日期 result.birth = idNum.substring(6, 10) + "-" + idNum.substring(10, 12) + "-" + idNum.substring(12, 14); //获取性别 result.sex = parseInt(idNum.substr(16, 1)) % 2 ===

2020-11-25 14:50:43 3228

原创 npm相关内容

语义版本版本规范：主版本号.次版本号.补丁版本号主版本号：仅当程序发生了重大变化时才会增长，如新增了重要功能、新增了大量的API、技术架构发生了重大变化次版本号：仅当程序发生了一些小变化时才会增长，如新增了一些小功能、新增了一些辅助型的API补丁版本号：仅当解决了一些 bug 或进行了一些局部优化时更新，如修复了某个函数的 bug、提升了某个函数的运行效率常见语义版本的书写方式符号描述示例示例描述>大于某个版本>1.2.1大于1.2.1版本&

2020-11-23 18:02:25 252

原创 react-redux使用和源码分析（hook和class版本）

react-reduxReact: 组件化的UI界面处理方案React-Router: 根据地址匹配路由，最终渲染不同的组件Redux：处理数据以及数据变化的方案（主要用于处理共享数据）如果一个组件，仅用于渲染一个UI界面，而没有状态（通常是一个函数组件），该组件叫做展示组件如果一个组件，仅用于提供数据，没有任何属于自己的UI界面，则该组件叫做容器组件，容器组件纯粹是为了给其他组件提供数据。react-redux库：链接redux和reactProvider组件：没有任何UI界面，该

2020-10-17 22:48:52 307

原创 JavaScript数据结构和算法

01-线性数据结构之数组线性数据结构：也叫一维数据结构，线性的数据结构强调存储和顺序，常用的有数组和链表两种线性数据结构。特性存储在物理空间上是连续的；数组定长，底层的数组长度是不可变的；数组的变量，指向了数组第一个元素的位置；优点查询性能好缺点因为数组存储的空间必须得是连续的，所以如果数组比较大，当系统的空间碎片较多的时候，容易存不下；因为数组的长度是固定的，所以数组的内容难以被添加和删除；补充数组 a = [1, 2, 3, 4, 5, 6], a[1], a[2]

2020-10-07 02:31:31 537

原创二叉树

01-树形结构（常见概念）特点树形结构是有向无环图，树是图的一种；树形结构有一个根节点树形结构没有回路常见概念根节点：A叶子节点：下边没有其它节点了树的度：这棵树最多叉的节点有多少个叉，这棵树的度就是多少树的深度：树最深有几层，树的深度就为几满二叉树所有的叶子节点都在最底层每个非叶子节点都有两个子节点完全二叉树国内定义叶子节点都在最后一层或倒数第二层叶子节点都靠左聚拢国际定义叶子节点都在最后一层或倒数第二层如果有叶子节点，就必须有两个叶子节点子树

2020-10-03 00:34:46 352 1

原创经典文章收藏

React Fiber 原理介绍BFF——服务于前端的后端深入理解CSS中的层叠上下文和层叠顺序-张鑫旭

2020-09-20 20:44:02 210

原创 React进阶

React中的事件这里的事件：React内置的DOM组件中的事件几乎所有的元素的事件处理，均在document的事件中处理，React会根据虚拟DOM树的完成事件函数的调用一些不冒泡的事件，是直接在元素上监听一些document上面没有的事件，直接在元素上监听如果给真实的DOM注册事件，阻止了事件冒泡，则会导致react的相应事件无法触发(和第三方dom插件混用是需要特别注意)如果给真实的DOM注册事件，事件会先于React事件运行React的事件参数，并非真实的DOM事件参数，是Re

2020-09-19 11:51:51 457

原创 MVC/MVVM（Redux的核心概念）

Redux核心概念action reducer storeMVC它是一个UI的解决方案，用于降低UI，以及UI关联的数据的复杂度。传统的服务器端的MVC[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Vt7TOLof-1600448457535)(assets/2019-08-20-13-18-58.png)]环境：服务端需要响应一个完整的HTML该HTML中包含页面需要的数据浏览器仅承担渲染页面的作用以上的这种方式叫做服务端渲染，即服务器端将完整的

2020-09-19 01:01:55 789

原创事件循环

事件循环JS运行的环境称之为宿主环境。执行栈：call stack，一个数据结构，用于存放各种函数的执行环境，每一个函数执行之前，它的相关信息会加入到执行栈。函数调用之前，创建执行环境，然后加入到执行栈；函数调用之后，销毁执行环境。JS引擎永远执行的是执行栈的最顶部。异步函数：某些函数不会立即执行，需要等到某个时机到达后才会执行，这样的函数称之为异步函数。比如事件处理函数。异步函数的执行时机，会被宿主环境控制。浏览器宿主环境中包含5个线程：JS引擎：负责执行执行栈的最顶部代码GUI线程：负责

2020-09-18 01:13:37 162

原创 React Hook

Hook简介Hook专门用于增强函数组件的功能（Hook在类组件中是不能使用的），使之理论上可以成为类组件的替代品官方强调：没有必要更改已经完成的类组件，官方目前没有计划取消类组件，只是鼓励使用函数组件Hook（钩子）本质上是一个函数（命名上总以use开头），该函数可以挂载任何功能Hook的种类：useState、useEffect、useContext、useReducer、自定义Hookstate Hookstate Hook是一个在函数组件中使用的函数（useSatte）,用于在函.

2020-09-16 22:40:34 185

原创 Linux常用命令

Linux常用命令tar -xvf 压缩包自动识别压缩格式unzip 压缩包只能解压zip压缩包rm -rf 文件名删除文件删除文件夹实例：rm -rf /var/log/httpd/access删除文件夹及及其下所有文件、文件夹rm -rf ./* 删除当前目录下所有类型的文件ls -a/t 显示所有文件及目录/按时间排序（包括隐藏文件）mv ./test1/* ./test2 移动test1文件夹下的所有内容到test2mv ./test1 ./test2/ 移动tes

2020-09-12 16:43:15 117

原创前端项目配置(prettierrc/eslint/tsconfig.json)

prettierrc.prettierrc.jsmodule.exports = { "prettier.printWidth": 100, // 超过最大值换行 "prettier.tabWidth": 4, // 缩进字节数 "prettier.useTabs": false, // 缩进不使用tab，使用空格 "prettier.semi": true, // 句尾添加分号 "prettier.singleQuote": true, // 使用单引号代替

2020-09-12 15:05:16 2500 1

原创软件开发流程中各版本名称(alpha/bera/RC/Release)

RC=Release Candidate,含义是"发布候选版"，它不是最终的版本，而是最终版(RTM=Release To Manufacture)之前的最后一个版本。广义上对测试有三个传统的称呼：alpha、beta、gamma，用来标识测试的阶段和范围。alpha 是指内测，即现在说的CB，指开发团队内部测试的版本或者有限用户体验测试版本。beta 是指公测，即针对所有用户公开的测试版本。然后做过一些修改，成为正式发布的候选版本时叫做gamma，现在叫做RC（Release Candidate）。

2020-09-03 09:46:54 1191

空空如也

空空如也