360前端星计划笔记——0409
2020-04-22 02:24
1096 查看
JavaScript从入门到放弃
各司其职
关灯吃面版本一
- 违背了各司其职原则,用js操作了css的功能
关灯吃面版本二
- js通过动态改变类名操作样式,css控制样式
关灯吃面版本三
- 纯css实现,不用js代码
- 隐藏input标签,利用label的特性:点击label可以选定内容
- 缺点在于使用了兄弟选择器,可能会导致兼容性问题
复杂UI组件的设计
京东轮播图
-
结构设计
-
命名规范
-
API设计
-
控制流设计
-
控制结构
- 自定义事件:解耦合
- 利用插件/依赖注入进行优化:不用小圆点是,直接删除插件即可
- 改进插件/模板化:将对应的HTML结构也进行同步增删
- 组件模型抽象:抽象类
优化方法:
局部细节控制
点击只能执行一次
-
逐渐消失的方块
-
异步请求获取数据
过程抽象
- once函数
- 节流函数
- 防抖函数
- 利用队列,同步变异步:累加、连击
Declarative v.s. Imperative
声明式:怎么做
指令式:做什么
高阶函数
高阶函数:自身输入函数或者返回函数
- toggle 声明式
- 指令式
- 生成器
总结
- 各司其职:JavaScript 尽量只做状态管理
- 结构、API、控制流分离设计 UI 组件
- 插件和模板化,并抽象出组件模型
- 运用过程抽象的技巧来抽象并优化局部 API
Web标准:前端的原力
Web标准概述
- IETF HTTP协议各版本介绍
-
ECMA-262各版本介绍
-
CSS
-
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
减少网络传输大小
-
主要是文本资源
缓存
-
Last-modified 协商缓存
http2/http3
http2
-
二进制传输
http3
- 基于 QUIC 协议(UDP)
HTTP工具
抓包工具
- Wireshark
- Fiddler
- Firebug for Firefox
- Chrome 开发者工具
- IE8+ 自带的开发者工具
发包工具
- telnet / curl
- Fiddler *
- Tamper for Firefox
- Postman for Chrome *
- Paw for OSX
- 点赞
- 收藏
- 分享
- 文章举报
相关文章推荐
- CVTRES : fatal error CVT1100: duplicate resource. type:MANIFEST, name:1, language:0x0409【错误解决方法】
- CVTRES : fatal error CVT1100: duplicate resource. type:MANIFEST, name:1, language:0x0409【错误解决方法】
- 0409学习总结1(gcc工具链,gdb调试工具,make工程管理)
- 移动二班16号python基础0409
- Reporting Service 学习笔记3 2010,0409
- 0409
- 0409学习总结2(shell脚本文件的学习)
- 01_32_python基础学习_0409
- 第十五天总结0409
- 【0409】java学习日志
- 0409
- 2_12_python基础学习_0409
- 【小阅读^大脑袋】0409 NO.351
- 0409
- 0409-css文字属性
- 1_01_python的基础学习_0409
- fatal error CVT1100: duplicate resource. type:MANIFEST, name:1, language:0×0409
- 0409
- error CVT1100: duplicate resource. type:MANIFEST, name:1, language:0x0409的解决
- web实训知识点_0409