2021-02-07 CTVE校招一面
介绍项目
实习经历
发版流程
1. 点击事件后触发过程
当你在浏览器上点击一个按钮时，点击的事件不仅仅发生在按钮上，同时点击的还有这个按钮的容器元素，甚至也点击了整个页面，所以当点击按钮后，会事件冒泡到上层。
2.原生js实现Ajax
function ajax(url, data) {
const p = new Promise((resolve, reject) => {
const xhr = new XMLHttpRequest();
xhr.open('GET', url, true); //支持异步
xhr.onreadystatechange = function() {
if(xhr.readyState === 4) {
if(xhr.status === 200) {
resolve（JSON.parse(xhr.responseText)）
}
}
}xhr.send(data);
});
return p
}
const url = "/data/test.json"
let data = {
name: ‘小明’
}ajax(url，data).then(res => console.log(res)).catch(err => console.log(err))
3.webpack，loader、plugins
https://zhuanlan.zhihu.com/p/28245984
4. https以及具体安全过程，对称加密和非对称加密
https = ssl(安全套接字) + http
加密方式分为对称加密和非对称加密。
（1）对称加密：使用同一个密钥在性能方面，对称密钥更胜一筹，所以可以使用对称密钥。但是肯定不能在每次通信中都使用同一个对称密钥，因为如果使用同一个密钥，任何人只要与服务端建立通信就能获得这个密钥，也就可以轻松解密其他通信数据了。所以应该是每次通信都要随机生成。
（2）非对称加密：不同的密钥由于不可能保证客户端和服务端同时生成一个相同的随机密钥，所以生成的随机密钥需要被传输，这样的话在传输过程中也会存在被盗取的风险。要解决这个问题还需要通过将密钥加密来进行传输。除了前面提到的对称加密，我们只有非对称加密这个选项了，比如客户端通过公钥来加密，服务端利用私钥来解密。
（3）证书机制具体来说就是把公钥放入一个证书中，该证书包含服务端的信息，比如颁发者、域名、有效期，为了保证证书是可信的，需要由一个可信的第三方来对证书进行签名。这个第三方一般是证书的颁发机构，也称 CA（Certification Authority，认证中心）。证书签名：对证书信息进行MD5计算，获取唯一哈希值，然后利用证书颁发方的私钥加密。校验过程：用证书颁发方的公钥进行解密，计算md5值，将解密后的md5跟计算所得的md5比对。
5. 阻止冒泡
event.stopPropagation() //阻止冒泡
return false; //阻止所有事件
event.preventDefault() //阻止默认事件
6.es6 map、set、reduce
Map:
JavaScript 的对象（Object），本质上是键值对的集合（Hash 结构），但是传统上只能用字符串当作键。这给它的使用带来了很大的限制。为了解决这个问题，ES6 提供了 Map 数据结构。它类似于对象，也是键值对的集合，但是“键”的范围不限于字符串，各种类型的值（包括对象）都可以当作键。也就是说，Object 结构提供了“字符串—值”的对应，Map结构提供了“值—值”的对应，是一种更完善的 Hash 结构实现。如果你需要“键值对”的数据结构，Map 比 Object 更合适
//例var m = new Map([[{a:1}, 1], ["aa", 2]]);console.log(m);
ES6 提供了新的数据结构 Set。它类似于数组，但是成员的值都是唯一的，没有重复的值。
var arr = [1,1,2,2,3,3];var s = new Set(arr);s.size;//3console.log([...s]);//1,2,3; 常用于去重
reduce
reduce() 方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。
array.reduce(function(total, currentValue, currentIndex, arr), initialValue)
total: 初始值
currentValue: 当前元素
currentIndex: 当前元素索引
arr: 数组本身
initialValue: 可选，传递给函数的初始值
7.BFC
BFC（块级格式化上下文，用于清楚浮动，防止margin重叠等）
参考回答：
BFC是一个独立的渲染区域，并且有一定的布局规则。BFC区域不会与float box重叠
BFC是页面上的一个独立容器，子元素不会影响到外面计算BFC的高度时，浮动元素也会参与计算哪些元素会生成BFC：
根元素
float不为none的元素
position为fixed和absolute的元素
display为inline-block、table-cell、table-caption，flex，inline-flex的元素
overflow不为visible的元素
8.闭包，为什么变量不被释放
闭包的理解：
闭包就是能够读取其他函数内部变量的函数，或者子函数在外调用，子函数所在的父函数的作用域不会被释放
闭包的弊端：由于调用后变量不会自动清除，然后就会导致内存泄漏、一些空间的浪费以及性能消耗等问题。
解决方法：将变量指向null,清楚变量
闭包的作用：
1.匿名自执行函数（创建了一个匿名的函数，并立即执行它，由于外部无法引用它内部的变量，因此在函数执行完后会立刻释放资源，关键是不污染全局对象。）
2.结果缓存（变量不会自动释放，结果得到缓存）
3.封装
4.实现类和继承
结合实际案例：
https://blog.csdn.net/u011086209/article/details/88858277
为什么变量不被释放：
闭包内部被引用，JS垃圾回收机制只会释放没有被引用的变量。
9.跨域，为什么用同源策略
跨域，指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对JavaScript施加的安全限制。
同源策略：协议、端口、域名都必须一致!
解决跨域的方法：
jsonp跨域，原理：script标签没有跨域限制的漏洞实现的一种跨域方法，只支持get请求。安全问题会受到威胁。
cors跨域，通过后端服务器实现，Access-Control-Allow-Origin。
postMessage window的一个属性方法。
websocket
nginx反向代理
iframe跨域
为什么浏览器要使用同源策略
设置同源策略的主要目的是为了安全，如果没有同源限制，在浏览器中的cookie等其他数据可以任意读取，不同域下的DOM任意操作，ajax任意请求其他网站的数据，包括隐私数据。
10.jsonp及缺陷
优点
它不像XMLHttpRequest对象实现的Ajax请求那样受到同源策略的限制；它的兼容性更好，在更加古老的浏览器中都可以运行，不需要XMLHttpRequest或ActiveX的支持；并且在请求完毕后可以通过调用callback的方式回传结果。
缺点
它只支持GET请求而不支持POST等其它类型的HTTP请求；它只支持跨域HTTP请求这种情况，不能解决不同域的两个页面之间如何进行JavaScript调用的问题。
jQuery ajax方式以jsonp类型发起跨域请求，其原理跟<script>脚本请求一样，因此使用jsonp时也只能使用GET方式发起跨域请求。跨域请求需要服务端配合，设置callback，才能完成跨域请求。
