2020年360前端星计划课程笔记-0409

05 - JavaScript

各司其职

• JavaScript — 行为
• CSS — 表现
• HTML — 结构

复杂UI组件的设计

• 轮播图
  • 结构设计
    • 列表结构
    • 图片绝对定位
    • 过渡transition
  • API设计
    • getSelectedItem()
    • getSelectedItemIndex()：index与圆点对应
    • slideTo()：跳转
    • slideNext()：下一页
    • slidePrevious()：上一页
  • 控制流设计
    • 插件/依赖注入
    • 改进插件/模板化
    • 组件模型抽象

局部细节控制

• 只执行一次

  function once(fn){
    return function(...args){
      if(fn){
        let ret = fn.apply(this, args);
        fn = null;
        return ret;
      }
    }
  }
  

• 节流

  function throttle(fn, time = 500){
    let timer;
    return function(...args){
      if(timer == null){
        fn.apply(this,  args);
        timer = setTimeout(() => {
          timer = null;
        }, time)
      }
    }
  }
  
  

• 防抖

  function debounce(fn){
    let timer = null
    return function(...args){
      if(timer != null) {
        clearTimeout(timer)
      }
      timer = setTimeout(() => {
        fn.apply(this, args)
        timer = null
      }, 300)
    }
  }
  

• 消费者

  function consumer(fn, time){
    let tasks = [],
        timer;
    
    return function(...args){
      tasks.push(fn.bind(this, ...args));
      if(timer == null){
        timer = setInterval(() => {
          tasks.shift().call(this)
          if(tasks.length <= 0){
            clearInterval(timer);
            timer = null;
          }
        }, time)
      }
    }
  }
  

• iterative

  function iterative(fn){
    return function(...args){
      return args.reduce(fn.bind(this));
    }
  }
  

• 高阶函数(High-ordered Function)：自身输入函数或返回函数

• toggle

  function toggle(...actions){
    return function(...args){
      let action = actions.shift();
      actions.push(action);
      return action.apply(this, args);
    }
  }
  

总结

如何写好JavaScript

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

06 - WEB标准

• WEB(World Wide Web, 万维网)由Tim Berners-Lee于1989年发明
• WEB标准是构成Web基础、运行和发展的一系列标准的总称
• IETF(Internet Engineering Task Force, 互联网工程任务组)
  • HTTP/0.9
    • GET
  • HTTP/1.0
    • POST、HEAD
    • 版本号
    • 头部字描述、响应
    • 状态码
    • ……
  • HTTP/1.1
    • PUT、PATCH、HEAD、OPTIONS、DELETE
    • 持久连接
    • 强制服务器头部
    • 更好的缓存
    • 分块编码
    • ……
  • The Transport Layer Security(TLS) Protocol Version 1.3
    • HTTPS
  • HTTP/2
    • 二进制协议
    • 多路复用
    • 数据流
    • 头信息压缩
    • 服务器推送
• ECMA
  • 2015年6月：ES6
• W3C
  • BOM(Browser Object Model，浏览器对象模型)
    • window：全局对象
    • location：操纵浏览器导航系统
    • navigator：浏览器信息
    • screen：客户端显示器信息
    • history：操纵浏览器历史记录
  • DOM(Document Object Model，文档对象模型)
    • HTML和XML文档的编程接口
    • DOM1：定义了HTML和XML文档的底层结构
    • DOM2、DOM3
      • DOM Core：在DOM1核心部分的基础上，为节点增加方法和属性
      • DOM Views：定义基于样式信息的不同视图
      • DOM Events：定义通过事件实现DOM文档交互
      • DOM Style：定义以编程方式访问和修改CSS样式的接口 (CSSOM)
      • DOM Traversal and Range：新增遍历DOM文档及选择文档内容的接口
      • DOM HTML：在DOM1 HTML部分的基础上，增加属性、方法和新接口
      • DOM Mutation Observers：定义基于DOM变化触发回调的接口。这个模块是DOM4级模块，用于取代Mutation Events
• WHATWG(Web Hypertext Application Technology Working Group，网页超文本应用技术工作小组)

07 - 前端常用的HTTP知识

• 请求报文

  <method> <request-URL> <version> // 请求行
  <headers> //首部行
  		  //空行
  <entity-body> //实体
  

• 响应报文

  <version> <status> <respon-phrase> //状态行
  <headers> //首部行
  		  //空行
  <entity-body> //实体
  

• 请求类型

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

• 状态码

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

• URL

  <scheme>://<user>:<password>@<host>:<port>/<path>;<params>?<query>#<frag>
  

• Header

  • 通用
    • Date
    • Connection
  • 请求
    • User-Agent
    • Accept
  • 响应
    • Server
    • Last-modified
  • 实体
    • Content-Type
    • Content-Length
  • 扩展(自定义)
    • X-开头

• Cookie

  • name, value, domain, path, Expires/Max-Age, size, Secure, HttpOnly, Samesite
  • 安全策略
    • XSS：设置HttpOnly
    • CSRF：设置token/samesite

• Session

  • 服务器侧对应为 Session，基于 Cookie 存放用户信息
  • Cookie 有效期为 Session

• Content-Type

  • 提交
    • application/x-www-form-urlencoded：key=value&key=value
    • multipart/form-data：文件上传
    • application/json：json数据
    • text/xml：xml数据

• 性能优化

  • keep-alive

    • HTTP 1.1默认keep-alive，除非Connection: close

  • 减少网络传输大小

    • gzip: 主要是文本资源，大约减少60%，文件过小不宜压缩(<1K)

  • 缓存

    • Last-Modified/If-Modified-Since
    • ETag/If-None-Match
    • Expires: 强缓存
    • Cache-Control

    

    • LocalStorage
    • ServiceWorker

  • http2/http3

    • HTTP2: 二进制传输，多路复用，头部压缩，服务端推送
    • HTTP3基于QUIC协议(UDP)

• HTTP抓包工具

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

• HTTP发包工具

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