- 参考
- 阅读须知
- 需要前置知识：熟悉前端开发语言和流程
00 课程介绍
- 复习前端基本知识
- 扩展一些有趣的内容
- 前端三剑客
01 基础
HTML
- 基础复习
CSS
- 伪类选择器与伪元素选择器
- 元素自身使用伪类选择器
- 元素内容使用伪元素选择器
JavaScript
- 补充 self语言
- Self语言是一种基于原型继承的面向对象编程语言，具有以下几个特性： 1. 原型继承：Self语言采用原型继承的方式，即通过复制现有对象来创建新对象，而不是通过类和实例的方式来创建对象。这种方式可以简化对象的创建和继承，提高代码的灵活性和可复用性。 2. 动态类型：Self语言是一种动态类型语言，即变量的类型在运行时才确定。这种方式可以提高代码的灵活性和可扩展性，但也增加了类型检查和调试的难度。 3. 消息传递：Self语言采用消息传递的方式来实现对象之间的通信和交互。这种方式可以提高代码的可读性和可维护性，但也增加了代码的复杂度和运行时的开销。 4.反射：Self语言支持反射机制，即可以在运行时获取对象的类型、属性和方法等信息，并进行动态修改和调用。这种方式可以实现一些高级的编程技巧和模式，如元编程、代理模式等。 5. 惰性求值：Self语言支持惰性求值（Lazy Evaluation），即只在需要时才计算表达式的值。这种方式可以提高代码的效率和性能，尤其是在处理大规模数据和复杂计算时。 6. 并发编程：Self语言支持并发编程，即可以通过协程（Coroutine）来实现多任务并发执行。这种方式可以提高程序的响应速度和并发能力，但也增加了代码的复杂度和调试难度。 总的来说，Self语言的特性使得它在面向对象编程、元编程、并发编程等方面具有一定的优势和应用价值。同时，Self语言也具有一定的挑战和限制，如动态类型的调试难度、消息传递的运行时开销等。因此，在实际应用中需要根据具体情况进行权衡和选择，选择合适的编程语言和技术，从而实现程序的高效、稳定和可维护。
- 左侧是JS的最初提供的功能，中间是JS后续支持的，右侧是JS相关的产品。
- 尽量对同一种类型进行操作，避免未定义错误。
- JS的基本语法-function
浏览器引擎
- 浏览器渲染页面的流程
- V8展示流程
- 值得注意的是其中 Turbofan，如果优化失败会返回进行重新类型确认，这也是为什么尽量操作同一类型
02 协作
趋势
CSS in HTML
Javascript in HTML
- script标签很强大，可以引入外部超链接文件与内部编写脚本
- 默认情况下脚本阻塞页面加载
- 添加 异步标号（）使得脚本的下载变成异步，添加diff使脚本的执行变成异步
- JS脚本都是全局的
5. JS的重要功能：将页面处理为文档树对象
6. JS触发过程包含了事件捕获与冒泡两个阶段
7. JS中的事件处理使单线程的
8. 先处理宏队列，再处理微任务队列，再处理宏任务队列……
1. 微任务：promise call back等等
2. 宏任务：浏览器默认执行的代码
HTML in Javascript
- 主要是动态修改HTML内容
- 一般会基于现成的渲染框架来做
- 比如最经典的模板语言，上图左侧 Mustache
- 右侧是比较现代的JSX
CSS in Javascript
- JS动态操作CSS
- 左下是React演示
- React中由于class是一个保留关键字，所以使用classname表示
- 右侧是Vue的演示
- 主要是为了解决class名冲突的问题
- CSS module 会将原来的名称替换为一个随机字符串
- JSS通过模板直接引入
03 HTML(5)
HTML DTD
标签
head 标签
body 功能性标签
- 随用随查就可以
HTML ARIA
- ARIA (Accessible Rich Internet Applications) 是一组属性，用于定义使残障人士更容易访问 Web 内容和 Web 应用程序（尤其是使用 JavaScript 开发的应用程序）的方法。
- 用对比不用好，不用比用错好
HTML5
HTML5 语义化标签
- 用对比不用好，不用比用错好
HTML5 表单增强
- 左侧是HTML5提供的新的表单功能，右侧是一个简单的示例
HTML5 存储
HTML5 IndexedDB
- 事务性
- 异步
- 存储高
- 支持索引整合
- 效率一般但是为前端提供了一个新的访问数据方式
HTML5 PWA & AMP
- PWA
- AMP
HTML5 Audio
- 像一个拓扑图输出电路
HTML5 video
- 也可使用source引入
- 可以支持实现一个可定制化的能力
HTML5 二进制
- 通过集成Blob对象实现对较大的二进制文件的读取能力
HTML5 API
- 上图列举了三个HTML5的API
HTML5 web worker
- 右下角是一个 sever worker
HTML5 web socket
- 支持 socket 式的全双工通信，模拟TCP
HTML5 Shadow DOM
HTML5 Web Component
- 实现自定义标签能力
HTML5 SVG & Canvas
- SVG：基于XML，向量化的，支持交互的图片
- Canvas：HTML元素，可以画各种各样的图形
- 区别：SVG基于向量，可扩展，Canvas基于点阵，会失真；SVG对事件支持更好；Canvas对元素绘制支持更好
WebGL& WebGPU
- 将前端GPU能力暴露给前端开发人员使用
- 实现原理
- 重点：通过着色器语言
Webassembly
03 拓展交流
web的风靡
大前端
交互范式 MVC & MVVM & MVP
- VC view处理界面相关交互，model维护渲染界面需要的数据层，controller处理业务逻辑
- VP是VC的改进，将所有的操作内聚到了presenter这层操作
- VVM 可复用性增强
