跳到主要内容

TypeScript 中的装饰器原理

· 阅读需 27 分钟
多云转晴
前端开发

定义、分类

定义

装饰器本质上就是一个函数,可以“注入”到类、方法、属性、对象上,用于扩展其功能。

分类:

  • 类装饰器
  • 属性装饰器
  • 方法装饰器
  • 方法的参数装饰器
  • 元数据装饰器

装饰器通常有两种写法:

  1. 调用时不传递参数的装饰器;
  2. 装饰器工厂,调用时可以传递参数的装饰器;

浏览器缓存

· 阅读需 7 分钟
多云转晴
前端开发

浏览器的缓存类型比较多,例如:

  • HTTP Cache: HTTP 缓存;
  • Disk Cache: 将缓存写入到硬盘中;
  • Memory Cache: 将缓存写入到内存中;
  • Service Worker Cache;

强缓存

Disk CacheMemory Cache 属于强缓存,是 HTTP 缓存的产物,强缓存的产生依赖于请求响应中的 cache-controlexpires 的 headers 字段。这两个字段都用来设置缓存数据的有效时间。

强缓存

手写 Promise A+(一):实现 then 方法

· 阅读需 12 分钟
多云转晴
前端开发

promise 如今已经深度融入前端开发技术当中,很多模块内部都依赖 promise,使用 promise 可以很好的解决异步回调问题。

promise 内部有三种状态:预备态(pending)、成功态(fulfilled)和失败态(rejected)。初始状态是 pending,当操作完成时会变成成功态,如果操作出现异常而终止时它会变成失败状态(或拒绝态)。一旦 promise 被履行或者被拒绝,它就不可逆转,即不能从成功态再变回其他状态,状态之间不能再相互转换。此时的 promise 可以认为是完成状态(settled)。

HTTP 缓存机制

· 阅读需 10 分钟
多云转晴
前端开发

HTTP 缓存不是必须的,但重用缓存的资源通常是必要的。它可以减少服务器的压力,如果不使用缓存,每次发起请求都要求服务器发送相应数据,很多时候服务器发来的内容并没有发生变化,就会“浪费”服务器带宽。可以在客户端设置缓存,给缓存加上过期时间,如果期限没到就是用本地缓存的内容。然而常见的 HTTP 缓存只能存储 GET 响应,对于其他类型的响应则无能为力。

react-redux Hook 使用、性能优化以及与 Vue 的对比

· 阅读需 6 分钟
多云转晴
前端开发

redux

下图是 Redux 的工作流程图。
redux工作流程图 图中更新数据需要派发 Action,action 进入 dispatch,dispatch 中可能还会触发 action,比如使用 redux-thunk 中间件进行异步请求时,还会派发 action。然后 dispatch 函数会把 action 传递给 reducer 函数,reducer 用于状态的变更,状态变更后引起视图(View)更新。

PWA 入门教程

· 阅读需 18 分钟
多云转晴
前端开发

渐进式 web 应用 (Progressive web apps) 简称为 PWA。它可以给用户原生应用的体验。

之所以称为“渐进式”,是因为给网站架设 PWA 并不影响原有的网页(或者说不需要代码层面的重构),这是一个独立的功能,你可以选择性添加该功能。

PWA 的主要作用:可以让网站安装到设备的主屏幕上,就像用户在 APP 商店下载应用后这个应用的图标会放在桌面上。PWA 不需要用户通过应用商店进行下载,当你访问某个站点时,该站点如果支持 PWA,它会提示你可以将这个站点添加到桌面上。

PWA 在没有出实现时,可以通过右键“另存为”添加到桌面,但添加到桌面是一个 HTML 文件,当你点击访问时会跳转到浏览器加载。频繁访问某个站点时,我们一般会把它收藏起来。PWA 出现之后,添加到桌面的图标我们可以自定义,还可以自定义首次进入 app 的画面,而且它不再使用浏览器打开,而是像原生应用一样打开,没有 url 地址输入框。PWA 还支持离线缓存,当用户没有网络时也能利用缓存展示页面信息。