答题技巧:
- 如果是英文词汇就先翻译成中文
- 一句话描述该技术的用途
- 描述该技术的核心概念或运作流程
- 口述该技术的代码书写思路
- 该技术的优点
- 该技术的缺点
- 如何弥补缺点
AJAX原理
- ajax 就是异步的js和xml的缩写,目前一般用JSON代替XML
- ajax 主要用于在不刷新页面的情况下向浏览器发起请求并接受响应,最后局部更新也买你
- 该技术最核心的概念是XMLHttpRequest对象,该对象可发起HTTP请求,我们可以监听其readystate的变化获得响应
- 具体代码
- 优点:无刷新请求
- 缺点:被浏览器限制不能跨域
- 解决跨域 可以使用JSONP或CROS
JSONP原理
- JSONP是json with padding的缩写
- 该技术通过script标签不受同源策略限制来达到跨域的目的
- 该技术核心是前端构造script发起get请求,后端将数据放到js回调里,前端接受响应后执行回调拿到的数据
- 具体代码
- 优点: 通过简单的约定就能跨域
- 缺点: 不支持get以外的动词,而且存在csrf风险
- 解决办法: CORS 或 csrf token
CORS原理
- CORS是跨域资源共享的缩写
- 该技术通过在目标域名返回CORS响应头来达到获取该域名数据的目的
- 该技术核心是设置response header 分为简单请求和复杂请求两种
- 简单请求只需要设置 Access-Control-Allow-Origin:目标源即可,复杂请求则分两步走,第一步是浏览器发起OPTIONS请求,第二步是真实请求。OPTIONS请求需要把服务器支持的操作通过响应头来表明,如Access-Control-Allow-Methods:POST,GET,OPTIONS,另外一个重要的响应头是Access-Control-Allow-Credentials:true用来表明是否接受请求中的Cookie
- 优点:简单的配置实现跨域
- 缺点: 老浏览器不支持CORS或不支持Credentials
- JSONP 或后台转发彻底解决跨域问题
PROMISE原理
CSS 盒模型
XSS
- XSS是英文Cross-Site Scripting缩写 跨站脚本
- 恶意用户A提交恶意内容,现在在另一个用户B的网页上,对B网页的内容随意篡改
- 解决 a.后台模板问题,后台输出时将符号<变成<(Html实体)b.前端代码问题
单例模式
串行,并行
深浅拷贝
针对对象,深拷贝和浅拷贝只针对对象Object和Array这样的复杂对象,String,Number等简单类型不存在深拷贝
浅拷贝:
因为浅拷贝指挥将对象的各个属性进行复制,并不会进行递归复制。在JS中,对于Object和Array这类引用类型的值,当从一个变量向另一个变量复制引用时,这个值的副本其实是一个指针,两个变量指向同一个对象,改变其中一个变量,另一个也会受到影响。
深拷贝:
和浅拷贝不同,深拷贝不仅将对象的各个属性都复制出去,而且将原对象各个属性所包含的对象也依次采用深拷贝的方法递归复制到新对象上。这样就不会存在新对象和旧对象的属性指向同一个对象的问题。
JSON.stringfy进行深拷贝的弊端
- 如果对象的属性中有时间对象,则JSON.stringify后再JSON.parse的结果,时间将只是字符串的形式,而不是对象的形式
- 如果对象里面有RegExp、Error对象,则序列化的结果将只得到空对象
- 如果对象里面有函数,undefined,则序列化的结果将会把函数,undefined丢失
- 如果对象里面有NaN、Infinity和-Infinity,则序列化的结果会变成null
- JSON.stringfy()只能序列化对象的可枚举的自由属性,如果对象是由构造函数生成的,则使用JSON.parse(JSON.stringfy(obj))深拷贝后,会丢弃对象的constructor
- 如果对象中存在循环引用的情况也无法正确实现深拷贝 其他的一些用法
- 判断对象是否相等 JSON.stringify(a) === JSON.stringify(b)
- 让localStroage/sessionStorage可以存储对象 localStorng/sessionStorage默认只能存储字符串使用JSON.stringify()将对象转为字符串进行存储,取出的时候只需要parse下就可以了 JSON.stringify和toStirng两者虽然都可以将目标转为字符串,但本质上还是有区别的,
let arr = [1,2,3]
JSON.stringify(arr) // '[1,2,3]'
arr.toString() // '1,2,3'