这是我参与「第四届青训营」笔记创作活动的第4天。

Part 1 前端设计模式

1.1 设计模式分类

创建型：如何创建一个对象
结构型：如何灵活地将对象组装成较大的结构
行为型：负责对象间的高效通信和职责划分

1.2 浏览器中的设计模式

单例模式:全局唯一访问对象;应用场景为缓存,全局状态管理等(注:请求缓存的含义是在页面中，在不同时间、地点发送相同的请求)
发布订阅机制：一种订阅机制，可在被订阅对象发生变化时通知订阅者(应用场景：从系统架构之间的解耦，到业务中一些实现模式，像邮件订阅，上线订阅等等，应用广泛)

1.3 Javascript中的设计模式

原型模式：复制已有对象来创建新的对象(应用场景：JS中对象创建的基本模式)
代理模式：可自定义控制对原对象的访问方式，并且允许在更新前后做一些额外处理(应用场景：监控，代理工具，前端框架实现等等)
迭代器模式：在不暴露数据类型的情况下访问集合中的数据(应用场景：数据结构中有多种数据类型，列表，树等，提供通用操作接口)

1.4前端框架中的设计模式

代理模式:
    1. 在没有框架的状态下，当更改DOM属性时
    2. 在有框架的状态下，更改DOM属性时，就会更新虚拟DOM，之后会有Diff的操作，之后自己会有视图的更新
组合模式：可多个对象组合使用，可也单个对象独立使用(应用场景：DOM，前端组件，文件目录，部门)

写在最后: 设计模式不是银弹

1. 总结出抽象的模式相对比较简单，但是想要将抽象的模式套用到场景中却非常困难

2. 现代编程语言的多遍程范式带来的更多可能性

3. 真正优秀的开源项目学习设计模式并不断实践

Part 2 Web标准

常识:上网指接入Internet,它是地球上相互连接的计算机构成的网络;计算机网络的标志性通信协议是TCP/IP;前端应用的领域之服务器：node.js、Express JS、koa;前端应用的领域之终端和跨端有命令行/终端、桌面跨端、移动跨端

Web结构的变迁

只读时代（HTML/CSS/Javascript）：静态只读；链接跳转
体验时代（Ajax/Web API/Query）：动态交互；社交媒体；单页应用
敏捷时代（Fetch/Node.js/Webpack）：模块化；组件化；React.js；Vue.js；

前端开发：前端应用的领域

To Business：大型公司；公有云平台
To Customer：在线教育平台；生活娱乐平台；
To Developer：例如VS Code

前端的学习路线:

Internet -> HTML/CSS/JavaScript -> Version Control Systems -> Web Security Knowledge -> Package Managers -> CSS Architecture ->  CSS Preprocessors -> Build Tools -> Pick a Framework -> Modern CSS -> Web Components -> CSS Frameworks -> Testing your APPs -> Type Checkers -> Progressive Web Apps -> Server Side Rendering -> GraphQL -> Static Site Generators -> Mobile Applications -> Desktop Application -> Web Assembly