XMLHttpRequest发送请求时的流程

XMLHttpRequest 是一个浏览器接口，使得Javascript可以进行HTTP(S)通信。

ajax是asynchronous javascript and XML的简写，中文翻译是异步的javascript和XML，这一技术能够向服务器请求额外的数据而无须卸载页面，会带来更好的用户体验。虽然名字中包含XML，但ajax通信与数据格式无关. XMLHttpRequest 是ajax 技术的一种实现方式

使用流程如下

创建AJAX对象；

const xhr = new XMLHttpRequest()

发出HTTP请求；

xhr.open('get', '/userInfo', true)
xhr.send(null)//@param : data

open 参数说明:

第一个参数 method：要发送的请求的类型。比如GET、POST、PUT、DELETE等。
第二个参数 url：请求的URL。
第三个参数 async：是否异步发送请求的布尔值。true为异步发送请求。

send 参数说明:

参数data：作为请求主体发送的数据

接收服务器传回的数据；请求发出后xhr 通过回调onreadystatechange 来报告处理进度. 其状态存于变量:xhr.readyState 中,我们可以根据readyState的值来判断xhr 所处状态和阶段其中:

值	内容
0	（UNSENT）未初始化。尚未调用open()方法。
1	（OPENED）启动。已经调用open()方法，但没有调用send()方法。
2	（HEADERS_RECEIVED）发送。已经调用send()方法，但尚未接收到响应。
3	（LOADING）接收。已经接收到部分响应数据。
4	（DONE）完成。已经接收到全部响应数据。

更新网页数据当readyState==4 时.可以通过 xhr 的,responseText 来获取返回内容.

TypeScript的泛型和接口的区别

泛型表示某个不确定的类型
接口是对行为的抽象, 使用interface 来定义, 类可以implement 一个或多个接口.

//声明一个泛型类型的函数
function  Hello<T>(arg:T):T {
    return arg;
}
//声明一个方法该方法引用上面的泛型类型的函数
let myHello:<T>(arg:T) => T = Hello;
//使用,在使用是泛型需要被具体的类型替代,这里使用String 代替T
myHello('xiaochuan')
//接口用法 1
interface ClockInterface {
    currentTime: Date;
}

class Clock implements ClockInterface {
    currentTime: Date;
    constructor(h: number, m: number) { }
}

//接口用法2 作为函数类型
interface SearchFunc {
  (source: string, subString: string): boolean;
}
let mySearch: SearchFunc;
mySearch = function(source: string, subString: string) {
  let result = source.search(subString);
  return result > -1;
}

fetch和ajax(xmlHttpRequest)的区别

相同点 都是浏览器接口,使js可以进行和http(s)通信 不同点

兼容性, ie完全不支持,edge14 之前不支持
语法简洁，更加语义化,fetch 使用方式和我们常用的封装后的ajax一样.
fetch 基于标准 Promise 实现，支持 async/await
默认情况下, fetch 不会从服务端发送或接收任何 cookies
fetch 无法监控进度(硬伤)
fetch不支持abort，不支持超时控制(需要自己写超时处理程序来模拟,但还是无法abort请求)(硬伤)
fetch只对网络请求报错，对400，500都当做成功的请求，需要封装去处理

总结

fetch 不完美,并不能完整替换xhr.
fetch 有些缺点是硬伤,只能用xhr.

个人理解,fetch只是个过渡产品犹如国产车,配置挺高档,发动机是坨翔.

draggble拖拽的原理、插件的源码

实现原理

监听拖动对象的 mousedown mousemove mouseup 三个事件

被拖动的对象是absolute ,

在允许拖拽的节点元素上，使用on来监听mousedown(按下鼠标按钮)事件，鼠标按下后，克隆当前节点
监听mousemove(鼠标移动)事件，修改克隆出来的节点的坐标，实现节点跟随鼠标的效果
监听mouseup(放开鼠标按钮)事件，将原节点克隆到鼠标放下位置的容器里，删除原节点，拖拽完成。目标容器可以通过拖动对象时鼠标的位置和容器的坐标对比来判断.

vue3.0和2.0的区别

更快

virtual DOM 完全重写，mounting & patching 提速 100%；
更多编译时（compile-time）提醒以减少 runtime 开销；
基于 Proxy 观察者机制以满足全语言覆盖以及更好的性能；
放弃 Object.defineProperty ，使用更快的原生 Proxy；
组件实例初始化速度提高 100%;
提速一倍/内存使用降低一半；
使用ts 重写源码,

更小

Tree-shaking 更友好；
新的 core runtime：~ 10kb gzipped；

前端面试题目(task ,0510)

XMLHttpRequest发送请求时的流程

TypeScript的泛型和接口的区别

fetch和ajax(xmlHttpRequest)的区别

draggble拖拽的原理、插件的源码

vue3.0和2.0的区别