HTTP 缓存探究 最近在回顾缓存的一些知识点,先列出浏览器读取缓存过程会涉及到到的一些东西。 DNS 缓存查询过程DNS 缓存的目的主要是降低域名解析的时间延迟,最终解析成功之后,将所映射的 IP 返回给浏览器,并且于本地系统进行缓存,过程是递归的。 浏览器会检查浏览器缓存中有没有这个域名对应的解析过的 IP 地址。 如果用户浏览器缓存中没有数据,浏览器会查找操作系统缓存 hosts 文件中是否有这个域名对应的 2021-03-01 浏览器 缓存
利用 Workbox 为博客增加PWA功能 概览很早之前就了解过 Service Worker 再到后来的 PWA,并且一直想尝试为网站增加一些新的特性,尤其是 PWA 的可以将网站安装在桌面这一个功能非常吸引我,而正好 github-pages 是部署在 https 上,所以用 workbox 直接改造了基于 github-pages 的 hexo 个人博客。 PWA 的好处自然不用多说,其能发送快捷方式到桌面上这一功能,将用户的操作链由 2021-01-31 pwa Workbox
探究 webpack 异步加载原理以及热更新流程 异步加载应该分为代码模块的异步加载和路由的异步加载,但其原理基本都是一样的,我们先来看一个模块的异步加载。 模块异步加载初始化文件结构首先我们一步一步开始,新建一个目录 checkWebpackBundled,安装 webpack、webpack-cli、html-webpack-plugin、clean-webpack-plugin 最终生成的文件结构大概类似于: 12345678|-- che 2021-01-30 webpack
从零开始手写一个简单的 loader(二) 这是关于 webpack 的一些扩展。 从零开始手写一个简单的 loader(一) 里面已经生成了 html 字符串并且渲染到了页面。但是我们发现其样式无美感,那这一期我们增加一些样式,将生成的 html 渲染的像咱们博客中的那样。 首先我们需要的 loader 是 css-loader 和 style-loader,我们开始安装这两个依赖。css-loader 用于将 css 可以模块化的引入, 2021-01-26 webpack
从零开始手写一个简单的 loader(一) 重学 webpack 之后,对 webpack 的理解又上了一个层次,webpack 的 loader 作为其一个非常重要的链路,能用自定义的 loader 来处理日常工作中遇到的问题俨然已经成为了一个前端工程师的基本素养,所以最基本的要求就是能够手写自定义的 loader。 webpack 自身只能够处理 JS 和 JSON 文件,而作为非此二者的其他文件,webpack 也是支持其作为模块通过 2021-01-25 webpack
pipe 和 compose 在 JavaScript 中的应用 函数式编程的中从左往右的 pipe 函数和从右往左的 compose 函数,在 js 中的一些应用场景。 pipe也称为管道函数,它接受 n 多个函数,依次从左往右执行,用最后一个函数作为最终的输出。用于改善函数嵌套调用,一个简单的示例: 1234567891011function first (params) { return `我是第一个函数,我获取我的参数「${para 2021-01-17 JavaScript
reduce高级函数的一些应用 概要在最近的工作中,reduce 成为了出境率和使用率非常高的一个高阶函数,所以总结一下工作中以及 reduce 可能会实现的一些功能。 先简单说一下 reduce 函数,它的语法为 Array.reduce(callback, [initialValue]),接受的参数是: 第一个参数为一个回调函数,其回调函数接受四个参数分别为初始值(或者上次的回调函数的返回值)、当前元素、当前索引、原数组。 2021-01-15 JavaScript
实现一个简单的 vue 中的 EventBus 先分析一下 vue 中的一些用法 on 注册 this.$on('eventName', (...params) => {})其实我们在使用的过程中可以发现,$on的事件可以注册多次,也就是说可以在很多组件里进行一个事件的注册,在$emit 触发相应的事件的时候,对应注册的所有事件都会执行回调函数,所以我们能想到它的实现一定是,如果在一个对象中,注册了相同的事件,会一直往当前 2021-01-14 Vue
跨深组件传递数据和调用方法 在父子组件传递数据的时候,react 最常用的 传统简单的组件通信方式 父组件 —> 子组件 props 子组件 —> 父组件 callback但是有一些特殊的情况,比如是嵌套比较深的组件,A—>B—>C—>D 嵌套,一旦这种结果使用 props 传递数据,就会显得组件非常臃肿,而 react 有提供方式来解决,即 useContext 嵌套深的组件的通信 Reac 2021-01-03 react
记一次关于node中间层处理的文件上传 公司项目的架构是 umi —> nodejs —> api 在最近一次的需求中,有一个批量上传的功能,大体的交互是:在 excel 里先填写好数据,web 通过上传文件来在页面表格里预览,然后再将 excel 文件绑定一些表单的数据一起打包发送给后台,有点类似于表单中嵌套了文件上传,最后再提交表单。 一些想法和对交互的调整最初的页面设计是放在步骤条里一共分为三步。上传在步骤条的第一步 2021-01-01 react