前端一点小技巧
点击 x 按钮时重复发送了两个请求，想要查看哪里触发了两次请求。可以使用 console.trace('here ') 来查看调用路径。
结合 clip-path 做动画。clip-path 是用来裁剪的，使用 transform 可以做一些位移，大小，旋转的动画，而使用 clip-path 能够做一些变化的动画。
<style>
.change-img {
width: 500px;
height: 500px;
display: inline-block;
filter: blur(5px);
clip-path: circle(40% at 50% 50%);
transition: clip-path 400ms ease;
}
.change-img:hover {
clip-path: circle(50% at 50% 50%);
filter: none;
}
</style>
<img class="change-img" src="./assets/images/1.jpg" />
- HTTPS 问题
htpps 要解决的问题就是中间人攻击。
中间人攻击的方式常见有两种：1 域名污染。2.APR 欺骗。
https 连接的过程：服务器发送它的证书给浏览器（客户端），浏览器确认证书正确，并检查证书中对应的主机名是否正确，如果正确则双方加密数据后发给对方，对方再进行解密，保证数据是不透明的。
-
0.1+0.2 不等于 0.3
0.1+0.2 不等于 0.3 这是一个普遍的问题，js 输出 0.3000000004。python 也是这个数，c 语言返回的也不是 0.3，这是因为计算机内部使用二进制来表示浮点数，而在二进制中，有些小叔无法准备表示，就像十进制中有些小数无法用有限的位数准备表示一样。
-
优化双重循环
在处理数组元素的存在性检查时，我们可以利用 Map 或 Set 的高效查找能力。通过将数组元素存储在 Map 或 Set 中，我们可以使用 has 方法来替代数组的 find 或 includes 方法。这样，我们可以将检查元素存在性的时间复杂度从 O(n) 降低到平均 O(1)。因此，当需要判断一个数组中的元素是否出现在另一个数组中时，使用 Set.has() 替换 Array.find() 或 Array.includes() 可以将整体操作的时间复杂度从 O(n^2) 降低到 O(n)。不过，值得注意的是，在处理小数据量时，使用传统的 for 循环可能更方便和简单，因为它避免了额外的数据结构转换开销，并且代码更直观。
- 统一的登录服务
postMessage API 是一种安全地实现不同源之间通信的方法，它可以用于在父页面和嵌入的 iframe（来自不同源）之间传递消息。以下是如何在 H5 或管理后台中使用 postMessage 来传递登录信息的步骤：
在父页面（承载 iframe 的页面）中：
嵌入 Iframe：将登录页面作为一个 iframe 嵌入到父页面中。
监听消息：在父页面中，添加一个事件监听器来接收来自 iframe 的消息。
window.addEventListener(
'message',
function (event) {
// 确保消息来自您信任的源
if (event.origin !== 'https://trusted-login-source.com') {
return
}
// 处理接收到的登录信息
var loginData = event.data
if (loginData.type === 'loginSuccess') {
// 登录成功，loginData.payload 包含登录令牌或其他认证信息
handleLoginSuccess(loginData.payload)
}
},
false
)
function handleLoginSuccess(authData) {
// 使用authData来设置用户的登录状态
// 例如，保存令牌，更新UI等
}
在子页面（iframe 中的登录页面）中：
登录逻辑：用户在 iframe 内的表单中输入登录信息并提交。
发送消息：一旦后端验证用户凭证并返回登录成功的信号，使用 postMessage 将登录信息发送到父页面。
// 假设验证登录成功，并获取了认证信息authData
window.parent.postMessage(
{
type: 'loginSuccess',
payload: authData
},
'https://parent-website.com'
) // 父页面的源
在 App 中的实现：
对于原生 App，postMessage API 通常不适用，因为它是为 Web 页面间通信设计的。但是，您可以使用类似的机制来实现通信：
Web 视图：在 App 中使用 Web 视图（如 WebView）来加载登录页面。
桥接通信：大多数移动应用框架提供了一种机制来在 WebView 和原生代码之间进行桥接通信。例如，在 iOS 中，您可以使用 WKScriptMessageHandler，在 Android 中，您可以使用 addJavascriptInterface。
发送消息：在登录成功后，可以通过这个桥接机制将登录信息从 WebView 传递到原生 App 环境，然后 App 可以据此更新用户的登录状态。
- 移动端 click 及自定义事件
<style>
html {
touch-action: manipulation; // 取消300ms延迟。
}
</style>
- 安全的类型检测
判断一个变量是否为一个数组。通常的做法是使用 instanceof.
let data = [1, 2, 3]
console.log(data instanceof Array) //true
但是在iframe里判断父级窗口的变量是否为数组时，会失败。这个是因为Array!==window.parent.Array.它们分别是两个函数，父窗口定义了一个，子窗口定义了 i 个，内存地址不一样，内存地址不一样的Object等式判断不成立，而window.parent.arrayData.constructor返回的是父窗口的Array,比较的时候是在子窗口，使用的是子窗口的Array,这两个Array不相等，所以导致判断不成立。
