文章目录
前端与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攻击的库
- 防御XSS的现成工具
前端
- 主流框架默认防御 XSS
- Google-closure-library
服务端
- DOMPurify
- 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 的防御
- 判断请求来自合法来源的方式
- 用 Origin + Referrer 的方式
TypeScript
特点
- 静态类型
- 可读性增强:基于语法解析TSDoc,IDE增强
- 可维护新增强:在编译阶段暴露大部分错误
- 多人合作的大型项目中,获得更好的稳定性和开发效率
- JS 的超集
- 包含兼容所有的JS特性,支持共存
- 支持渐进式引入与升级
设计模式
单例模式
- 定义:全局唯一访问对象
- 应用场景:缓存,全局状态管理等。
发布订阅模式
- 定义:一种订阅机制,可在被订阅对象发生变化时通知订阅者。
- 应用场景:从系统架构之间的解耦,到业务中一些实现模式,像邮件订阅,上线订阅等等,应用广泛。
JavaScript中的设计模式
- 原型模式
- 代理模式
- 迭代模式
编程范式(js)
- 面向过程的问题
- 数据与算法关联弱
- 不利于修改和扩充
- 不利于代码重用
面向对象编程语言的问题在于,它总是附带着所有它需要的隐含环境。你想要一根香蕉,但得到的却是一个大猩猩拿着香蕉,而且 还有整个森林。
2. 函数式编程
- 纯函数编程优势:
- 可缓存
- 可移植
- 可测试
- 可推理
- 可并行
- 函数柯里化
- 响应式编程
- 观察者模式
- 迭代器模式
- Promise/EventTarget 超集*