#前端重铸之路 Day3 🔥🔥🔥

sincere_iu
138 阅读12分钟

前置涩话

掘金的小伙伴们大家好，这里是家里蹲选手sin~ 也是顺利来到第三天，前两天的知识整理，发现知识实在是太杂太多了，脑子塞不下啦o(╥﹏╥)o 太高强度啦！所以第三天就来点遗漏的知识补充吧！gogogo，出发咯~

✅ 实用知识补充

项目常用配置

eslint 代码规范校验
prettier 代码格式
styleLint
husky 代码提交前格式化
commitLint

数组操作

slice(start，end) 参数负数从后面取
截取数组，返回一个新数组，不会改变原数组
splice()
参数：
index —— 必需。整数，规定添加/删除项目的位置。使用负数可从数组结尾处规定位置。
howmany —— 必需。要删除的项目数量。包含该index项在内。如果设置为 0，则不会删除项目。
item1, …, itemX —— 可选。向数组添加的新项目。在index项之前添加。
插入、删除、替换，返回删除的元素，会改变原数组
push()
添加元素，并返回新数组长度
unshift()
添加元素到数组开头，并返回数组新长度
shift()
删除第一个元素，并返回该元素
pop()
删除最后一个元素，并返回该元素
reverse()
就地反转数组的元素
with(index,value)
将数组index的值替换成value，index负数从末尾开始

数据大屏

vw宽度自适应
vh高度自适应
字体大小不支持vw、vh

使用transform的scale
在屏幕尺寸变化时计算出缩放比例
nWidth/oWidth、nHeight/oheight
最小值就是内容将要缩放的比例
缩放原点为内容左上角
再translate让内容居中

rem的适配方案

rem是什么？

rem是指相对于根元素的字体大小的单位，在日常开发过程中我们通常把根元素（html/body）的字体设置为10px,方便于我们计算（此时子元素的1rem就相当于10px）。
适用场景：不固定宽高比的Web应用，适用于绝大部分业务场景

px
px 是css中常见的单位。相对长度单位。

rpx单位 rpx 是小程序常用的单位
rpx和px的换算：1px=2rpx

其实是微信对于rem的一种应用的规定，或者说一种设计的方案，官方上规定屏幕宽度为20rem，规定屏幕宽为750rpx。

所以在微信小程序中 1 rem=750/20rpx。

如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。

em单位
em单位大小CSS 3中新增的一种相对长度单位。

首先它会找自身有没有font-size,没有的话找父元素的字体大小（font-size），一直往上寻找，直到找到为止。

无论是字体大小还是宽度高度用了em单位，那么其px大小等于往上找到的字体大小乘于自身的em大小。

项目实战

1.安装依赖

npm i postcss-pxtorem autoprefixer amfe-flexible --save-dev

postcss-pxtorem 是PostCSS的插件，用于将像素单元生成rem单位 autoprefixer 浏览器前缀处理插件 amfe-flexible 可伸缩布局方案 替代了原先的lib-flexible 选用了当前众多浏览器兼容的viewport 2.项目根目录创建 postcss.config.js 文件

module.exports = {  
 plugins: {  
  autoprefixer: {  
   overrideBrowserslist: [  
    "Android 4.1",  
    "iOS 7.1",  
    "Chrome > 31",  
    "ff > 31",  
    "ie >= 8",  
    "last 10 versions", // 所有主流浏览器最近10版本用  
   ],  
   grid: true,  
  },  
  "postcss-pxtorem": {  
   rootValue: 192, // 设计稿宽度的1/ 10 例如设计稿按照 1920设计 此处就为192  
   propList: ["*", "!border"], // 除 border 外所有px 转 rem  
   selectorBlackList: [".el-"], // 过滤掉.el-开头的class，不进行rem转换  
  },  
 },  
};
  1. main.ts/js 文件中导入依赖

uniapp移动端设配

使用rpx

特殊场景设配

  1. 安全区域适配
  2. 1px边框问题

项目配置优化

  1. manifest.json 配置
{
  "app-plus": {
    "safearea": {
      "bottom": {
        "offset": "none"
      }
    }
  }
}

2. 页面配置

// pages.json
{
  "globalStyle": {
    "rpxCalcMaxDeviceWidth": 3840, // 最大设备宽度
    "rpxCalcBaseDeviceWidth": 750, // 设计稿基准宽度
    "rpxCalcIncludeWidth": 750     // 参与计算的宽度
  }
}

3. 设备信息工具

// utils/device.js
export default {
  // 获取设备信息
  getInfo() {
    return uni.getSystemInfoSync()
  },
  
  // 判断平台
  isIOS() {
    return uni.getSystemInfoSync().platform === 'ios'
  },
  
  // 安全区域高度
  safeAreaBottom() {
    const info = uni.getSystemInfoSync()
    return info.screenHeight - info.safeArea.bottom
  }
}

dom事件

document.addEventListener('event',funciton(){},true) 这里的true是布尔值判断是否为捕获事件，当为true时，这里为捕获事件，如果为false时，这里就是冒泡事件。
e.stoppropagation()阻止冒泡 e.preventDefault()阻止默认 return false;既阻止冒泡又阻止默认 事件委托是利用事件的冒泡原理来实现的，大致可以分为三个步骤：
1、确定要添加事件元素的父级元素
2、给父元素定义事件，监听子元素的冒泡事件
3、使用 event.target 来定位触发事件冒泡的子元素。
e.target指向的是触发事件的元素； e.currentTarget指向的是添加监听事件的元素

单点登录和双token模式

双token是为了增加对用户的控制
只有认证中心可以用refreshToken换取有效token

61f51148a3261615854a3101ae0d52d.jpg

区间取随机数

Math.floor(Math.random() * (max + 1 - min) + min)，使用其他概率不均
parseInt向0取整，Math.floor向左(下)取整，
Math.round是四舍五进制

/* 单行超出省略 */

overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;

/* 多行超出省略 */

display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
-webkit-line-clamp: 3; /* 控制显示的行数 */

区分数组和对象

1.instanceof
[] instanceof Array; //true
{} instanceof Object; //true

2.constructor
([]).constructor // Array
({}).constructor //Object

3.Object.prototype.toString.call();
Object.prototype.toString.call([]);//[object Array]
Object.prototype.toString.call({});//[object Object]

判断变量是否是数组

  1. 使用Array.isArray()方法，如果是则返回true，否则返回false。写法为：Array.isArray(变量)。
  2. 使用instanceof运算符，可以判断变量是否为数组。如果是则返回true，否则返回false。 写法为：变量 instanceof Array。
  3. 通过原型链判断是否具有和数组同一原型链，如果是则返回true，否则返回false。写法有：变量.proto === Array.prototype 或 变量.constructor === Array。
  4. 使用Object.prototype.toString.call()方法，通过获取变量的类型字符串，然后判断其是否为“[object Array]”。如果是则返回true，否则返回false。写法为：Object.prototype.toString.call(变量) === ‘[object Array]’。
    需要注意的是，这些方法不仅可以用于判断数组，也可以用于判断其他数据类型。

真数组和伪数组区别

真数组长度可变，有内置属性，可以用数组的方法。
伪数组长度不可变，不可以使用数组方法(例外：可以用forEach)
伪数组变真数组
将伪数组循环放进一个空数组
[].slice.apply(伪数组)
Array.from(伪数组)

Cookie、SessionStorage、 LocalStorage

Cookie、SessionStorage、 LocalStorage都是浏览器的本地存储。
共同点：都是存储在浏览器本地的。
区别：cookie是由服务器端写入的，而SessionStorage、 LocalStorage都是由前端写入的，cookie的生命周期是由服务器端在写入的时候就设置好的，LocalStorage是写入就一直存在，除非手动清除，SessionStorage是页面关闭的时候就会自动清除。cookie的存储空间比较小大概4KB，SessionStorage、 LocalStorage存储空间比较大，大概5M。Cookie、SessionStorage、 LocalStorage数据共享都遵循同源原则，SessionStorage还限制必须是同一个页面。在前端给后端发送请求的时候会自动携带Cookie中的数据，但是SessionStorage、 LocalStorage不会。

HttpOnly标志

HttpOnly标志是一个安全特性，由服务器通过设置在HTTP响应头中的Set-Cookie字段来启用。启用后，它告诉浏览器这个特定的Cookie应该对客户端的JavaScript代码不可访问，以防止例如跨站脚本（XSS）的攻击者通过脚本窃取Cookie信息。虽然HttpOnly不是全面防护措施，但它显著增加了攻击者盗取用户会话的难度。

样式计算

声明
层叠：解决元素的样式冲突
优先级
作者样式表 + !important
代理样式表 + !important
作者样式表
代理样式表
特殊性(权重) （2，4，1）
源次序 后面覆盖前面
继承
默认
视觉格式化模型

什么是vue的数据响应式？

数据变化时，依赖它的函数重新运行。

强缓存和协商缓存

强缓存：当缓存数据库中已有所请求的数据时，客户端直接从数据库读取数据。当缓存数据库中没有所请求的数据时，客户端才会从服务端获取。 协商缓存：客户端会先从缓存数据库中获取到一个缓存数据的标识，得到标识后请求服务端验证标识是否失效，如果没有失效服务端会返回304，此时客户端再从缓存中读取数据，如果失效，服务端会返回更新的数据。

强缓存：实现强缓存可以通过两种响应头实现
Expires 和 Cache-control，表示缓存期间不需要请求，状态码为200。
Expires表示资源会在某个时间过期，受限于本地时间，如果修改本地时间，会造成缓存失败。
Cache-control优先级高于Expires。

cb7c48bc14cd48b5f043d797bf4f48f.jpg
协商缓存：强缓存优先于协商缓存。
如果强缓存未命中（例如max-age过期），或者服务器响应中设置了Cache-Control: no-cache，则客户端会发起协商缓存的请求。在协商缓存中，客户端会发送带有缓存数据标识的请求头部字段，以向服务器验证资源的有效性。
服务器会根据客户端发送的协商缓存字段（如If-Modified-Since和If-None-Match）来判断资源是否发生变化。如果资源未发生修改，服务器会返回状态码 304（Not Modified），通知客户端可以使用缓存的版本。如果资源已经发生变化，服务器将返回最新的资源，状态码为 200。
协商缓存需要配套使用，Last-Modified 和 If-Modified-Since，ETag 和 If-None-Match，ETag 优先级比 Last-Modified 高。

HTTP/1.1和HTTP/2

多路复用：HTTP/2 支持在单个 TCP 连接上同时发送多个请求和响应。这意味着可以避免建立多个连接，减少网络延迟，提高效率。
二进制分帧（Binary Framing）：在应用层（HTTP2）和传输层（TCP or UDP）之间增加了二进制分帧层，将请求和响应拆分为多个帧（frames）。这种二进制格式的设计使得协议更加高效，并且容易解析和处理。 采用了头部压缩技术，这也成功解决了http1.0的header 里携带的内容过大的问题，在一定程度上减轻了传输的成本。不过它也存在一定的问题，如果在传输的过程中存在丢包的情况的话，那么整个tcp就得重新传输，后面资源就会被阻塞。

http3.0

放弃了tcp协议而是改用了 QUIC协议，此协议基于传输层UDP协议。UDP协议无需三次握手四次挥手，所以传输速率更高。并且它改善了多路复用产生的问题，如果出现丢包的情况，不需要整个重新发送，只需要重发丢掉的包就可以。

DNS预解析在link使用rel='dns-prefetch' 预加载 rel='preload' 预渲染 rel='prerender'

基本类型和引用类型

1.基本类型值在内存中占据固定大小的空间，因此被保存在栈内存中； 2.从一个变量向另一个变量复制基本类型的值，会创建这个值的一个副本； 3.引用类型的值是对象，保存在堆内存中； 4.包含引用类型值的变量实际上包含的并不是对象本身，而是一个指向该对象的指针； 5.从一个变量向另一个变量复制引用类型的值，复制的其实是指针，因此两个变量最终都指向同一个对象；

npm

npm install name：安装依赖到 mode_modules 目录下,不写入节点, npm install 时不下载该依赖。
npm install -g name：全局安装,不在 mode_modules 目录下,不写入节点, npm install 时不下载该依赖。
npm install name -S：npm install name -save的简写，自动把模块和版本添加到dependencies。
npm install name -D：npm install name -save-dev简写自动把模块和版本添加到devDependencies。
-D后，安装包会在package.json中的devDependencies对象中，简称dev。dev是在开发中要用到的。
-S后，安装包会在package.json中的dependencies对象中。简称dep。dep是在生产环境中要用到的。
比如：
构建工具：gulp和webpack是用来压缩代码，打包需要的工具，程序实际运行中时候并不需要，就要放在dev中所以要用 -D。
项目插件：如element ui ,echarts,这种的插件要在运行中使用的，就要放在dep中所以就用-S。 一般我们项目插件，在api中都可以看到，一般都是-S。因为这些插件是在程序运行中使用的。

this、exports、module.exports是一个东西，最后输出的是module.exports
ESModule的符号绑定
为避免发生问题制定规范
导出时必须导出常量，使用const

绝对路径和相对路径

绝对路径：路径是绝对的，协议域名端口号+路径
相对路径：路径相对于页面
publicPath(影响外部资源获取)：配置'/'表示绝对路径
路由base(影响组件匹配)：配置'/admin'匹配admin目录下的路由组件
以上两个配置一般使用环境变量

onRenderTracked() 状态跟踪是什么？

是一个状态跟踪，他会跟踪页面上所有的方法跟变量，也就是对我们return返回的属性和方法进行跟踪 作用 当页面有一个update的时候，会生成一个event对象，通过event对象查看代码/程序的问题所在

onRenderTriggered() 状态触发是什么？

状态触发，他不会跟踪每一个值，而是跟踪发生变化值的信息，并且新值和旧值都会给你展示出来。 作用 可以展示变化值的信息，old和new的值

OSI与TCP/IP

a0ec0a143d4e105433636df375e8396.jpg

avatar
文章
阅读
粉丝