一些细碎的小点-CSDN博客

本文链接：https://blog.csdn.net/weixin_43992524/article/details/123929997

document.documentElement和document.body的区别
页面具有 DTD，或者说指定了 DOCTYPE 时，使用 document.documentElement。

页面不具有 DTD，或者说没有指定了 DOCTYPE，时，使用 document.body。

document.documentElement 是整个节点树的根节点即<html>
document.body 是DOM对象里面的body子节点即<body>
没有DTD的时候documentElement.scrollTop 的值为0
反之document.body.scrollTop 的值为0

contentType: x-www-form-urlencoded 能够在 post 请求时将参数以键值对的形式放在 body 里，在 GET 请求时又会拼接在 url 后面，所以在后端即使用对象接收也能正常解析。RequestBody 注解本质上根据请求的 content-type 来寻找 HttpMessageConverter 做参数匹配的，具体的参数解析可以从源码 HandlerMethodArgumentResolverComposite 类的 resolveArgument 方法看起。

命名导出（Named Exports）
React.lazy 目前只支持默认导出（default exports）。如果你想被引入的模块使用命名导出（named exports），你可以创建一个中间模块，来重新导出为默认模块。这能保证 tree shaking 不会出错，并且不必引入不需要的组件。

// ManyComponents.js
export const MyComponent = /* ... */;
export const MyUnusedComponent = /* ... */;
// MyComponent.js
export { MyComponent as default } from "./ManyComponents.js";
// MyApp.js
import React, { lazy } from 'react';
const MyComponent = lazy(() => import("./MyComponent.js"));

Javascript中类的私有变量是使用闭包弱映射来实现的

const User = ()=>{
	const wm = new WeakMap();
	class User{
		constructor(id){
			this.idProperty = Symbol('id')
			this.setId(id)
		}
		setProperty(property, value){
			const privateMembers = wm.get(this) || {};
			privateMembers[property] = value;
			wm.set(this, privateMembers);
		}
		getProperty(property){
			return wm.get(property)
		}
		setId(id) {
			this.setProperty(this.idProperty, id);
		}
		getId(){
			return this.getProperty(this.idProperty)
		}
	}
	return User;
}

Javascript 中使用生成器来进行深度优先遍历来判断图是否连通
：

function isConnected() {
	const isadjined = new Set();
	const firseNodes = nodes[Symbol.iteraror]().next().value;
	function *traverse(nodes){
		for(const node of nodes){
			if(!jsadjined.has(nodes)){
				yield node;
				yield *traverse(node.neibhbors);
			}
		}
	}
	for(const node of traverse([firstNodes])){
		isadjined.add(node);
	}
	return siadjined.size === this.nodes.size;
}

JavaScript中也能申明抽象基类使用new.target来

缓存策略的基本实现目标：

尽可能地命中本地缓存，减少请求、加快响应
后台资源更新可以及时获取

常用策略：

首先对资源使用哈希命名（结合 webpack 的 contenthash 等），让文件名基于文件内容命名，如果内容改变，文件名也会改变，这样浏览器会认为资源改变，而重新请求
对 html 资源使用协商缓存，总要与后台保持最新
js、png、css 资源使用强缓存，尽量命中本地
如果 js、png、css 等资源更新，其对应文件命名也会改变，从而导致 html 对应的标签发生更新，导致 html 资源的更新，浏览器能够重新请求 html 文档，再基于新文档所引用的资源，判断对应的缓存是否存在，不存在的重新请求，存在的直接命中缓存