强制缓存下更新文件
导读对于页面加载所需的资源，通常会利用浏览器自身的缓存策略避免重复加载，但每当版本迭代，总希望用户能访问最新的功能对应的文件资源，而不是缓存中的，特别是对于强制缓存而言，即使设置了Cache-Control:max-age=3156000，也会希望更新文件，以下就是可行的方案，共实际选择。 使用文件指纹笔者之前有过实践，在一个vue2的SPA项目中，可以通过文件指纹的方式，利用webpack的contenthash实现。 总体原理是旧版本的文件名是app.8934.js，已经被浏览器缓存，而其能被加载是因为index.html文件引入，而新版本app.9876.js由于没被引入没被缓存过，只要不缓存index.html，每次自然会引入新版本资源而不是旧版本资源。 12345module.exports = {output: { filename: '[name].[contenthash].js',},} 12345678910111213141516server { listen 80; ...
webpack实现外链跳转拦截插件
记录实现一个自己实现一个webpck的plugin用于实现所有的外链拦截跳转。后序可以增设一些配置项，作为更通用的插件。 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051const { Compilation } = require('webpack');class ExternalLinkInterceptorPlugin { apply(compiler) { compiler.hooks.compilation.tap('ExternalLinkInterceptorPlugin', (compilation) => { // 处理 HTML 文件 compilation.hooks.processAssets.tap( { name:...
Proxy实现加法拦截
题目描述请实现以下编程结果 12const result1 = add[1][2]+3 // 6const result2 = add[3][4][5]+6 //18 解答该题是记录了属性之和，考虑使用Proxy解答，其能捕获捕获或者拦截到[[get]]操作。 但要注意的是，通过+号两侧，左侧是对象右侧是数字，会涉及到隐式转换。对象需要调用Primitive方法转为原始类型才能和数字相加，这时访问的属性为Symbol.toPrimitive。 1234567891011121314const obj ={sum:0};const add = new Proxy(obj,{ get(target,prop,receiver){ if(prop == Symbol.toPrimitive){ const res =target.sum; target.sum = 0; return ()=>res } else { target.sum...
首屏优化策略和具体措施
...
并发请求与最大重试
题目要求手写一个函数，发送任意多个请求，其中有失败的，重发请求，直到所有的都成功或者超出最大重试的次数，才返回最终的结果。 代码逻辑在注释里，看注释解释 123456789101112131415161718192021222324252627282930//总请求函数function requestAll(urls = [], maxTries = 3) { return Promise.allSettled(urls.map(url=>singleRequest(url,maxTries)))}//外层单个请求定义function singleRequest(url, maxTries = 3) { return new Promise((resolve, reject) => { let requestCount = 0; //计数器 //内部定义循环调用 function _request(url) { ...
小程序的生命周期
...
css属性的继承
...
使用webpack启动react
123456789101112131415161718# 导读经常使用脚手架来启动react应用，但是在复杂项目中我们需要使用`webpack`自定义来优化我们项目具体的打包配置的，本篇主要是记录如何使用`webpack`而不是依赖于脚手架本身来构建`react`应用。# 安装webpack三件套首先，我们需要安装以下三个库| 库名 | 地址 | 用途 || ------------------ | ---- | ---- || webpack | | || webpack-cli | | || webpack-dev-server | | |```bashnpm i -D webpack@5 webpack-cli...
JavaScript脚本的延迟加载
导读本文主要总结了一些异步加载javascript脚本的方法和优缺点。 1. defer属性<script> 标签上的defer属性允许脚本在文档解析后加载，但在DOMContentLoad事件触发前执行，且仅适用于外部脚本。 1<script defer src="path/to/your-script.js> 2. async属性和defer类似，加载时不会阻塞HTML文档的解析，但是其在加载后立即执行，不会等到整个文档解析完成后才加载，导致其执行顺序是不确定的。 1<script async src="path/to/your-script.js> 3.动态创建script标签通过JS创建标签并插入到文档中 123var script = document.createElement('div')script.src =...
TypeScript中的泛型
导读近端时间面试一直提到``TypeScript`存在泛型，那么什么是泛型，有什么作用，实际的使用场景是什么呢？ 参考文档 泛型的定义一个概念，不管如何，首先从定义入手。 泛型（Generics）通过类型参数（Type Parameters）实现，类型参数是一个占位符，表示未来使用时可以传入的具体类型。在TypeScript中，泛型通常使用尖括号来表示，其中T是类型参数的名称（可以是任意标识符）。 泛型的基本语法 函数中的泛型 123function identity<T>(arg: T): T { return arg;} T 是类型参数，表示传入和返回的类型。 调用时可以显式指定类型，也可以让 TypeScript 自动推断。 类中的泛型 typescript 复制 123456789class Box<T> { private value: T; constructor(value: T) { this.value = value; ...