前言

这个面试的电话来的非常的突然似的我触不及防
但是也只好应战，在电面的过程中，我的状态非常的糟糕
很多基础知识遗忘，很多都没答上来，感觉自己这次是 gg 了
但是没关系总结问过的问题，虽然有些不记得但是把记得的记录下来
不过也是收获满满，知道自己那些方面需要努力做好准备迎接新的挑战

开始

状态码

http://tool.oschina.net/commons?type=5
常用的有哪些

如何在原生中绑定一个 DOM

我第一想法就是 onclick ondouble 等这些鼠标事件，但是我并没有说出口我不知道如何的去诉说
当我回来查阅发现 js 事件绑定有 3 种方法

一、在 DOM 元素中直接绑定（就是在 html 中直接写上去）

JavaScript 支持在标签中直接绑定事件，语法为： onXXX=”JavaScript Code”
1. onXXX 为事件名称。例如，鼠标单击事件 onclick ，鼠标双击事件 ondouble，鼠标移入事件 onmouseover，鼠标移出事件 onmouseout 等
1. JavaScript Code 为处理事件的 JavaScript 代码，一般是函数

<!-- 1. 直接把函数写在html里面，onclick -->
<input onclick="alert('谢谢支持')" type="button" value="点击我，弹出警告框" />
<!-- 2. 把函数写在js中调用-->
<input onclick="myAlert()" type="button" value="点击我，弹出警告框" />

<script>
  function myAlert() {
    alert("你点击了按钮");
  }
</script>

二、在 js 代码中绑定（就是直接在 js 中获取并操作 dom）

在 JavaScript 代码中绑定事件可以使 JavaScript 代码与 HTML 标签分离，文档结构清晰，便于管理和开发。
在 JavaScript 代码中绑定事件的语法为：
elementObject.onXXX=function(){
// 事件处理代码
}
1. elementObject 为 DOM 对象，即 DOM 元素。
1. onXXX 为事件名称。

<input id="demo" type="button" value="点我显示，dom" />

<script>
  // dom.getid 通过id的方式来获取到input的dom元素并挂在一个点击事件
  document.getElementById("demo").onclick = function() {
    alert(this.getAttribute("type")); // this 指当前发生事件的HTML元素，这里是<div>标签
  };
</script>

三、绑定事件监听函数(这个学习的时候用过之后再也没有用过了，用过 jq 的可能感觉熟悉一些)

绑定事件的另一种方法是用 addEventListener() 或 attachEvent() 来绑定事件监听

addEventListener()函数语法：

elementObject.addEventListener(eventName,handle,useCapture);

参数	说明
elementObject	DOM 对象（即 DOM 元素）。
eventName	事件名称。注意，这里的事件名称没有“ on ”，如鼠标单击事件 click ，鼠标双击事件 doublethink ，鼠标移入事件 mouseover，鼠标移出事件 mouseout 等。
handle	事件句柄函数，即用来处理事件的函数。
useCapture	Boolean 类型，是否使用捕获，一般用 false 。这里涉及到 JavaScript 事件流的概念，后续章节将会详细讲解。

attachEvent()函数语法：

elementObject.attachEvent(eventName,handle);

参数	说明
elementObject	DOM 对象（即 DOM 元素）。
eventName	事件名称。注意，与 addEventListener()不同，这里的事件名称有“ on ”，如鼠标单击事件 onclick ，鼠标双击事件 ondoubleclick ，鼠标移入事件 onmouseover，鼠标移出事件 onmouseout 等。
handle	事件句柄函数，即用来处理事件的函数。

这是一个兼容 ie8 以下版本的兼容代码

// 兼容代码
function addEvent(obj, type, handle) {
  try {
    // Chrome、FireFox、Opera、Safari、IE9.0及其以上版本
    obj.addEventListener(type, handle, false);
  } catch (e) {
    try {
      // IE8.0及其以下版本
      obj.attachEvent("on" + type, handle);
    } catch (e) {
      // 早期浏览器
      obj["on" + type] = handle;
    }
  }
}

// 使用

addEvent(document.getElementById("demo"), "click", myAlert);
function myAlert() {
  alert("又是一个警告框");
}

如何在原生中获取 dom 元素

获取 dom 的方法其实有很多种，在我脑海里第一个出现的是 byid byclass ，然而我并不会拼读这也太尴尬了

通过ID获取（getElementById）
通过name属性（getElementsByName）
通过标签名（getElementsByTagName）
通过类名（getElementsByClassName）
通过选择器获取一个元素（querySelector）
通过选择器获取一组元素（querySelectorAll）
获取html的方法（document.documentElement） document.documentElement是专门获取html这个标签的
获取body的方法（document.body）document.body是专门获取body这个标签的。

通过 ID 获取（getElementById）

通过 document 调用 getElementById 的方法传入一个 string 类型的 id
它如果获取到了就会返回一个元素而且是只会返回一个，如果没有找到那就返回 null

1	document.getElementById("id");

通过 name 属性（getElementsByName）

通过 document 调用 getElementByName 的方法传入一个 string 类型的 name
这个 name 是啥呢，例如： input 中，这里 name 就是这个 up
一般这个多用于一些表单中的元素获取上比较多
这个返回的是一个数组，如果没有那就是空数组

1	document.getElementsByName("name");

通过标签名（getElementsByTagName）

通过 document 调用 getElementsByTagName 的方法传入一个 string 类型的元素名（不分大小写）
得到的也是一个数组，没有依然是返回空数组

// 这是一个通过类型名称div给所有的div添加点击事件的操作
var obj = document.getElementsByTagName("div");
for (let i = 0; i < obj.length; i++) {
  obj[i].onclick = function(e) {
    console.log(i);
  };
}

通过类名（getElementsByClassName）

通过 document 调用 getElementsByClassName 的方法传入一个 string 类型的类名（也就是 class）
也可以写连锁的类型着么为连锁呢， div.nav.abc div 下的类名下的类名为 abc 的元素
得到的也是一个数组，没有依然是返回空数组

<div class="abc"></div>

<script>
  let dv = document.getElementsByClassName("animated");
</script>

通过选择器获取一个元素（querySelector）

这是我最常用也是最喜欢的，因为别的我都记不住就记住了这个
他就好像 css 一样去写变量就可以了，非常的好用
通过 document 调用 querySelector 的方法传入一个 string 的值可以是 id 可以是类也可以是元素名，只要是 css 可以的它都可以
它会返回它所找到的第一个元素

1
2
3

document.querySelector(".abc");
document.querySelector("#abc");
document.querySelector("div");

通过选择器获取一组元素（querySelectorAll）

这个和上面第五那个一样只不过这个是返回找到的所有元素
返回值是一个类数组。

1
2
3

document.querySelectorAll(".abc");
document.querySelectorAll("#abc");
document.querySelectorAll("div");

ajax 的原理以及原生如何使用

ajax 的出现,刚好解决了传统方法的缺陷。AJAX 是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
XMLHttpRequest 对象: XMLHttpRequest 对象是 ajax 的基础,XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。目前所有浏览器都支持 XMLHttpRequest

方法	描述
abort()	停止当前请求
getAllResponseHeaders()	把 HTTP 请求的所有响应首部作为键/值对返回
getResponseHeader(“header”)	返回指定首部的串值
open(“method”,”URL”,[asyncFlag],[“userName”],[“password”])	建立对服务器的调用。method 参数可以是 GET、POST 或 PUT。url 参数可以是相对 URL 或绝对 URL。这个方法还包括 3 个可选的参数，是否异步，用户名，密码
send(content)	向服务器发送请求
setRequestHeader(“header”, “value”)	把指定首部设置为所提供的值。在设置任何首部之前必须先调用 open()。设置 header 并和请求一起发送 (‘post’方法一定要 )

在原生中就是通过 XMLHttpRequest 来请求 ajax 的

// get 请求
//步骤一:创建异步对象
var ajax = new XMLHttpRequest();
//步骤二:设置请求的url参数,参数一是请求的类型,参数二是请求的url,可以带参数,动态的传递参数starName到服务端
ajax.open("get", "getStar.php?starName=" + name);
//步骤三:发送请求
ajax.send();
//步骤四:注册事件 onreadystatechange 状态改变就会调用
ajax.onreadystatechange = function() {
  if (ajax.readyState == 4 && ajax.status == 200) {
    //步骤五 如果能够进到这个判断 说明 数据 完美的回来了,并且请求的页面是存在的
    console.log(ajax.responseText); //输入相应的内容
  }
};

// post 请求
//创建异步对象
var xhr = new XMLHttpRequest();
//设置请求的类型及url
//post请求一定要添加请求头才行不然会报错
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.open("post", "02.post.php");
//发送请求
xhr.send("name=fox&age=18");
xhr.onreadystatechange = function() {
  // 这步为判断服务器是否正确响应
  if (xhr.readyState == 4 && xhr.status == 200) {
    console.log(xhr.responseText);
  }
};

jsonp

JSONP(JSON with Padding) 是一种跨域请求方式。主要原理是利用了 script 标签可以跨域请求的特点，由其 src 属性发送请求到服务器，服务器返回 js 代码，网页端接受响应，然后就直接执行了，这和通过 script 标签引用外部文件的原理是一样的。
JSONP 由两部分组成：回调函数和数据，回调函数一般是由网页端控制，作为参数发往服务器端，服务器端把要返回的数据拼成字符串作为函数的参数传入。
比如网页端创建一个 script 标签，并给其 src 赋值为 http://www.example.com/json/?callback=process，此时网页端就发起一个请求。服务端将要返回的数据拼好最为函数的参数传入，服务端返回的数据格式类似”process({‘name’:’example’})”，网页端接收到了响应值，因为请求者是 script，所以相当于直接调用 process 方法，并且传入了一个参数。
单看响应返回的数据，JSONP 比 ajax 方式就多了一个回调函数。

function myjsonp(URL, callback, callbackname) {
  //给系统中创建一个全局变量，叫做callbackname，指向callback函数
  //定义
  window[callbackname] = callback;
  //创建一个script节点
  var oscript = document.createElement("script");
  //和image不一样，设置src并不会发出HTTP请求
  oscript.src = URL;
  oscript.type = "text/javascript";
  //script标签的请求是在上树的时候发出，请求的是一个函数的执行语句
  document.head.appendChild(oscript);
  //为了不污染页面，瞬间把script拿掉
  document.head.removeChild(oscript);
}

//使用
myjsonp(
  "http://sclub.jd.com/productpage/p-1217508-s-0-t-3-p-1.html?callback=abcdefg",
  function(data) {
    console.log(data);
  },
  "abcdefg"
);

// 如果是在jq中使用就方便很多了
$.ajax("test.txt", {
  //JSON跨域的时候要写一个dataType，注意不是type而是dataType
  dataType: "jsonp",
  //要定义的函数名字，因为JSONP不缺执行，缺定义
  jsonpCallback: "fun",
  //信息回来之后执行的事情
  success: function(data) {
    console.log(data); //这里得到了请求的数据
  }
});

react

是否使用过高价组件

我一开始还没有回过神来，后来反问的时候我问了这个我就发现嗯这个我用过
其实高价组件就是把一个组件封装起来成为一个新的组件，但是在这个过程中在做一些封装添加等操作
从而得到一个全新的组件

react有那些生命周期（比较常用）

getDefaultProps 初始化Props属性(props父组件传过来的属性)
getInitialState 初始化当前组件的状态(state变量数据)
componentWillMount 组件初始化之前触发的生命周期（就是一开始就执行的函数）（用的比较多）
render 渲染界面（必有的）
componentDidMount 组件Dom调用完之后触发的生命周期（用的比较多）
componentWillReceiveProps 父组件数据传递调用的方法（用的比较多）
shouldComponentUpdate 组件更新时调用的方法
componentWillUpdate 组件更新之前
componentDidUpdate 组件更新之后
componentWillUnmount 组件销毁

react开发组件 function和class 编写组件有什么区别？那个好？有什么优势？

https://www.cnblogs.com/wonyun/p/5930333.html
函数组件与类组件的区别：
| 区别 | 函数组件 | 类组件 |
| —————- | ——– | —— |
| 是否有 this | 没有 | 有 |
| 是否有生命周期 | 没有 | 有 |
| 是否有状态 state | 没有 | 有 |
class组件编译出来体积比较大容易让文件变大

node 能获取到前端传过来的什么东西（其实这里重点应该是http协议相关的知识了）

可以获取前端传过来的getpost的数据
https://www.cnblogs.com/binghuaZhang/p/10793086.html
https://blog.csdn.net/qq_15766181/article/details/50605959

后记

这一次确实没有准备好，很多基础的知识都没有答上来，确实缺乏锻炼，也感谢腾讯大佬给了这么一次机会
让我认识到了自己都不足，以后会做的更好，积累经验.
欢迎进入我的博客：https://yhf7.github.io/ 或 https://yhf7.top
如果有什么侵权的话，请及时添加小编微信以及 qq 也可以来告诉小编（905477376 微信 qq 通用），谢谢！

不忘初心，方得始终

电话面试总结

前言

开始

状态码

如何在原生中绑定一个 DOM

一、在 DOM 元素中直接绑定（就是在 html 中直接写上去）

二、在 js 代码中绑定（就是直接在 js 中获取并操作 dom）

三、绑定事件监听函数(这个学习的时候用过之后再也没有用过了，用过 jq 的可能感觉熟悉一些)

addEventListener()函数语法：

attachEvent()函数语法：

这是一个兼容 ie8 以下版本的兼容代码

如何在原生中获取 dom 元素

ajax 的原理以及原生如何使用

jsonp

react

是否使用过高价组件

react有那些生命周期（比较常用）

react开发组件 function和class 编写组件有什么区别？那个好？有什么优势？

node 能获取到前端传过来的什么东西（其实这里重点应该是http协议相关的知识了）

后记

前言

开始

状态码

如何在原生中绑定一个 DOM

一、在 DOM 元素中直接绑定（就是在 html 中直接写上去）

二、在 js 代码中绑定（就是直接在 js 中获取并操作 dom）

三、绑定事件监听函数(这个学习的时候用过之后再也没有用过了，用过 jq 的可能感觉熟悉一些)

addEventListener()函数语法：

attachEvent()函数语法：

这是一个兼容 ie8 以下版本的兼容代码

如何在原生中获取 dom 元素

ajax 的原理以及原生如何使用

jsonp

react

是否使用过高价组件

react有那些生命周期（比较常用）

react开发组件 function和class 编写组件有什么区别？那个好？ 有什么优势？

node 能获取到前端传过来的什么东西（其实这里重点应该是http协议相关的知识了）

后记

react开发组件 function和class 编写组件有什么区别？那个好？有什么优势？