12 2019 档案
摘要:promiseA+规范;测试 1. Promise源码 isPromise函数 resolvePromise函数 Promise源码 2. 测试是否符合规范 1.全局安装测试命令工具 2. 在代码中添加 3. 使用命令工具测试
阅读全文
摘要:当node中异步读取文件(在所有的同步任务执行完成之后执行的任务)操作,需要并行执行完成后调用某函数: 1. 自定义函数after 2. 发布订阅模式 发布订阅模式的本质是,订阅的函数存入队列,每次发布的时候全部执行。
阅读全文
摘要:redux-saga是一个redux的中间件。普通的reducer函数只能是纯函数(输出由输入决定;不会改变作用域之外的值),并且只能处理同步操作。而redux-saga可以监听并执行异步操作和其他副作用。 1. redux-saga分类 redux-saga分为三类: 1. root saga 启
阅读全文
摘要:1. 数组去重 有一个数组 [ 7, 8, 3, 5, 1, 2, 4, 3, 1 ],写一个diff方法来“去重”并“输出从大到小”的“货币格式”。期望结果:"8,754,321" const arr = [ 7, 8, 3, 5, 1, 2, 4, 3, 1 ]; let unique = [.
阅读全文
摘要:React-Redux是在Redux的基础上,将其大量重复的代码进行了封装。 1. Provider 利用context对象给所有子组件提供store。不再需要在每个组件都引用store。 2. connect 该方法封装了大量的逻辑,主要如下:
阅读全文
摘要:Redux是一个状态管理库,一般用于大型应用中。它出现的原因是,应用越来越复杂, 通过状态提升已经不能满足应用的需求。 1. Redux设计思想 1. 将整个应用的状态state(一个状态树)存在一个仓库中,唯一一个store中。 2. 组件通过store的dispatch方法,派发动作action
阅读全文
摘要:React-Router是React项目中处理路由的库。 1. HashRouter 通过hashchange监听路由的变化,通过window.location.hash赋值触发监听的变化。 本质是一个react中的context对象,向下传参,传递参数有三种: 1. location 有四个属性:
阅读全文
摘要:plugin是webpack生态的重要组成,它为用户提供了一种可以直接访问到webpack编译过程的方式。它可以访问到编译过程触发的所有关键事件。 1. 基本概念 1. 如何实现一个插件 1. plugin实际是一个类(构造函数),通过在plugins配置中实例化进行调用。 2. 它在原型对象上指定
阅读全文
摘要:想要实现一个loader,需要首先了解loader的基本原理和用法。 1. 使用 loader是处理模块的解析器。 2.自定义loader的查找规则 很多时候,我们可以自己定义loader, 比如在根目录下新建一个loaders的文件夹,文件夹内实现各个loader的代码。但是webpack不识别这
阅读全文
摘要:1. devtool代码调试 1. 生产模式下 source-map: 生成一个map文件,直接定位到源码的行列 ✅可以使用该模式,用于测试服务器 cheap-source-map: 只能定位到行,且只能定位到babel转码后的代码 cheap-module-source-map: 只能定位到行,但
阅读全文
摘要:通过使用插件和配置插件的参数。 1. 打包速度分析 首先通过speed-measure-webpack-plugin分析打包的各个插件和loader的耗时。然后具体问题,具体分析。 按照插件 使用时该插件需要将整个配置对象包裹 2 启动js压缩插件的并行和缓存配置 webpack中对js进行压缩的插
阅读全文
摘要:webpack打包的体积越小,对于部署应用的网站来说,性能越好,加载速度越快。 1. 分析打包文件 1. 生成统计信息文件 首先需要通过webpack命令生成统计信息的文件。在package.json的脚本中添加命令 上面的命令会在根目录下生成一个stats.json的打包统计信息文件。 2. 可视
阅读全文
摘要:随着项目的增大,项目运行速度会越来越慢,导致影响开发进度。需要提升开发时代码的运行速度。 1. ScopeHoisting作用域提升 该插件在production模式下默认开启。development下需要手动启动。 1 .使用条件 和TreeShaking一样,必须使用ES6的模块,使用impor
阅读全文
摘要:1. Request Header 用于说明请求来自哪个站点,使用时对应服务端Access-Control-Allow-Origin 示例: 指明目标服务器的域名和端口。必须存在,否则会出现400错误。 示例: 示例: 多数情况下,它是当前页面的路由地址。(Origin的完整版) 当从一个网站访问另
阅读全文
摘要:MIME类型,也叫媒体类型。用来定义一个文档/文件/字节流的性质和格式。 大小写不敏感,但是一般都是小写。 通用格式如下: type/subType // 其中type是主类型,分为单独类型和复合类型两种。 // 单独类型(根据文件分类)有:text(普通文本)、application(二进制数据)
阅读全文
摘要:meta标签是网页元标签。可以定义一些网站的功能。 1. name属性 name属性的通用格式如下: 常见的值有如下几种: 1. viewport 定义浏览器窗口的视窗为自适应大小 2. keywords 指定当前页面对于搜索引擎的关键字 3. description 告诉搜索引擎当前页面的主要内容
阅读全文
摘要:浏览器缓存是优化网站,提升网站性能的有效方法。 浏览器缓存一般指对服务器返回静态资源(html、js、css文件,图片,数据)在客户端的备份。(不考虑ajax请求) 👇基于Chrome浏览器版本 78.0.3904.97(正式版本);firefox默认过期时间都是0,设置其他值也无效。 1. 浏览
阅读全文
摘要:React Hook是React16.8.0引入的。使可以在不引入class的情况下,可以使用state和其他React特性。 hooks本质上是一些函数。 1. 为什么引入Hook? 1. hooks中的useEffect可以解决class中各逻辑在生命周期函数中管理混乱的问题。 2.hooks中
阅读全文
摘要:URLSearchParams对象用于处理URL中查询字符串,即?之后的部分。 1.语法 其实例对象的用法和Set数据结构类似。实例对象本身是可遍历对象。但是不是遍历器。 2. 实例操作方法 1. has(key) 2.get(key) 3.getAll(key) 当同一个键值对应多个值时用该方法
阅读全文
摘要:1. 只读属性 1. length 表示当前窗口访问过的url的数量;或者手动pushState之后的length。 2.state 表示当前地址栏中网址对应的状态。 2. 方法 1. 刷新网页-back()、forward()、go(num) 1. 回退一个地址,相当于浏览器的后退键;对第一个网址
阅读全文
摘要:1. 安装eslint npm install eslint --save-dev // 或者 yarn add eslint --dev 2. 初始化配置文件 npx eslint --init //进入问题配置页面 选择Airbnb会自动安装react相关的插件,包含eslint-plugin-
阅读全文
摘要:在实际开发过程中,经常遇到根据props和state变化,重新计算“渲染阶段”需要的数据的情况。 如:根据输入的值实时过滤select列表,或者表格数据(查询过滤)。 问题特点: 1. 每次渲染都会调用相关操作 2. 进行的操作都是和渲染相关的,如根据参数计算渲染需要的数据 常用方法: 1)在get
阅读全文
摘要:如果想通过props来重置state的值。有3种方法: 1. 最好的方法:key属性 修改key属性的值,可以使组件卸载后重新加载。所有的状态全部重置。 这种情况可以给key设一个每次渲染都会改变的值。 而且在多层嵌套的情况下,避免了组件的diff。 (递归实现树状级联组件,且节点带有状态时,每次都
阅读全文
摘要:测试用例: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http
阅读全文
摘要:1. console面板展示 1.全屏展示 打开开发者工具(option+cmd+i),点击console的tab 2. 在其他面板展示的同时展示console面板 1)esc快捷命令 2)或者选择打开右上角的Customize and controlled Devtool, 然后选择show Co
阅读全文
摘要:1. propTypes 用于进行props的类型检查;来自于prop-types库。 该方法适用于函数组件和class组件。 如果使用了@babel/plugin-proposal-class-properties插件, 可以直接在组件内部作为静态属性。 在组件(class组件和函数组件都适用)外
阅读全文