前端开发中疏漏知识点补充

1.导入异步组件

<1>使用工厂函数：

只有在需要渲染异步组件的时候才会被下载和编译

Vue.component('xxx',()=>import('./xxx...'))

需要使用大量数据时：比如仪表盘（有大量图标）

<2>错误处理：工厂函数的第二个参数

Vue.component('xxx',()=>import('./xxx...'),err=>{
    console.log('捕捉到了错误')
})

<3>缺点：

①多发网络请求；②多个异步组件会有加载顺序的问题；③异步组件嵌套通信

2.性能优化

<1>可以对图片进行优化，比如图片的格式，使用base64、CSSSprite或者iconfont、webP之类，刚进入页面的时候使用压缩的比较厉害的图片作为预览，

<2>组件的懒加载、路由懒加载，提高页面性能

<3>减少HTTP请求，将多个信息整合到一个请求中，也可以使用分页加载，每次只获取一部分数据；

<4>代码优化：比如使用事件委托、减少DOM操作次数

<5>获取到数据之后可以采用vuex和缓存，防止多次请求

3.webSocket的了解

一个全双工通信协议，服务器端也可以主动向前端发送消息

场景：家装小程序的联系客服、物流的实时追踪、家具仓储管理系统中的echarts的实时更新

难点

①连接的建立、断开、错误处理，定时发送心跳包

②消息具有不同的类型，需要匹配不同的解析方式

③跨域问题：代理服务器

④多并发处理，有可能同时收到多条数据，需要考虑顺序

4.购物车中登录token过期自动刷新

为了用户在进行某些操作的时候更加连贯，不会因为token过期导致体验感很差，当用户在那些页面当中时，使用fresh_token来进行token的自动刷新

5.uniapp中用到过哪些api

<1>uni.getPosition；uni.createMapContext；uni.setStorage；uni.getStorage；uni.connectSocket

6.有哪些场景使用到了扩展运算符

①计算当前商品所有样式中的最大值，因为得到的是一个数组，可以采用Math.max来获取；
②动态创建用户路由的时候，将用户路由追加到路由表

7.ssl协议

应用层通信协议

第一阶段确认SSL版本、加密算法压缩算法之类

第二阶段握手（服务器端单方面发送消息、客户端单方面发送消息）

服务器端获取证书和客户端密钥

第三阶段通信建立完成（通过加密的finished消息来确认）

通信过一次之后，采用会话恢复跳过整个握手阶段来减少开销

8.通常采用的布局方式

小程序移动端：弹性布局

网页端：自适应布局，媒体查询

布局中遇见的问题

①表格容器产生滚动条导致当前页面被撑开（打开弹窗组件）：将那个滚动条禁用

②提示框的优先级比其他内容高，而且有一层遮罩，导致其他内容被压在提示框下：z-index

给默认大盒子设置一个长宽100%，还是不会充满整个视图：给这个盒子一个固定定位，然后将z-index降低

9.echarts大数据表格优化

1.非必要取消一切动画，减少不必要的触发事件

2.showSymbol属性不画数据点，不和tooltip一起使用

3.数据压缩

4.改成plotly.js

10.登录时，授权之后才提示没有勾选同意协议

可以用户点击登录之后，弹出一个窗口包含两个按钮（同意协议、取消），这样来间接勾选协议

11.如果内页跳转循环导致路由记录达到上限

<1>小程序的几种路由跳转方式：

①wx.switchTab关闭其他所有页面，打开一个tabbar页面

②wx.reLaunch关闭其他所有页面，重新打开一个页面

③wx.redirectTo关闭当前页面，打开一个新页面（除了tabbar）

④wx.navigateTo保留当前页面，新打开一个页面，可以使用wx.navigateBack回跳到这个页面

⑤wx.navigateBack回到前一个或前几个页面，可以使用getCurrentPages 决定返回几层

<2>步骤

getcurrentPages获取的页面栈是一个数组，遍历判断当前需要跳转的路径是否在这个数组中（每一个路由是’/'pages.route)

let route = ‘当前要跳转的路由地址’
// 获取当前所有页面路由
let pages = getcurrentPages()
// 判断路由是否重复的标志（1为不重复，2开始为重复）
let is_repeat = 1
// 判断重复的路由下表
let index = ''
pages.forEach((item, i) => {
	// 变为绝对地址
	const current = '/' + item.route
	if(route === current){
		// 往上加，判断重复的个数
		is_repeat++
		index = i
	}
}
// 通过判断当前重复的路由个数来决定路由跳转方式
if(is_repeat === 2){
	// 只重复一个
	wx.navigateBack(pages.length - index - 1)
} else {
	// 重复一个或重复多个，判断当前是否已经到达路由上限10
	if(pages.length !== 10){
		wx.navigateTo({
			url: route
		})
	} else {
		wx.redirectTo({
			url: route
		})
	}
}

12.输入框达到输入长度上限，却还能复制粘贴外文字符（半角）

13.普通表单输入提交有没有遇到过什么问题

14.vue项目跳转外部链接，怎么实现

有两种方法：

// 第一种：使用window.location.protocol来跳转
let path = window.location.protocol + '//' + url
window.location.href = path

// 第二种：使用window.open，target表示跳转的方式（'_blank'在新窗口打开，'_self'在当前窗口打开）
window.open(url, target)

(持续补充中…）