Day3：BOM、DOM、CSS布局

聊聊算法

基本的排序算法一定要吃透

很多解题思路都是在经典题型上做引申

不要局限于仅仅是把题目做出来，多考虑时间复杂度、空间复杂度

多去leetcode上刷刷题，培养自己的算法思维

JS事件绑定

要掌握的知识点：代理、冒泡

代理的作用：简介、对浏览器的压力比较小

编写一个通用的事件绑定函数

function bindEvent(elem, type, selector, fn){
  if (fn == null){
    fn = selector
    selector = null
  }
  elem.addEventListener(type, function(e){
    var target
    if (selector){
      target = e.target
      if (target.matches(selector)) {
        fn.call(target, e)
      }
    } else {
      fn(e)
    }
  })
}

Ajax

手写一个ajax

var xhr = new XMLHttpRequest()
xhr.open("GET", "/api", false)
xhr.onreadystatechange = function(){
  // 这里的函数异步执行
  if (xhr.readyState == 4) {
    if ( xhr.status == 200){
      alert(xhr.responseText)
    }
  }
}
xhr.send(null)

什么是跨域？

浏览器有同源策略，不允许ajax访问其他域接口

存储

cookie sessionStorage localStorage的区别

• 容量（4k,5m）
• 是否携带到ajax中（前者每次都会带，后者不会带，只作为存储）
• API易用性（cookie需要自己去封装，后两个只要两个api就可以完全搞定）

DOM操作

注意attribute和property的区别

前者是文档属性，后者是js属性

BOM操作

navigator screen location history

CSS布局

css知识体系中的重中之重

常见的布局方法：

• table表格布局
• float浮动 + margin
• inline-block布局
• flexbox布局

确定元素的显示类型

block/inline/inline-block
inline-block可以有宽高，inline元素不能有宽高

确定元素的位置

static/relative/absolute/fixed

static：默认值
relative: 相对于元素本身的偏移
relative偏移的时候，不会改变布局的计算
absolute: 相对于body的绝对定位（脱离文档流）
fixed：相对于可视区域固定的（脱离文档流）

关于清楚浮动

• 浮动的元素不会占据父元素的布局空间，父元素布局的时候不会去管浮动元素，有可能浮动的元素就会超出父元素，对其他元素造成影响
• 让盒子负责自己的布局
• overflow:hidden（auto）
• ::after{clear:both}（让父元素一定要包含浮动元素）

如何适配移动端页面？

• viewport
• rem/viewport/media query
• 设计上：隐藏、折行、自适应