360前端星计划笔记——0409

JavaScript从入门到放弃

各司其职

关灯吃面版本一

• 违背了各司其职原则，用js操作了css的功能

关灯吃面版本二

• js通过动态改变类名操作样式，css控制样式

关灯吃面版本三

• 纯css实现，不用js代码
• 隐藏input标签，利用label的特性：点击label可以选定内容
• 缺点在于使用了兄弟选择器，可能会导致兼容性问题

复杂UI组件的设计

京东轮播图

1. 结构设计

   • 命名规范

2. API设计

3. 控制流设计

   • 控制结构
   • 自定义事件：解耦合

   优化方法：

   • 利用插件/依赖注入进行优化：不用小圆点是，直接删除插件即可
   • 改进插件/模板化：将对应的HTML结构也进行同步增删
   • 组件模型抽象：抽象类

局部细节控制

点击只能执行一次

• 逐渐消失的方块

• 异步请求获取数据

过程抽象

• once函数
• 节流函数
• 防抖函数
• 利用队列，同步变异步：累加、连击

Declarative v.s. Imperative

声明式：怎么做

指令式：做什么

高阶函数

高阶函数：自身输入函数或者返回函数

• toggle
  • 声明式
  • 指令式
  • 生成器

总结

1. 各司其职：JavaScript 尽量只做状态管理
2. 结构、API、控制流分离设计 UI 组件
3. 插件和模板化，并抽象出组件模型
4. 运用过程抽象的技巧来抽象并优化局部 API

Web标准：前端的原力

Web标准概述

• IETF
  • HTTP协议各版本介绍
• ECMA
  • ECMA-262各版本介绍
• W3C
  • CSS
  • DOM
  • Graphics
  • HTTP
  • Security
  • Web API
• whatwg
  • HTML5设计原理

Web标准介绍

BOM对象

• window对象，也就是ECMAScript中定义的Global对象。网页中所有全局对象、变量和函数都暴露在这个对象上。
• location对象，通过location对象可以以编程方式操纵浏览器的导航系统。
• navigator对象，对象提供关于浏览器的信息。
• screen对象，保存着客户端显示器的信息。
• history对象，提供了操纵浏览器历史记录的能力。

DOM对象

• DOM Core：在DOM1核心部分的基础上，为节点增加方法和属性。

• DOM Views：定义基于样式信息的不同视图。

• DOM Events：定义通过事件实现DOM文档交互。

• DOM Style：定义以编程方式访问和修改CSS样式的接口。

• DOM Traversal and Range：新增遍历DOM文档及选择文档内容的接口。

• DOM HTML：在DOM1 HTML部分的基础上，增加属性、方法和新接口。

• DOM Mutation Observers：定义基于DOM变化触发回调的接口。这个模块是DOM4级模块，用于取代Mutation Events。

前端常用的 HTTP 知识

HTTP在浏览器网络中的位置：应用层协议

HTTP头相关

请求/响应报文

请求类型	描述
GET	获取一个资源内容
POST	新增一个资源
PUT	更新资源内容
DELETE	删除资源
OPTIONS	根据返回判断是否有对其请求的权限
HEAD	只返回 head，不返回实体内容
PATCH	更新部分内容

状态码

状态码	描述
1xx	请求已接受，需要继续处理
2xx	请求已经正确处理
3xx	重定向
4xx	客户端错误
5xx	服务端错误

常见状态码

状态码	描述
101	切换协议，如：将 HTTP 协议切换为 WebSocket 协议
200	成功
206	返回部分内容，如：大文件下载
301	永久重定向，如：资源更换路径或改名
302	临时重定向，如：当前请求需要登录，临时跳转到登录页
304	资源未修改，不返回实体内容，客户端可直接读取本地缓存内容
400	错误请求
403	拒绝执行，如：无对应的访问权限
404	资源找不到，如：服务器已经删除该资源
413	请求实体过大，如：服务端限制了上传的文件大小
500	服务端内部错误，如：数据处理异常导致报错
502	作为网关或代理服务器时，上游服务器异常
504	作为网关或代理服务器时，上游服务器处理超时

Cookie

• Cookie
• Set-Cookie: 可以设置多个

安全策略

• path
• domain (hostonly*)
• expires (max-age)
• secure
• httponly
• SameSite

问题与防范

• XSS 漏洞盗取 Cookie，设置 httponly
• CSRF 漏洞，设置 token/samesite

Content-Type

• application/x-www-form-urlencoded
• multipart/form-data
• application/json
• text/xml

性能优化

• keep-alive

  • HTTP 1.0 原本不支持 Keep-Alive，后来扩充了 Connection: Keep-Alive
  • HTTP 1.1 默认支持 Keep-Alive，除非显式指明 Connection: close

• 减少网络传输大小

  • 主要是文本资源
  • 大约减少 60%
  • 文件过小不宜压缩（<1K）

• 缓存

  • Last-modified 协商缓存
  • ETag 协商缓存
  • Expires 强缓存
  • Cache-Control
  • LocalStorage
  • ServiceWorker

• http2/http3

  http2

  • 二进制传输
  • 多路复用
  • 头部压缩
  • server push

  http3

  • 基于 QUIC 协议（UDP）

HTTP工具

抓包工具

• Wireshark
• Fiddler
• Firebug for Firefox
• Chrome 开发者工具
• IE8+ 自带的开发者工具

发包工具

• telnet / curl
• Fiddler *
• Tamper for Firefox
• Postman for Chrome *
• Paw for OSX