12 2019 档案

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

点击右上角即可分享
微信分享提示