前端开发笔记2（Js、Css）

JS相关

倒换数组顺序

arr.reverse()

裁剪

var croppedStr = str.slice(0, 10);

var croppedStr = str.substring(0, 10);

提取某项当tabbar

this.topBarList = [...new Set(this.kapLists.map(item => item.expname))];

读取属性出错

如：接收后端数据，通过【&&】递进判断，就不会因为读取【undefined】的属性而报错

if (res && res.data && res.data.code === 200) {
	// 继续处理正常情况下的逻辑
} else {
	// 处理异常或错误情况
}

深拷贝

方式一：JSON.parse( JSON.string( xxx ) )会破坏xxx的函数，不适合复杂类型

方式二：Lodash.js，官网：www.lodashjs.com

#安装
cnpm i lodash -s

#全导+单导
improt _ from 'lodash'
improt {cloneDeep} from 'lodash'

#使用
let b = cloneDeep(a)

走马灯后端图片渲染空白

element-ui的走马灯组件<el-carousel>在动态绑定后端返回的数据渲染时，会出现初始页空白，需要点击才会出现图片，可以添加 v-if 解决

<el-carousel v-if='list.length > 0'>

get和post请求参数区别

export function fun( data ){
    return request({
        url: '/api/xxx',
        method: 'post',
        data,
    })
}

export function fun( params ){
    return request({
        url: '/api/xxx',
        params,
	})
}

CSS相关

属性选择器

表示从第二个【li】开始到最后的【li】，忽略第一个【li】

ul li + li{...}

语义化标签

<header> 表示页面或页面的一部分的标题或导航栏

<nav> 导航链接的部分。通常包含网站的主要导航菜单、侧边栏导航或页脚导航等

<main> 页面的主要内容区域，每个页面应该只有一个 <main> 元素。它应该包含与页面的核心信息相关的内容

<section> 将文档划分为不同的节或区块。可以根据内容的主题、功能或在逻辑上相关的一组内容来定义

<article> 表示页面中独立、完整、自包含的内容，例如博客文章、新闻报道、论坛帖子等

<aside> 表示与页面主要内容相关但可以独立存在的部分。通常用于侧边栏、广告、相关文章、引用等

<footer> 页面或区块的页脚部分。通常包含版权信息、联系方式、相关链接等

这些标签都有助于更好地描述和组织网页的结构和内容，提高语义化，并且对于可访问性和SEO也非常有益。使用合适的标签可以使代码更具可读性和可维护性。

max-width属性值

固定像素值：max-width: 500px

百分比：max-width: 50%

相对单位：max-width: 80vw

none：max-width: none; 将取消最大宽度限制

鼠标箭头变小手

cursor: pointer

伪类选择器

在匹配的元素内容后插入生成的内容，新CSS 规范中，使用 ::after 来表示伪元素，旧规范中使用 :after。两种写法在大多数情况下是等价的，根据最新规范建议使用 ::after

div ::after{...}

前端优化

1. 防抖：是在一段时间后再执行操作，若在一段时间内被重复触发，则重新计时。例如，用户在搜索框中输入文本时，我们可能希望在用户停止输入一段时间后再触发搜索，而不是在用户每次输入字符时都去搜索。
2. 节流：是在一段时间内只运行一次，若在一段时间内重复触发，只有一次生效。例如，按钮点击。
3. 缓存：缓存是提高前端性能的一个重要手段。通过将一些不经常变化的数据或资源存储在本地（如浏览器缓存），可以减少网络请求的次数，提高页面的加载速度。例如，使用 service worker 来实现离线缓存。
4. 分页请求：数据较多时，一次性加载所有数据可能会导致页面加载速度慢或者内存占用过高。因此，我们需要将数据分页展示，每次只加载当前页面的数据，当用户需要查看其他页面的数据时，再加载对应的数据。
5. 代码拆分：对于大型的 JavaScript 文件，我们可以使用代码拆分，将它们拆分成多个小文件，这样可以减少单个文件的加载时间，提高页面加载速度。
6. 使用 CDN：通过使用 CDN 来存储静态资源，可以让用户从最近的服务器获取资源，减少网络延迟。
7. 优化图片：对于图片资源，我们可以使用一些工具来进行优化，例如压缩图片大小、使用适当的图片格式等，这样可以减少图片的加载时间。
8. 懒加载：懒加载是一种按需加载的策略，当页面滚动到某个元素时，才加载该元素的内容，这样可以减少初始页面加载时间。
9. 预加载：预加载是指在用户需要之前就加载资源，通常用于那些在后续页面中可能会用到的资源，这样可以提前获取资源，避免在后续页面中因加载资源而产生延迟。
10. 异步加载：对于一些非关键资源，我们可以使用异步加载，即在页面加载主要内容后，再通过异步请求获取这些资源，这样可以减少页面加载时间。
11. 使用 Web Workers：可以在后台线程中运行 JavaScript，不会影响页面的性能和响应速度。可以用来执行一些耗时的任务，例如数据处理、DOM 操作等。
12. 优化选择器：在访问 DOM 时，选择器的性能很重要。应该尽量选择性能更好的选择器，例如 ID 选择器（#myid）、类选择器（.myclassname）等。
13. 事件代理：事件代理是将事件监听器注册在父级元素上，由于子元素的事件会通过事件冒泡的方式向上传播到父节点，因此可以由父节点的监听函数统一处理多个子元素的事件。这样可以减少内存使用，提高性能及降低代码复杂度。
14. 使用 requestAnimationFrame：可以用来在每一帧刚开始的时候对页面进行更改，这样可以保证动画的流畅性。同时，它也提供了一个简单的 API 来处理动画的开始和结束时间，可以用来做性能优化。

最常用的前端优化策略包括：代码拆分、懒加载、使用 CDN、优化图片、缓存