前端基本知识点查漏补缺

1、React 路由之HashHistory以及BrowserHistory的区别

1.原理上

  • HashRouter:利用hash实现路由切换,在路径中包含了#,相当于HTML的锚点定位。(# 符号的英文叫hash,所以叫HashRouter)
  • BrowserRouter:利用h5 Api实现路由切换,主要是借助history对象,H5引入了history.pushState()和history.replaceState()方法,它们分别可以添加和修改历史记录的条目,这些方法通常与window.onpopstate配合使用。

2、用法上

  • BrowserRouter进行组件跳转时可以传递任意参数实现组件间的通信
  • HashRouter不能(除非手动拼接URL字符串),因此一般配合Redux使用,实现组件间的数据通信。

3、生产实践上

  • 因为BrowserRouter模式下请求的链接都是ip地址:端口/xxxx/xxxx,因此相当于每个URL都会访问一个不同的后端地址,如果后端没有覆盖到路由就会产生404错误

  • 使用BrowserHistory路由方式,可以借助react-router-dom包的Prompt组件进行路由拦截的返回提示。

import {Prompt} from 'react-router-dom';

          {/* 新建商品表单返回拦截 */}
            {
                !isEditStatus && formIsDirty && !get(edit, 'addCancel') && <Prompt message={(location, action) => {
                    if (action === 'POP') {
                        baiduMonitor('pro_add_form_back');
                        // 处理Prompt之后,浏览器由于pop缺少当前页路由记录,导致返回按钮置灰不可点问题
                        history.pushState(null, null, window.location.href);
                        return formIsDirty ? '离开此页面?系统可能不会保留您所做的更改。' : true;
                    }
                    return true;
                }}
                />
            }

2、判断数组的方法

(1)target instanceof Array

(2) Array.isArray(target)

(3) target.constructor === Array

3、for-in与for-of的区别

参考:for in 和 for of 的区别 - 简书

for-of:一般用于遍历数组
for-in: 一般用于遍历对象

4、http和https区别,以及https加解密

https://blog.csdn.net/cogo_Time/article/details/102926898?spm=1001.2101.3001.6650.3&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EOPENSEARCH%7ERate-3-102926898-blog-69055578.pc_relevant_vip_default&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EOPENSEARCH%7ERate-3-102926898-blog-69055578.pc_relevant_vip_default&utm_relevant_index=4

首先服务器像证书机构进行证书申请:
实际得到的证书是证书机构例如CA通过自己的私钥,将服务器提交的信息(服务器公钥,域名等)进行了签名,最终证书就包含(签名+服务器信息)

当客户端发起HTTPS请求时,
首先客户端发起一次Client Hello:附加支持的TLS版本,对称算法,非对称算法,Hash算法,客户端本地随机数
服务器收到后回应一次Server Hello,附加为确定选用的TLS版本,对称算法,非对称算法,Hash算法,服务端本地随机数。
接着服务器发起一次证书传递通信,将证书+证书机构信息(证书机构公钥,签发机构名称,位置等信息)交给操作系统根证书进行私钥签名并发送
客户端收到后,首先也是通过操作系统公钥进行签名解密与(证书+证书机构信息)Hash后验证。确定无误后,再通过证书的公钥对证书签名进行解密以及Hash验证,确认无误后即确定服务器公钥无误。

接着客户端生成一个pre master secret(随机数),通过服务器公钥加密,发送给服务器,接着客户端和服务端利用之前的随机数以及pre master secret生成对称加密的秘钥开始进行对称加密通信。


通用埋点方案需要考虑到以下几个方面:

  1. 埋点数据的采集方式
  2. 埋点数据的传输方式
  3. 埋点数据的存储和分析方式

下面分别介绍这三个方面的解决方案。

采集方式

前端的埋点数据采集方式一般有以下几种:

  1. 手动埋点:通过在页面中插入JavaScript代码,手动埋点来收集用户行为数据。
  2. 自动埋点:通过使用框架或第三方库,自动化地收集用户行为数据。

手动埋点需要开发者手动添加埋点代码,并且对于动态生成的元素,需要在其生成时手动添加埋点代码。自动埋点则是通过框架或第三方库的方式实现,可以自动识别页面中的元素,并为其添加埋点代码。

传输方式

一般来说,前端埋点数据的传输方式有以下几种:

  1. 直接上报:在浏览器端通过Ajax请求将埋点数据直接上报到后端服务器。
  2. 间接上报:通过将埋点数据存储在浏览器的localStorage或cookie中,在用户下一次请求时一并上传到后端服务器。
  3. 使用第三方服务:通过调用第三方服务(如百度统计、Google Analytics等)的API,将埋点数据上传到第三方服务的服务器上。

直接上报的方式可以实时地将数据上传到后端服务器,但是可能会增加服务器的负担,同时还需要考虑到跨域请求的问题。间接上报的方式可以减少服务器的压力,但是需要考虑到数据的实时性和存储容量的问题。使用第三方服务的方式可以减少服务器的负担,并且可以使用第三方服务的分析和监控功能。

存储和分析方式

前端埋点数据的存储和分析方式可以选择自己搭建数据分析平台,也可以选择使用第三方数据分析服务。自己搭建数据分析平台可以更好地控制数据的安全和隐私,同时可以根据实际需求自定义数据分析和展示方式。使用第三方数据分析服务可以省去搭建平台的成本和人力,同时可以直接使用第三方的分析和展示工具。

综上所述,前端通用埋点方案需要根据实际情况选择采集方式、传输方式和存储和分析方式。一般来说,手动埋点和自动埋点结合的方式比较常用,使用Ajax请求或第三方服务的方式进行数据传输,使用自己搭建平台或第三方数据分析服务进行数据存储。


React 生命周期方法在hook中进行模拟


猜你喜欢

转载自blog.csdn.net/qq_39207948/article/details/128803573