前端基础知识（转载+整理）

以下内容为慕课网的《快速搞定前端技术一面匹配大厂面试要求》课程的知识。

作用域和闭包

前端【基础知识】 ②作用域和闭包（场景题）

DOM、BOM、事件

前端【基础知识】 ④事件与DOM

DOM

1. DOM是哪种数据结构？

DOM（Document Object Model）

DOM树，树结构

DOM本质是一棵树，是HTML解析出来的一棵树

2. DOM节点操作API

getElementById() ：通过id获取元素
getElementsByTagName() ：通过标签名获取元素集合
getElementsByClassName() ：通过class获取元素集合
querySelectorAll() ：通过标签获取元素集合

3. DOM结构操作

新建节点：createElement('p') ，新建了一个<p>节点
节点内容赋值：innerHTML
插入节点：appendChild()
- 该方法对不存在的节点，进行插入操作
- 对于现有的节点，进行移动操作
获取父元素：node.parentNode
获取子元素：node.childNodes
删除节点：removeChild()

BOM

navigator：包含有关浏览器的信息。属性方法：www.w3school.com.cn/jsref/dom_o…
screen：包含有关客户端显示屏幕的信息。

location：包含有关当前 URL 的信息。

history：包含用户（在浏览器窗口中）访问过的 URL。

通用的事件绑定（监听）函数

普通绑定

<div>
	<button id="btn1">一个按钮</button>
</div>

function bindEvent( elem , type , fn ){
    elem.addEventListener( type , fn )
}

const btn1 = document.getElementById('btn1')

bindEvent( btn1 , 'click' , e => {
    alert('clicked')
} )

通用事件绑定（考虑事件代理）

<div id="div1">
    <a href="#">a1</a>
    <a href="#">a2</a>
    <a href="#">a3</a>
    <a href="#">a4</a>
</div>
<button id='btn'>加载更多</button>


function bindEvent(elem, type, selector, fn) {
  if (fn == null) {
    fn = selector;
    selector = null;
  }
  elem.addEventListener(type, (e) => {
    let target = e.target;
    if (selector) {
      // 需要代理
      if (target.matches(selector)) {
        fn.call(target, e);
      }
    } else {
      fn.call(target, e); // 不需要代理
    }
  });
}

const div1 = document.getElementById("div1");
bindEvent(div1, "click", "a", function (event) {
  event.preventDefault(); //阻止默认事件行为
  console.log(this.innerHTML);
});

const btn = document.getElementById("btn");
bindEvent(btn, "click", function (event) {
  console.log("btn click");
  console.log(this.innerHTML);
});

（1）使用e.target获取触发元素

(2) 用matches来判断是否是触发元素

例如：无限下拉图片列表，监听每个图片的点击，就可以使用事件代理来实现。

HTTP、Ajax、跨域、存储

前端【基础知识】 ⑤Http、Ajax、跨域

存储

cookie

通过document.cookie进行设置：

设置格式为：key = value
对于不存在的key，进行添加
对于已存在的key，进行覆盖

Ajax

手写简易Ajax

function ajax ( url , successFn ){

    const xhr = new XMLHttpRequest()
    xhr.open( 'GET' , url , true)
    // true异步，避免卡住， false为同步

    xhr.onreadystatechange = function() {
        if( xhr.readyState == 4 ){
            if( xhr.status == 200 ){
                successFn(xhr.responseText)
            }
        }
    }

    xhr.send(null)
}

结合Promise手写Ajax

function ajax(url) {
    const p = new Promise((resolve, reject) => {
    
        const xhr = new XMLHttpRequest();
        xhr.open("GET", url, true);
        // true异步，避免卡住， false为同步
        
        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4) {
            
                if (xhr.status === 200) {
                    resolve(JSON.parse(xhr.responseText));
                } else if (xhr.status === 404) {
                    reject(new Error("404 not found"));
                }
                
            }
        };
        
        xhr.send(null);
    });
    return p;
}

实际使用：

const url = "/data/test.json";
ajax(url)
  .then((res) => console.log(res))
  .catch((err) => console.log(err));

实际项目中 ajax 的常用插件

JQuery中调用Ajax： jQuery 完整 ajax示例
Fetch：Fetch

使用Fetch需要注意以下3点：
- 当接收到一个代表错误的 HTTP 状态码时，从 fetch() 返回的 Promise 不会被标记为 reject， 即使响应的 HTTP 状态码是 404 或 500。相反，它会将 Promise 状态标记为 resolve （但是会将 resolve 的返回值的 ok 属性设置为 false ），仅当网络故障时或请求被阻止时，才会标记为 reject。
- fetch() **可以不会接受跨域 cookies；**你也可以不能使用 fetch() 建立起跨域会话。其他网站的 Set-Cookie 头部字段将会被无视。
- fetch 不会发送 cookies。除非你使用了credentials 的初始化选项。（自 2017 年 8 月 25 日以后，默认的 credentials 政策变更为 same-origin。Firefox 也在 61.0b13 版本中进行了修改）
axios：axios

axios支持Promise

HTTP

methods

传统的methods

get：从服务器获取数据
post：向服务器提交数据

现在的methods

get：获取数据
post：新建数据
patch/put：提交数据
delete：删除数据

Restful API

一种新的API设计方法

传统的API设计：把每个URL当做一个功能；

Restful API设计：把每个URL当做一个唯一的资源

如何设计成一个资源？

尽量不用URL参数

传统API设计：/api/list?pageIndex=2

Restful API设计：/api/list/2

用method表示操作类型

传统API设计：
- post请求：/api/create-blog
- get请求：/api/update-blog?id=100
- get请求：/api/get-blog?id=100
Restful API设计：
- post请求：/api/blog
- patch请求：/api/blog/100
- get请求：/api/blog/100

三种刷新操作

正常操作：地址栏输入url，跳转链接，前进后退等
手动刷新：F5，点击刷新按钮等
强制刷新：Ctrl+F5 不同刷新操作，不同的缓存策略：
正常操作：强制缓存有效，协商缓存有效
手动刷新：强制缓存无效，协商缓存有效
强制刷新：强制缓存无效，协商缓存无效