当前位置: 首页 > news >正文

前端须知名词解释

目录

一、多维转一维

二、一维转多维

一维转多维——使用场景:分页

三、判断当前元素是否为数组

四、判断当前元素是否是空对象

五、数字分割符:提高数字可读性

六、模糊盒子(怪异盒子)与标准盒模型

七、css的filter属性

图片模糊

这个filter滤镜可以用来做全局页面变灰,

转存失败重新上传取消​编辑​编辑

八、找到数组中的最大/最小值

 

九、虚拟dom

十、vue的template模版的渲染过程

十一、灰度发布(金丝雀发布、 渐进式发布)


一、多维转一维

一、使用forEach 结合 递归处理
function flatData(list,children){let resList = []list.forEach(ele => {if(ele[children]&&ele[children].length>0){resList=resList.concat(flatData(ele[children]))  }else {resList.push(ele)}});return resList}二、[1,[2,[3]]].join().split(',')
三、[1,[2,[3]]].flat()

二、一维转多维

一维转多维——使用场景:分页

var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9]; var row = 3; var multiArr = []; for (var i = 0; i < arr.length; i += row) { multiArr.push(arr.slice(i, i + row)); } console.log(multiArr);

三、判断当前元素是否为数组

[1,2,3] instanceof ArrayArray.isArray([1,2,3])[1,2].constructor ===Array

四、判断当前元素是否是空对象

Object.key/entries/value({}).length>0console.log(JSON.stringify({})=='{}')

五、数字分割符:提高数字可读性

属于ES新增,老项目可能不支持,若要提高数字的可读性,你可以使用下划线作为分隔符来更好地区分数字的各个部分。这样做可以让数字更易读,让人一目了然,而且还能在小白面前秀一把。

var num == 1_110_000;//等同于1110000

六、模糊盒子(怪异盒子)与标准盒模型

模糊盒子的宽包含了padding、content、border,当设置padding和border时,content会被压缩,因为宽包含了padding/border。属性box-sizing:border-box;

标准盒模型的宽只有一个content,所以当我们设置padding/border时,整个元素会扩大,content不会压缩。属性:box-sizing:content-box;

 

七、css的filter属性

图片模糊

给img标签设置属性

filter: blur(5px);

这个filter滤镜可以用来做全局页面变灰,

filter: grayscale(1);

还记得吗,当国家公祭日等重要节日,各大网站与软件网页置灰,就是用的这个

 

八、找到数组中的最大/最小值

 

 

九、虚拟dom

为什么要有虚拟dom呢,很多年前在没有vue和react的时候,修改数据后在渲染页面是通过大范围全局dom循环遍历查询要更新数据的dom,这就消耗了很多计算资源,多了很多没必要的性能消耗,那么虚拟dom是怎么回事呢,虚拟dom会把页面dom元素抽象化成一个嵌套对象(从dom根节点递归得来),当我们修改数据值,会在虚拟dom对象里查找,修改的是虚拟dom对象的属性,通过diff算法对比前后的虚拟dom后才会进行真实dom的渲染。

十、vue的template模版的渲染过程

首先将template里的内容转化为render函数,接下来就是挂载实例,把render函数从根节点开始递归形成虚拟dom,通过diff算法对比新旧虚拟dom更新真实dom

十一、灰度发布(金丝雀发布、 渐进式发布)

灰度发布就是发布非稳定版本供用户使用来进行测试的一种发布方式,我们常常看到游戏会抽取部分用户发放一些账号让大家提前体验新内容,也常常看到软件提醒要不要更新到最新的测试版本来体验新功能,用户想不想当小白鼠完全自愿,开发人员可以测试服务器的稳定性和新功能的流畅度来规避风险,再根据用户反馈做出进一步的调整,然后就有了稳定版发布,是双赢的一种策略。

 

相关文章:

前端须知名词解释

目录 一、多维转一维 二、一维转多维 一维转多维——使用场景&#xff1a;分页 三、判断当前元素是否为数组 四、判断当前元素是否是空对象 五、数字分割符&#xff1a;提高数字可读性 六、模糊盒子&#xff08;怪异盒子&#xff09;与标准盒模型 七、css的filter属性 …...

React性能优化之memo缓存函数

React是一个非常流行的前端框架&#xff0c;但是在处理大型应用程序时&#xff0c;性能可能会成为一个问题。为了解决这个问题&#xff0c;React提供了一个称为memo的功能&#xff0c;它可以缓存函数并避免不必要的重新渲染。 memo是React中的一个高阶组件&#xff08;HOC&…...

2023年高教社杯 国赛数学建模思路 - 案例:ID3-决策树分类算法

文章目录 0 赛题思路1 算法介绍2 FP树表示法3 构建FP树4 实现代码 建模资料 0 赛题思路 &#xff08;赛题出来以后第一时间在CSDN分享&#xff09; https://blog.csdn.net/dc_sinor?typeblog 1 算法介绍 FP-Tree算法全称是FrequentPattern Tree算法&#xff0c;就是频繁模…...

C# Emgu.CV 条码检测

效果 项目 代码 using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.Linq; using System.Text; using System.Windows.Forms; using Emgu.CV; using Emgu.CV.Util; using static Emgu.C…...

VueRouter的基本使用

路由的基本使用 文章目录 路由的基本使用01-VueRouterVueRouter的使用 &#xff08; 5 2&#xff09;综合代码 拓展&#xff1a;组件存放问题 什么是路由呢&#xff1f; 在生活中的路由&#xff1a;设备和IP的映射关系 在Vue中&#xff1a;路径 和 组件 的 映射 关系。 01-Vu…...

网工笔记:快速认识7类逻辑接口

逻辑接口是指能够实现数据交换功能但物理上不存在、需要通过配置建立的接口。逻辑接口需要承担业务传输。 下面是我整理了7款常见的逻辑接口。 接口类型 描述 Eth-Trunk接口 具有二层特性和三层特性的逻辑接口&#xff0c;把多个以太网接口在逻辑上等同于一个逻辑接口&…...

MySQL中的free链表,flush链表,LRU链表

一、free链表 1、概述 free链表是一个双向链表数据结构&#xff0c;这个free链表里&#xff0c;每个节点就是一个空闲的缓存页的描述数据块的地址&#xff0c;也就是说&#xff0c;只要你一个缓存页是空闲的&#xff0c;那么他的描述数据块就会被放入这个free链表中。 刚开始数…...

mac使用VsCode远程连接服务器总是自动断开并要求输入密码的解决办法

在mac中使用vscode远程连接服务器&#xff0c;时常会出现自动断开并要求重新输入服务器密码的问题&#xff0c;接下来让我们来解决它&#xff1a; 1、首先&#xff0c;在本地创建公钥&#xff1a; ssh-keygen 这条命令执行之后&#xff0c;出现提示直接回车即可&#xff1b;直…...

Python爬虫分布式架构 - Redis/RabbitMQ工作流程介绍

在大规模数据采集和处理任务中&#xff0c;使用分布式架构可以提高效率和可扩展性。本文将介绍Python爬虫分布式架构中常用的消息队列工具Redis和RabbitMQ的工作流程&#xff0c;帮助你理解分布式爬虫的原理和应用。 为什么需要分布式架构&#xff1f; 在数据采集任务中&#…...

【ES】笔记-集合介绍与API

集合是一种不允许值重复的顺序数据结构。 通过集合我们可以进行并集、交集、差集等数学运算&#xff0c; 还会更深入的理解如何使用 ECMAScript 2015(ES2015)原生的 Set 类。 构建数据集合 集合是由一组无序且唯一(即不能重复)的项组成的。该数据结构使用了与有限集合相同的数…...

Spring Boot(Vue3+ElementPlus+Axios+MyBatisPlus+Spring Boot 前后端分离)【五】

&#x1f600;前言 本篇博文是关于Spring Boot(Vue3ElementPlusAxiosMyBatisPlusSpring Boot 前后端分离)【五】&#xff0c;希望你能够喜欢 &#x1f3e0;个人主页&#xff1a;晨犀主页 &#x1f9d1;个人简介&#xff1a;大家好&#xff0c;我是晨犀&#xff0c;希望我的文章…...

二、Tomcat 安装集

一、Tomcat—Docker 1. 拉取镜像 # 1、拉取镜像&#xff08;tomcat版本8&#xff0c;jre版本8&#xff09;。 docker pull tomcat:8-jre82. 启动容器 # 2、启动一个tomcat容器。 docker run -id --name tomcat -p 8080:8080 镜像ID # 3、宿主机里新建/root/tomcat目录&#x…...

CentOS 上通过 NFS 挂载远程服务器硬盘

NFS&#xff08;Network File System&#xff09;是一种用于在不同的计算机系统之间共享文件和目录的协议。它允许一个计算机系统将其文件系统的一部分或全部内容暴露给其他计算机系统&#xff0c;使其能够像访问本地文件一样访问这些内容。在这篇博客中&#xff0c;我们将介绍…...

微信小程序中的 广播监听事件

定义 WxNotificationCenter.js 文件&#xff1b; /*** author: Di (微信小程序开发工程师)* organization: WeAppDev(微信小程序开发论坛)(http://weappdev.com)* 垂直微信小程序开发交流社区* * github地址: https://github.com/icindy/WxNotificationCenter…...

Quickstart: MinIO for Linux

单节点部署教程 1.安装Minio服务端 //wget下载二进制文件 wget https://dl.min.io/server/minio/release/linux-amd64/minio //赋予权限 chmod x minio //将minio可执行文件移入usr/local/bin目录下&#xff0c;使得minio可以全局执行 sudo mv minio /usr/local/bin/ 2.启动Mi…...

Java中word转Pdf工具类

背景&#xff1a; 最近做的一个项目中&#xff0c;对于word转Pdf用的地方很多&#xff0c;特此记录 搭建总图&#xff1a; 代码部分&#xff1a; 1.需要的jar包&#xff1a; aspose-words-15.8.0-jdk16.jar 注&#xff1a;下载好这个jar包后&#xff0c;在项目的根目录新建一…...

【conda install】网络慢导致报错CondaHTTPError: HTTP 000 CONNECTION FAILED for url

⭐⭐问题&#xff1a; 部署安装环境经常会出现由于网络慢问题&#xff0c;导致conda安装不了库&#xff0c;报错如下&#xff1a; Solving environment: failedCondaHTTPError: HTTP 000 CONNECTION FAILED for url <https://mirrors.tuna.tsinghua.edu.cn/anaconda/pkgs/…...

2023-8-28 图中点的层次(树与图的广度优先遍历)

题目链接&#xff1a;图中点的层次 #include <iostream> #include <cstring> #include <algorithm>using namespace std;const int N 100010;int h[N], e[N], ne[N], idx; int n, m; int q[N], d[N];void add(int a, int b) {e[idx] b, ne[idx] h[a], h…...

设计模式(一)

1、适配器模式 &#xff08;1&#xff09;概述 适配器中有一个适配器包装类Adapter&#xff0c;其包装的对象为适配者Adaptee&#xff0c;适配器作用就是将客户端请求转化为调用适配者中的接口&#xff1b;当调用适配器中的方法时&#xff0c;适配器内部会调用适配者类的方法…...

Prometheus关于微服务的监控

在微服务架构下随着服务越来越多,定位问题也变得越来越复杂,因此监控服务的运行状态以及针对异常状态及时的发出告警也成为微服务治理不可或缺的一环。服务的监控主要有日志监控、调用链路监控、指标监控等几种类型方式,其中指标监控在整个微服务监控中比重最高,也是实际生…...

键盘魔法师:如何用VIA让机械键盘“听懂”你的心声?

键盘魔法师&#xff1a;如何用VIA让机械键盘“听懂”你的心声&#xff1f; 【免费下载链接】releases 项目地址: https://gitcode.com/gh_mirrors/re/releases 想象一下这样的场景&#xff1a;深夜加班&#xff0c;手指在键盘上飞舞&#xff0c;突然想用一个快捷键调出…...

保姆级教程:在银河麒麟V10上,用Qt Installer Framework打包Unity游戏(附快捷方式配置)

银河麒麟V10系统下Unity游戏打包全流程实战&#xff1a;从安装配置到桌面快捷方式优化 在国产操作系统生态逐渐成熟的今天&#xff0c;银河麒麟V10作为主流国产Linux发行版之一&#xff0c;为独立游戏开发者提供了新的发布平台选择。本文将深入讲解如何利用Qt Installer Frame…...

终极美化指南:3步将你的foobar2000打造成专业音乐工作站

终极美化指南&#xff1a;3步将你的foobar2000打造成专业音乐工作站 【免费下载链接】foobox-cn DUI 配置 for foobar2000 项目地址: https://gitcode.com/GitHub_Trending/fo/foobox-cn 还在忍受foobar2000那单调乏味的默认界面吗&#xff1f;foobox-cn作为一款专为foo…...

LIBERO Benchmark自定义任务避坑指南:手把手教你从零构建厨房场景的BDDL文件

LIBERO Benchmark厨房任务BDDL实战&#xff1a;从场景拆解到避坑全流程 当你第一次打开LIBERO Benchmark的文档&#xff0c;面对那些复杂的项目结构和晦涩的术语时&#xff0c;是否感到无从下手&#xff1f;本文将以一个具体的厨房场景任务为例——"打开橱柜放入杯子&quo…...

用ESP32-S3给OV2640摄像头上‘网课’:手把手实现低延迟MJPEG监控系统

基于ESP32-S3与OV2640构建低延迟MJPEG监控系统的工程实践 在物联网和边缘计算领域&#xff0c;实时视频监控系统的需求日益增长。本文将深入探讨如何利用ESP32-S3微控制器和OV2640摄像头模组构建一个完整的低延迟MJPEG监控系统&#xff0c;从硬件连接到软件优化&#xff0c;全…...

FunClip终极指南:三步完成本地AI视频剪辑与智能处理高效工作流

FunClip终极指南&#xff1a;三步完成本地AI视频剪辑与智能处理高效工作流 【免费下载链接】FunClip Open-source, accurate and easy-to-use video clipping tool, LLM based AI clipping intergrated || 开源、精准、方便的视频切片工具&#xff0c;集成了大语言模型AI智能剪…...

LangChain4j的AiServices到底怎么用?一个注解让SpringBoot服务秒变AI智能体

LangChain4j的AiServices深度实践&#xff1a;用声明式编程重构SpringBoot智能服务 在Java生态中集成大语言模型&#xff08;LLM&#xff09;时&#xff0c;开发者常常面临一个架构难题&#xff1a;如何在保持代码整洁的同时&#xff0c;优雅地组织AI能力&#xff1f;LangChain…...

大数据领域规范性分析:助力企业决策优化

大数据领域规范性分析:助力企业决策优化 关键词:规范性分析、大数据决策、描述性分析、预测性分析、优化算法、企业决策、数据驱动 摘要:在数据爆炸的时代,企业不再满足于“数据记录”或“未来预测”,而是渴望知道“如何行动才能最优”。本文将从大数据分析的三大支柱(描…...

CPython 3.12+新特性深度适配:细粒度GIL释放、Per-Interpreter GIL与扩展模块线程模型重构指南

第一章&#xff1a;CPython 3.12扩展模块开发范式演进总览CPython 3.12 标志着 C 扩展开发进入“安全优先、API 稳定、工具链现代化”的新阶段。官方正式弃用长期存在的 PyEval_InitThreads() 和隐式 GIL 管理惯用法&#xff0c;同时强化了 PyModuleDef 初始化语义与跨版本 ABI…...

思源宋体TTF:5个高效技巧提升你的中文排版专业度

思源宋体TTF&#xff1a;5个高效技巧提升你的中文排版专业度 【免费下载链接】source-han-serif-ttf Source Han Serif TTF 项目地址: https://gitcode.com/gh_mirrors/so/source-han-serif-ttf 还在为中文排版效果不佳而烦恼吗&#xff1f;思源宋体TTF字体库为你提供了…...