备战校招第十二天

发表于 分类于
  • RESTful API
  • Vue 双向数据绑定原理
  • 元素的 margin/padding 的百分比值 是基于父元素的宽度

RESTful API

出现原因

前后端分离，而前端设备又有很多，需要一种统一的机制，来进行规范。

要点

  • API 放于专用域名，或主域名下的二级路径
  • 版本号也要放于网址中
  • 每个网址代表一个资源（Resource），所以网址中只能包括名词，若表示集合应为复数
  • HTTP 动词
    • GET（SELECT）：从服务器取出资源（一项或多项）。
    • POST（CREATE）：在服务器新建一个资源。
    • PUT（UPDATE）：在服务器更新资源（客户端提供改变后的完整资源）。
    • PATCH（UPDATE）：在服务器更新资源（客户端提供改变的属性）。
    • DELETE（DELETE）：从服务器删除资源。
    • HEAD：获取资源的元数据。
    • OPTIONS：获取信息，关于资源的哪些属性是客户端可以改变的。
  • 根据提供参数，筛选返回结果，两种可选提供方式
    • params 参数，例如：/api/animals/monkey
    • query 参数，例如：/api/animals/?animal=monkey
  • 状态码

扩展

  • Hypermedia API，返回结果中提供链接，即返回结果中提供链接，连向其他API方法，使得用户不查文档，也知道下一步应该做什么。
  • 服务器返回的交互数据格式应为 json ，避免使用 XML

Vue 双向数据绑定原理

  • 首先需要将数据变得可检测状态，使用函数 Object.defineProperty 进行 Observe
  • Object.defineProperty 中最后一个参数中有两个特殊的属性，分别是 set 和 get，在get 中收集依赖，set 中通知更新
  • 并为每一个数据都建立一个依赖管理器 Dep
  • 谁用到数据谁就是依赖，就为谁创建一个 Watcher
  • 为每一个依赖创建一个 Watcher 实例，当数据发生变化，通知 Watcher 实例，由 Watcher 实例去做真实的更新操作

具体步骤看图

子元素的 margin/padding 的百分比值 是基于父元素的宽度

Reference

resetful http://www.ruanyifeng.com/blog/2014/05/restful_api.html

Vue 双向数据绑定原理

  • https://vue-js.com/learn-vue/reactive/object.html#_1-%E5%89%8D%E8%A8%80
  • https://messiahhh.github.io/blog/frontend/vue.html#vue%E5%8F%8C%E5%90%91%E7%BB%91%E5%AE%9A%E7%9A%84%E5%8E%9F%E7%90%86