暑期字节青训营前端学习笔记——简略

前端与HTML

什么是前端？

• 解决GUI人机交互问题
• 跨终端
  ** PC/移动端浏览器
  ** 客户端/小程序
  ** VR/AR技术等
• WEB技术栈

前端应该关注那些方面？

• 功能
• 美观
• 无障碍
• 性能
• 安全
• 兼容性
• 用户体验

注意HTML标签的语义化

这是前端工程师的必修课！！！

web开发的基本情况

关于前端的开发：起源、架构、变迁

只读时代—>体验时代—>敏捷时代

前端应用的领域

To Business
To Customer
To Developer

前端应用领域—浏览器

前端应用领域—服务器

node,express,koa,deno运行时

前端应用领域—终端和跨端

命令行/终端：webpack cli/vue cli
桌面跨端：Electron/NW.js
移动跨端：react native/Flutter

语言、框架、工具

WebAssembly:2019

浏览器、网络、服务器

Web标准

标准组织：

W3C
Ecma
WHATWG
IETF

HTTP协议

初识HTTP协议

什么是HTTP协议

• 超文本传输协议
• 应用层协议，基于TCP协议
• 请求响应
• 简单可扩展
• 无状态

协议分析

报文

method

get:请求一个指定的资源表示形式
post:用于将实体提交到指定资源，通常导致在服务器上的状态变化或副作用
put:用请求有效载荷替换目标资源的所有当前表示
delete:删除指定资源
head:请求一个与get请求的响应相同的响应，但没有响应体
connect:建立一个到由目标资源标识的服务器的隧道
options:用于目标资源的通信选项
trace:沿着到目标资源的路径执行一个消息环回的测试
patch:用于对资源应用部分修改

Web安全

攻击

XSS
CSRF（跨站伪造请求）
注入(SQL,CLI)
DOS
中间人攻击

防御

对于XSS攻击：

永远不信任用户提交的内容
不要将用户提交的内容直接转换成 DOM
有一些预防XSS攻击的库

1. 防御XSS的现成工具

前端

• 主流框架默认防御 XSS
• Google-closure-library

服务端

• DOMPurify

2. csp

• 哪些源（域名）被认为是安全的
• 来自安全源的脚本可以执行，否则直接抛错
• 对 eval + inline script 说 NO！

服务器的响应头部：

Content-Security-Policy:script-src 'self'  同源
Content-Security-Policy:script-src 'self'  https://domain.com

浏览器meat：

<meta http-equiv="Content-Security-Policy" content="script-src self">

CSRF 的防御

1. 判断请求来自合法来源的方式

• 用 Origin + Referrer 的方式

TypeScript

特点

1. 静态类型
   • 可读性增强：基于语法解析TSDoc，IDE增强
   • 可维护新增强：在编译阶段暴露大部分错误
   • 多人合作的大型项目中，获得更好的稳定性和开发效率
2. JS 的超集
   • 包含兼容所有的JS特性，支持共存
   • 支持渐进式引入与升级

设计模式

单例模式

1. 定义：全局唯一访问对象
2. 应用场景：缓存，全局状态管理等。

发布订阅模式

1. 定义：一种订阅机制，可在被订阅对象发生变化时通知订阅者。
2. 应用场景：从系统架构之间的解耦，到业务中一些实现模式，像邮件订阅，上线订阅等等，应用广泛。

JavaScript中的设计模式

1. 原型模式
2. 代理模式
3. 迭代模式

编程范式（js）

1. 面向过程的问题

• 数据与算法关联弱
• 不利于修改和扩充
• 不利于代码重用

面向对象编程语言的问题在于，它总是附带着所有它需要的隐含环境。你想要一根香蕉，但得到的却是一个大猩猩拿着香蕉，而且 还有整个森林。
2. 函数式编程

• 纯函数编程优势：
  • 可缓存
  • 可移植
  • 可测试
  • 可推理
  • 可并行
• 函数柯里化

3. 响应式编程

• 观察者模式
• 迭代器模式
• Promise/EventTarget 超集*

浏览器运行原理

组件库的使用与自定义组件