- 博客(25)
- 收藏
- 关注
RSS订阅
原创 虚拟dom的理解
虚拟dom的理解是什么 2. 能做什么 3. 如何做的 4. 做的怎么样 虚拟dom 就是描述真实dom 的js对象 优点： - 处理了浏览器兼容问题，避免用户操作真实dom - 内容经过了xss处理，可以防范xss攻击 - 实现了跨平台开发android，ios等 - 更新的时候可以实现差异更新，减少更新dom 的炒作 缺： - 虚拟dom的构建需要消耗额外的内存 - 首次渲染不一定更快 函数组件和类组件的相同不同点 相同点 - 都可以接受属性并且返回r
2022-03-27 20:27:47
1101
原创 react合成事件
React17之前的合成事件之前的事件绑定在document上<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale.
2022-03-27 11:32:01
704
原创 防抖与节流
debounce的特点是当事件快速连续不断触发时，动作只会执行一次。 延迟debounce，是在周期结束时执行，前缘debounce，是在周期开始时执行。但当触发有间断，且间断大于我们设定的时间间隔时，动作就会有多次执行。debounce 的实现：版本1: 周期内有新事件触发，清除旧定时器，重置新定时器；这种方法，需要高频的创建定时器。/ 暴力版： 定时器期间，有新操作时，清空旧定时器，重设新定时器var debounce = (fn, wait) => { let timer, time
2021-10-25 09:55:05
158
原创 vscode 下载 设置国内镜像
vscode 下载设置国内镜像将官网下载链接中的域名部分替换到国内服务器国内服务器地址：vscode.cdn.azure.cn
2021-09-25 14:11:46
2571
1
原创 AST 抽象语法树
AST 是什么抽象语法树 (Abstract Syntax Tree)，简称 AST，它是源代码语法结构的一种抽象表示。它以树状的形式表现编程语言的语法结构，树上的每个节点都表示源代码中的一种结构。AST 有什么用AST 运用广泛，比如：编辑器的错误提示、代码格式化、代码高亮、代码自动补全；elint、pretiier 对代码错误或风格的检查；webpack 通过 babel 转译 javascript 语法；并且如果你想了解 js 编译执行的原理，那么你就得了解 AST。AST 如何生
2021-07-18 12:13:16
2545
原创 组件 -可移动modal
前沿写这份文档也是基于最近开发业务采集平台中使用 antd modal 组件，使用这个组件完成新增表单的弹窗，然后再做这个项目时候，觉得弹窗能够移动好像是个不错的用户体验。于是自己也就重新写了个这样的组件。为什么写这个组件1.antd modal 不能移动。2.弹出动画在长期的开发过程视觉疲脑，虽然这个效果不错。3.组件的一劳永逸是最为重要想要什么效果首先来看这样一张图很清楚一个标准的弹框这些是必不可少的弹框的标题弹窗内部子元素弹窗的一个满屏背景关闭 x 按钮关闭按钮确认/提交
2021-07-18 12:12:56
472
原创 call apply bind的实现
实现callFunction.prototype.call2 = function (context) { var context = context || window; context.fn = this; var args = []; for(var i = 1, len = arguments.length; i < len; i++) { args.push('arguments[' + i + ']'); } var r
2021-07-18 12:11:32
73
原创 正则表达式
正则正则表达式中的特殊字符断言（Assertions）组和范围量词正则表达式中的特殊字符字符含义\依照下列规则匹配：在非特殊字符之前的反斜杠表示下一个字符是特殊字符，不能按照字面理解。例如，前面没有 “” 的 “b” 通常匹配小写字母 “b”，即字符会被作为字面理解，无论它出现在哪里。但如果前面加了 “”，它将不再匹配任何字符，而是表示一个字符边界。在特殊字符之前的反斜杠表示下一个字符不是特殊字符，应该按照字面理解。详情请参阅下文中的 “转义（Escaping）” 部分。如果你想将
2021-07-18 12:11:08
238
原创 webpack-打包优化
项目本身：减少依赖嵌套深度使用尽可能少的处理webpack层面：Dll处理通过include减少loader范围HappyPackUglify优化减少resolve,sourcemap,cache-loader用新版本的node和webpack代码分割多页面： 主业务代码 + 公共依赖 + 第三方包 + webpack运行代码单页面：主业务代码 + 异步模块 + 第三方包 + webpack运行代码1.单页面对于单页面，主要是拆分，减少体积，把需要异步加载的改成.
2021-04-29 12:17:40
385
原创 webpack—基础配置
1.webpack 命令官方解释：webpack是一个现代的JavaScript应用的静态模块打包工具。（1）使用全局webpackwebpack4以上版本 webpack-cli --entry ./app.js --output build.js webpack4以下版本 webpack --entry ./app.js --output build.js （2）使用本地webpackpackage.json文件中 增加下面命令，打包会优先使用项目中的webpack打包。使用默认配置
2021-04-29 10:11:55
885
原创 typescript- typescrip与react
对象的类型接口 Interfaces 一般首字母大写interface Person { readonly id: number; // 只读属性 不能修改 name: string; age: number; age?: number; // 可选 [propName: string]: any; // 任意属性 // 注意，}// 顺序 一般是 只读 -> 默认 -> 可选 -> 任意let tom: Person =
2021-04-28 11:39:58
249
原创 http请求 --浏览器缓存
http 请求 – 浏览器缓存基本介绍在Chrome浏览器中的控制台Network中size栏通常会有三种状态:a. 资源本身的大小 (如下图：197B)b. from memory cache (如下图：idnex.js)c. from disk cache (如下图：css.js)from memory cache代表使用内存中的缓存from memory cache 代表使用内存中的缓存，即请求的资源是直接从内存中拿到的，不会请求服务器。一般已经加载过该资源且资源已经缓存
2021-04-28 09:55:13
343
原创 tsconfig.json常用配置
// 常用配置{ /* tsconfig.json是ts编译器的配置文件，ts可以根据它的信息来对待吗进行编译 可以再tsconfig中写注释 include : 用来指定哪些文件需要被编译 exclude : 用来指定哪些文件不需要被编译 ：默认node_module extends : 用来指定继承的配置文件 files : 用来指定被编译的文件列表，只有编译少量文件才使用 compilerOptions : 编译器的选项
2021-04-27 10:02:03
190
原创 webpack 打包优化
webpack 打包优化速度优化优化图片使用 url-loader 优化， 将小图片转化成base64压缩,防止小图片太多请求次数太多。：下载 url-loader npm install -D url-loader2: 配置 在 webpack.prod.conf.js 文件夹中配置 module: { rules: [{ test: /\.(png|svg|jpg|gif)$/, use: [{
2021-03-14 11:17:02
99
原创 js逻辑运算符
||运算方法： 只要“||”前面为false,不管“||”后面是true还是false，都返回“||”后面的值。 只要“||”前面为true,不管“||”后面是true还是false，都返回“||”前面的值。总结：真前假后&&运算方法： 只要“&&”前面是false，无论“&&”后面是true还是false，结果都将返“&&”前面的值; 只要“&&”前面是true，无论“&&”后面是true
2021-02-14 14:47:13
131
原创 react hooks
react hooks常用 hook1. useState2.useEffect3. useLayoutEffect4 .useContext5. useReducer6. useRef7 .useMemo8. useCallback自定义 hooks常用 hook1. useState const [state, setState] = useState(initialState)useState 有一个参数，该参数可以为任意数据类型，一般用作默认值useState 返回值为一个数组，数组的
2021-02-14 14:31:56
152
原创 eslint
eslintmodule.exports = { "env": { "browser": true, "commonjs": true, "es6": true }, "extends": "eslint:recommended", "globals": { "$": true, "process": true, "__dirname": true }, "parser": "babel-eslint", "parserOptio
2021-01-09 09:36:14
88
原创 git命令--
git新建配置帮助状态信息添加删除分支检出远程同步撤销commitdiffgreplogmergemvtagpullcirebase (谨慎使用)reset (谨慎使用)其他新建创建一个新的 git 版本库。这个版本库的配置、存储等信息会被保存到.git 文件夹中# 初始化当前项目$ git init# 新建一个目录，将其初始化为Git代码库$ git init [project-name]# 在指定目录创建一个空的 Git 仓库。运行这个命令会创建一个名为 directory，只包含
2020-12-13 12:01:16
456
原创 webpack
webpackwebpack构建流程从启动webpack构建到输出结果经历了一系列过程，它们是：解析webpack配置参数，合并从shell传入和webpack.config.js文件里配置的参数，生产最后的配置结果。注册所有配置的插件，好让插件监听webpack构建生命周期的事件节点，以做出对应的反应。从配置的entry入口文件开始解析文件构建AST语法树，找出每个文件所依赖的文件，递归下去。在解析文件递归的过程中根据文件类型和loader配置找出合适的loader用来对文件进行转换。
2020-12-06 15:21:19
164
原创 闭包
闭包闭包的定义闭包是指有权访问另一个函数作用域中的变量的函数。创建闭包的常见方式，就是在一个函数内部创建另一个函数。js垃圾回收机制：js 中的变量和函数不再使用后，会被自动js垃圾回收机制回收。形成闭包的条件：有函数/作用域的嵌套；内部函数引用外部函数的变量/参数。用途1. 读取函数内部的变量。2. 让这些变量的值始终保持在内存中。不会在f1调用后被自动清除。3. 方便调用上下文的局部变量。利于代码封装。4. 闭包的应用比较典型是定义模块，我们将操作函数暴露给外部，而细节隐藏
2020-12-06 15:12:41
88
原创 git 常用命令
git常用命令git 常用命令操作新建分支删除分支提交代码代码回退查看分支git 常用命令操作自己工作中长用到的命令操作新建分支git checkout -b ‘新的分支名称’删除分支提交代码git add ‘文件名称’git add . 提交所有文件git commit -m ‘提交信息’git commit -am ‘提交信息’ // 俩步合为一步git push代码回退查看分支...
2020-12-02 19:48:10
721
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人