青训营笔记 - 前端相关

之前对前端一无所知，所以在看后端、大数据相关和数据库相关内容的同时，对前端工作内容快速过了一遍，了解前端技术路线、需要知识和未来一些发展方向。

Web开发与Web开发安全

Web开发经历了三个时代

1. 只读时代：1989-2004
   • HTML/CSS/JaveScript
   • 单项发布、静态只读
   • 链接跳转
   • 表格对齐元素
   • CGII
2. 体验时代：2005-2010
   • Ajax/Web API /jQuery
   • 动态交互
   • 社交媒体
   • 用户生成内容
   • 单页应用
3. 敏捷时代：2010-2021
   • Fetch/Node.js/Webpack
   • 模块化、组件化
   • 转译、打包
   • Vue.js

Web开发相关需要了解浏览器的内部处理原理

学习路线可见roadmap.sh进行学习。

Web开发标准十分重要

主要标准组织有W3C，Ecma，WHIATWG，IETF。

整体流程为

• Explainer demo
• Find the right community/group
• Web IDL for APIs link
• Step-by-step algorithms
• Github, Markdown, respec, bikeshed, etc.
• Get an early review w3ctag/design-reviews
• Write web-patform-tests(WPT) tests

Web 安全相关

• 安全无小事，每一层、每一个细节都可能是漏洞
• 使用的以来(npm package， 甚至是NodeJS)都可能成为薄弱的一环

TypeScript

于2012年，微软发布了第一个版本， 2016年，@type/react发布，TypeScript可开发React，2020年，Vue支持TypeScript。支持广泛。

相比于JS，TS是静态类型语言，是一个弱类型语言。有着静态类型语言的优点：可读性强，可维护性增强，在多人或的大型项目中，可以获得更好的稳定性和开发效率。 整体上包含于兼容所有JS特细腻，支持共存与渐进式引入与升级。

有一些高级特性，如联合类型和交叉类型；类型保护与类型守卫，函数的泛型等。

前端设计模式

设计模式是历史经验的总结，与特定语言无关。

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

浏览器中的设计模式： 单例模式：全局唯一访问对象，常应用于缓存、全局状态管理等

JS中的设计模式

• 原型模式
  • 复制已有对象来创建爱你新对象，是JS中对象创建的基本模式
• 代理模式
  • 自定义控制对原对象的访问方式，并允许在更新后做一些额外处理，常用浓郁监控、代理工具、前端框架实现等
• 迭代器模式
  • 在不暴露数据类型的情况下访问集合中的数据，常用于数据结构中做种数据类型的通用操作接口

总结

前端相比于后端，感觉更偏向用户直接交互，思考的更多是交互、安全和信息获取；而非消息传递，高效存储、查询等。