您的位置:首页 > Web前端

360前端星计划笔记——0409

2020-04-22 02:24 1096 查看

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
    • 点赞
    • 收藏
    • 分享
    • 文章举报
    我叫做强强 发布了1 篇原创文章 · 获赞 0 · 访问量 6 私信 关注
  • 内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
    标签: