fe-notes
fe-notes copied to clipboard
Inchill
🍎个人前端知识汇总，并且处于持续更新中。 This is a summary of personal front-end knowledges, and it will be updated from time to time.
> 在前端工程化方兴未艾的今天，很多人会更多关注项目上线前的工程化问题，比如如何生成模版项目（脚手架）、代码测试、编译构建、流水线 CI 和 CD 等，很少会关注项目上线后的一些异常问题。对于前端异常，很多时候开发者始终处于一个被动感知的状态，当用户反馈到开发者这边时，往往线上已经出现大量 case 了。后端一般会有告警服务，前端在这方面的能力就比较缺失，所以如何用工程化的手段去解决异常监控就很有必要了。 ## 异常类型 按照 ECMA-262 里的规范来看，一共有如下类型的异常： - Error：基类异常 - SyntaxError：语法异常 - ReferenceError：引用异常 - RangeError：范围异常 - TypeError：类型异常 - InternalError：内部异常 - EvalError：Eval 方法异常 - URIError：URI...
得益于 MVVM 框架的流行，组件化方案成为了 webapp 开发中的标准，在业务开发中怎么区分基础组件和业务组件往往是需要一定技巧的。 ## 基础组件 我个人的思考总结起来有这么几个特点：低耦合、原子性、高复用。低耦合是指基础组件不应该和其它组件耦合在一起；原子性是指基础组件作为一个基本单元只需要关注前端 UI 层面的输入和输出，其本身是高度自治的；高复用是指基础组件可以和其它基础组件或者是业务组件组合成更加复杂的组件。 ## 业务组件 业务组件总结起来应该具有这么几个特点：高耦合、复杂性、低复用。高耦合是指我们在实现一个具体的业务需求时，往往需要组合基础组件成为一个新的组件；复杂性是指其除了需要关注前端 UI 层面的输入和输出，还需要关注和后端之间的交互；低复用是指业务组件一般是为了实现某个特定需求而开发出来的，当遇到不一样的需求时往往没办法实现复用。
- [知乎移动端动态化方案全览](https://www.infoq.cn/article/rrvp-kli8awex6tub1ag) - [总结移动开发中的动态化技术](https://www.jianshu.com/p/e46922165725) - [打造你自己的动态化引擎](https://juejin.cn/post/7046299455397560350)
样式隔离主要有以下几种方案： 1. BEM(Block Element Modifier) 约定项目前缀； 2. CSS-Modules 打包时生成不同的选择器名（Vue scope 采用这种方式）； 3. Shadow Dom 真正意义上的隔离； 4. css-in-js js 隔离方案： 1. iframe 2. proxy
[传送门](https://cloud.tencent.com/developer/article/1525156)
## 技术博客网站收集 - [大厂面试题每日一题](https://q.shanyue.tech/)](https://q.shanyue.tech/) - [前端知识](http://www.yulilong.cn/) - [工欲善其事 必先利其器](https://miguoer.github.io/blog/)](https://miguoer.github.io/blog/) - [web前端面试 - 面试官系列](https://vue3js.cn/interview/)](https://vue3js.cn/interview/) - [小林coding](https://xiaolincoding.com/)](https://xiaolincoding.com/)
- 两者的模块导入导出语法不同，CommonJs 是通过 module.exports，exports 导出，require 导入；ESModule 则是 export 导出，import 导入。 - CommonJs 是运行时加载模块，ESModule 是在静态编译期间就确定模块的依赖。 - ESModule 在编译期间会将所有 import 提升到顶部，CommonJs 不会提升 require。 - CommonJs 导出的是一个值拷贝，会对加载结果进行缓存，一旦内部再修改这个值，则不会同步到外部。ESModule 是导出的一个引用，内部修改可以同步到外部。 - CommonJs 中顶层的 this 指向这个模块本身，而...
- HTTP2 Server Push，一般用以服务器根据解析 index.html 同时推送 JPG/JS/CSS 等资源，而免了服务器发送多次请求。 - WebSocket，需要服务器与客户端手动编写代码实现全双工通信，WebSocket 在 HTTP 协议之上升级后才可用。
实现方式有 3 种： 1. 父元素设置宽度，子元素撑开，然后设置 padding-bottom 等属性撑开，没有高度的情况下以宽度百分比计算； 2. 通过 js 控制； 3. 使用 aspect-ratio 属性：aspect-ratio: 1 / 1;