2024年前端最新第十五届蓝桥杯模拟考试III_物联网设计与开发官方代码分析(2)，2024前端进阶新篇章

Vue 编码基础

2.1.1. 组件规范

2.1.2. 模板中使用简单的表达式

2.1.3 指令都使用缩写形式

2.1.4 标签顺序保持一致

2.1.5 必须为 v-for 设置键值 key

2.1.6 v-show 与 v-if 选择

2.1.7 script 标签内部结构顺序

2.1.8 Vue Router 规范

Vue 项目目录规范

2.2.1 基础

2.2.2 使用 Vue-cli 脚手架

2.2.3 目录说明

2.2.4注释说明

2.2.5 其他

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

sprintf 函数的作用是将一个或多个表达式按照指定的格式转换成字符串，并将结果存储在指定的字符数组中，定义在 stdio.h 头文件中。

真是一个神仙函数，之前我还看不上，今天我才发现是我高攀不起的函数，真的是方便到极致

例子1：

原始人代码：

void Function\_NumbertoStr(unsigned char a[]){
	unsigned char up[30];
	unsigned char down[30];
	sprintf(up, "%.2f", num1);
	sprintf(down, "%.2f", num2);
	unsigned char i = 0, j = 0, k = 0;
		while(up[j] != '\0') a[i ++] = up[j ++];
	   
    a[i ++] = '/';		
		while(down[k] != '\0') a[i ++] = down[k ++];
		a[i] = '/';
	 //OLED\_ShowString(0, 2, a, 8);
}

优雅代码：

void Function\_NumbertoStr(unsigned char a[]){
  sprintf(a, "%.2f/%.2f/",num1, num2);
}

两者等效妙解，这就是一个或多个表达式的意思

例子2：

原始人代码：

unsigned char Function\_NumberPoint(double number){
	while(number >= 1){
		number = number - 1;
	}
	return (unsigned char)(number \* 10 + 0.5);
}
 
unsigned char  Function\_NumberLen(unsigned char number){
	unsigned char res = 0;
	while(number){
		res = res + 1;
		number = number / 10;
	}
	if(res == 0) res = 1;
	return res;
}

uint32\_t OLED\_Pow(uint32\_t X, uint32\_t Y){
	uint32\_t result = 1;
	while(Y){
		result = result \* X;
		Y --;
	}
	return result;
}

void OLED\_ShowNumber(unsigned char x, unsigned char y, uint32\_t chr, unsigned char len, unsigned char size){
	unsigned char i = 0, j = 0;
	
	while(j < len){
		OLED\_ShowChar(x, y, chr / OLED\_Pow(10, len - 1 - i) % 10 + '0' , size);
		i ++;
		j ++;
		x += 8;
    if(x > 120)
    {
      x = 0;
      y += 2;
    }
	}
}
void Function\_ShowMasg1(void){
	
	OLED\_ShowString(24, 0, "TEMP:", 16);
	OLED\_ShowNumber(64, 0, (uint32\_t)(num1), Function\_NumberLen((uint32\_t)(num1)), 16);
	OLED\_ShowString(64 + 8 \* Function\_NumberLen((uint32\_t)(num1)), 0, "." , 16);
	OLED\_ShowNumber(64 + 8 \* Function\_NumberLen((uint32\_t)(num1)) + 8, 0,  Function\_NumberPoint(num1), 1, 16);
	OLED\_ShowString(24, 2, "HUMI:", 16);
	OLED\_ShowNumber(64, 2, (uint32\_t)(num2), Function\_NumberLen((uint32\_t)(num2)), 16);
	OLED\_ShowString(64 + 8 \* Function\_NumberLen((uint32\_t)(num2)), 2, "." , 16);
	OLED\_ShowNumber(64 + 8 \* Function\_NumberLen((uint32\_t)(num2)) + 8, 2,  Function\_NumberPoint(num2), 1, 16);
	
}
void Function\_ShowMasg2(void){
	OLED\_ShowString(0, 0, "TEMP",16);
	OLED\_ShowString(48, 0, "UP:", 16);
	OLED\_ShowNumber(72, 0, upt[flag1], 2, 16);
	OLED\_ShowString(32, 2, "DOWN:", 16);
	OLED\_ShowNumber(72, 2, dnt[flag2], 2,16);
}

void Function\_ShowMasg3(void){
	OLED\_ShowString(0, 0, "HUMI", 16);
	OLED\_ShowString(48, 0, "UP:", 16);
	OLED\_ShowNumber(72, 0, ups[flag3], 2, 16);
	OLED\_ShowString(32, 2, "DOWN:", 16);
	OLED\_ShowNumber(72, 2, dns[flag4], 2, 16);
}

优雅代码：

	if(ui == 0){
		sprintf((char\*)ucBuf, " TEMP:%.1f ", TEMP_rx\*0.1);
		OLED\_ShowString(0, 0, ucBuf);
		sprintf((char\*)ucBuf, " HUMI:%.1f ", HUMI_rx\*0.1);
		OLED\_ShowString(0, 2, ucBuf);
	}else if(ui == 1){ 
		sprintf((char\*)ucBuf, "TEMP UP:%d ", TEMP_UP);
		OLED\_ShowString(0, 0, ucBuf);
		sprintf((char\*)ucBuf, " DOWN:%d ", TEMP_DOWN);
		OLED\_ShowString(0, 2, ucBuf);
	}else if(ui == 2){
		sprintf((char\*)ucBuf, "HUMI UP:%d ", HUMI_UP);
		OLED\_ShowString(0, 0, ucBuf);
		sprintf((char\*)ucBuf, " DOWN:%d ", HUMI_DOWN);
		OLED\_ShowString(0, 2, ucBuf);
	}

特别是这个格式，我弄了很久很久,又是写新的显示函数，又是写查看数字长度函数，又是调试区域，还好这次数字显示长度没有过多的变化，不用写区域清屏函数，否者真是越写越🤡

人家代码绝妙在于直接将格式连同数据打印到数组里了，直接用show_string显示即可，真是优雅

———— 2024 / 3 / 15

页面切换:

页面切换部分我感觉我的还是不错的，毕竟我的代码不可能什么优点也没有，页面切换基于算法%符号
选取一个标记位，keynumber每次按键按下对这个标记位%3即可，毕竟只有三个页面分别标记为0、1、2即可，这个比官方的if else 语句要优雅😏

优雅代码：

unsigned char Function\_KeyCheck(unsigned char keynumber){
	 if(HAL\_GPIO\_ReadPin(User_key_GPIO_Port, User_key_Pin) == GPIO_PIN_RESET){
			while(HAL\_GPIO\_ReadPin(User_key_GPIO_Port, User_key_Pin) == GPIO_PIN_RESET);
		  keynumber = keynumber + 1;
		  OLED\_Clear();
		}	 
		return keynumber % 3;
}

数值的轮回调整：

里面有一个功能是

css

1，盒模型
2，如何实现一个最大的正方形
3，一行水平居中，多行居左
4，水平垂直居中
5，两栏布局，左边固定，右边自适应，左右不重叠
6，如何实现左右等高布局
7，画三角形
8，link @import导入css
9，BFC理解

js

1，判断 js 类型的方式
2，ES5 和 ES6 分别几种方式声明变量
3，闭包的概念？优缺点？
4，浅拷贝和深拷贝
5，数组去重的方法
6，DOM 事件有哪些阶段？谈谈对事件代理的理解
7，js 执行机制、事件循环
8，介绍下 promise.all
9，async 和 await,
10，ES6 的 class 和构造函数的区别
11，transform、translate、transition 分别是什么属性？CSS 中常用的实现动画方式,
12，介绍一下rAF(requestAnimationFrame)
13，javascript 的垃圾回收机制讲一下,
14，对前端性能优化有什么了解？一般都通过那几个方面去优化的？

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

e、transition 分别是什么属性？CSS 中常用的实现动画方式,
12，介绍一下rAF(requestAnimationFrame)
13，javascript 的垃圾回收机制讲一下,
14，对前端性能优化有什么了解？一般都通过那几个方面去优化的？

[外链图片转存中…(img-4QujBa3C-1715029644313)]

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】