2022-31周 项目问题整理

新知识

1、vue2.7 支持 组合式api

SFC (single File Components)
官方发布链接地址
既可支持IE，易可支持setup等hooks新语法，棒棒哒！

Composition API
SFC

2、好文学习

2.1、Promise、Observables和Streams之间的区别是什么？

Promise、Observables和Streams之间的区别是什么？
关于Observables，构建流式应用—RxJS详解，Observable详解
个人理解：
Observables更像是一种针对用户交互请求及后续处理一系列的链式操作方案，应用发布订阅模型、内置防抖及多次请求返回结果收集处理，链式添加操作，实现效果同于迭代器无需主动等待，设置好事件执行顺序即可；更适用于异步操作较多、汇总异步状态的场景。
Promise更侧重于对请求回调的链式处理，也内置了迭代器，结合async实现异步转同步代码中断后继操作，业务逻辑不关心不处理，开放性强。更适用于简便使用，封装请求函数作为单独模块应用；

2.2、Mysql性能优化：count(*)

Mysql的不同引擎：
MyISAM引擎把一个表的总行数存在了磁盘上，因此执行count()的时候会直接返回这个数，效率很高（没有where查询条件）。
InnoDB引擎并没有直接将总数存在磁盘上，在执行count()函数的时候需要一行一行的将数据读出来，然后累计总数。
InnoDB 可以在事务的支持下，数据库保存计数，来保证统计数在高并发情况下保持一致性；

insert xx;
update xx ste total +=1 where table_name='xx'；

// select total from xx；

即：
引擎选择：MyISAM快，不支持事务，不保证一致性；
show table status 命令不准确；
InnoDB 准确但性能差，一行行判断；
缓存系统如Redis简单效率高，但不保证一致性；
数据库保存简单 + 事务保证一致性，棒！

问题

1、dom元素选中before等伪元素，修改相关字段内容

无相关方法，::before和::after伪元素与content属性的共同使用，在 CSS 中被叫做“生成内容”，通常用于添加一些图标，作为一个视觉性的提示；也就是说通常是可替代且轻量不变化的使用的，如果需要修改变化，可通过上一层的元素class或id去锁定改伪类相关性质；如果需要频繁动态更改内容，则是不合适的，需使用替代方案；

选中获取，但并不可编辑

getComputedStyle(document.querySelector('span.search-box'), '::after').getPropertyValue('content');

没有浏览器支持 x

document.getOverrideStyle(p, ':after').display = 'none'; // or
document.getOverrideStyle(p, ':after').cssText = 'display: none !important;';

2、代码规范

1、dom操作 最好有判空操作
2、无意义注释去掉
3、hooks命名、封装标准： useHooks
4、“keys-transform-generator” 库将增量接口转驼峰，适用于一些接口命名规范：后台为下划线，前端为驼峰；
5、触发事件不带（）括号
6、css写法：
BEM规范

中划线 - ：仅作为连字符使用，表示某个块或者某个子元素的多单词之间的连接记号。
__ 双下划线：双下划线用来连接块和块的子元素
_ 单下划线：单下划线用来描述一个块或者块的子元素的一种状态

7、抽离公告方法及类，不累积大量通用模块绑在生命周期上

随想

1、前端局限

前端开发的局限性，即使加上nodejs + nginx + 自动化部署工具去实现BFF (Backend For Frontend)的开发，走大前端的技术之路，在SFF (Severless For Frontend)的影响之下，也无很大的能力展现及复杂的业务逻辑的实现经验；
真正的网关、数据存取与读取、后端服务架构等还是非常有“取舍”的权衡能力在里面，这才是更锻炼能力的方式；
另外，前端还有“浏览器”、“http协议”、“性能优化”、“图形化”、“好的框架思想”的学习之路，似乎兜兜转转没翻过的山更近了些；