Janice_j
前端-bug召唤师
努力生活，遇见美好
获得徽章 0
#每天一个知识点# day19
什么是跨域及解决方法
跨域：
拿当前HTML页面的地址和在页面中AJAX请求的API地址做比较：
如果两个地址的协议域名端口号都相同，相当于HTML页面从同一个源下根据某个地址获取数据，属于“同源策略请求”，基于AJAX是可以直接请求到数据的！
如果三者（协议域名端口号）只要有一个不一样，那么就是“非同源策略请求（跨域请求）”，使用AJAX不能直接获取数据了！
方案：
方案一：JSONP
在客户端AJAX不允许直接的跨域请求，但是很多东西都可以直接的跨域，例如：script、link、img、iframe等（这些标签的SRC或者HREF设置任何一个资源请求地址，哪怕是其它源下的，也都没有跨域的限制，直接可以把内容获取到 [除非服务器做特殊处理了] =>针对这个特点，真实项目中某些JS文件加载的都是CDN地址）
方案二：CORS 跨域资源共享
主要是服务器设置：配置允许跨域的相关头部信息
客户端：
axios.defaults.withCredentials = true;
//=>xhr.withCredentials=true
axios在某些特定场景下，在发送真实请求之前都会发送一个预请求（OPTIONS）格式的，来验证是否允许跨域
弊端：只能指定一个允许源（不能用通配符和指定多个源），所以目前真实项目中基于CORS实现跨域资源共享是主流方案
方案三：WEBPACK代理（webpack proxy）
1. 安装webpack-dev-server
2. 配置代理：
在CREATE-REACT-APP脚手架中，我们只需要在package.json中设置porxy代理属性，属性值是目标服务器的地址；在客户端发送请求的时候，请求的接口先保证是同源，如果当前源下没有这个接口，没关系，基于dev-server使用webscoket已经把目标代理服务器上的对应接口数据获取到了，所以直接请求同源下没有的接口，也可以获取数据!
方案四：ngnix反向代理
方案五：node作为中间件代理
什么是跨域及解决方法
跨域：
拿当前HTML页面的地址和在页面中AJAX请求的API地址做比较：
如果两个地址的协议域名端口号都相同，相当于HTML页面从同一个源下根据某个地址获取数据，属于“同源策略请求”，基于AJAX是可以直接请求到数据的！
如果三者（协议域名端口号）只要有一个不一样，那么就是“非同源策略请求（跨域请求）”，使用AJAX不能直接获取数据了！
方案：
方案一：JSONP
在客户端AJAX不允许直接的跨域请求，但是很多东西都可以直接的跨域，例如：script、link、img、iframe等（这些标签的SRC或者HREF设置任何一个资源请求地址，哪怕是其它源下的，也都没有跨域的限制，直接可以把内容获取到 [除非服务器做特殊处理了] =>针对这个特点，真实项目中某些JS文件加载的都是CDN地址）
方案二：CORS 跨域资源共享
主要是服务器设置：配置允许跨域的相关头部信息
客户端：
axios.defaults.withCredentials = true;
//=>xhr.withCredentials=true
axios在某些特定场景下，在发送真实请求之前都会发送一个预请求（OPTIONS）格式的，来验证是否允许跨域
弊端：只能指定一个允许源（不能用通配符和指定多个源），所以目前真实项目中基于CORS实现跨域资源共享是主流方案
方案三：WEBPACK代理（webpack proxy）
1. 安装webpack-dev-server
2. 配置代理：
在CREATE-REACT-APP脚手架中，我们只需要在package.json中设置porxy代理属性，属性值是目标服务器的地址；在客户端发送请求的时候，请求的接口先保证是同源，如果当前源下没有这个接口，没关系，基于dev-server使用webscoket已经把目标代理服务器上的对应接口数据获取到了，所以直接请求同源下没有的接口，也可以获取数据!
方案四：ngnix反向代理
方案五：node作为中间件代理
展开
评论
点赞
#每天一个知识点# day17
js中call、apply、bind的区别
都是用来改变某一个函数中THIS关键字指向的
用法：
call
[fn].call([this],[param]...)
fn.call：当前实例(函数FN)通过原型链的查找机制，找到Function.prototype上的call方法 =>function call(){[native code]}
fn.call()：把找到的call方法执行
当call方法执行的时候，内部处理机制
1.首先把要操作函数中的THIS关键字变为CALL方法第一个传递的实参值
2.把CALL方法第二个及第二个以后的实参获取到
3.把要操作的函数执行，并且把第二个以后的传递进来的实参传给函数
apply
和call基本上一模一样，唯一区别在于传参方式
fn.call(obj,10,20)
fn.apply(obj,[10,20]) APPLY把需要传递给FN的参数放到一个数组（或者类数组）中传递进去，虽然写的是一个数组，但是也相当于给FN一个个的传递
bind
语法和call一模一样，唯一的区别在于立即执行还是等待执行
fn.call(obj,10,20) 改变FN中的THIS,并且把FN立即执行
fn.bind(obj,10,20) 改变FN中的THIS,此时的FN并没有执行（不兼容IE6~8）
js中call、apply、bind的区别
都是用来改变某一个函数中THIS关键字指向的
用法：
call
[fn].call([this],[param]...)
fn.call：当前实例(函数FN)通过原型链的查找机制，找到Function.prototype上的call方法 =>function call(){[native code]}
fn.call()：把找到的call方法执行
当call方法执行的时候，内部处理机制
1.首先把要操作函数中的THIS关键字变为CALL方法第一个传递的实参值
2.把CALL方法第二个及第二个以后的实参获取到
3.把要操作的函数执行，并且把第二个以后的传递进来的实参传给函数
apply
和call基本上一模一样，唯一区别在于传参方式
fn.call(obj,10,20)
fn.apply(obj,[10,20]) APPLY把需要传递给FN的参数放到一个数组（或者类数组）中传递进去，虽然写的是一个数组，但是也相当于给FN一个个的传递
bind
语法和call一模一样，唯一的区别在于立即执行还是等待执行
fn.call(obj,10,20) 改变FN中的THIS,并且把FN立即执行
fn.bind(obj,10,20) 改变FN中的THIS,此时的FN并没有执行（不兼容IE6~8）
展开
评论
点赞
#每天一个知识点# day14
Vue中Computed和Watch的区别
computed：计算属性，基于data中或props 中的数据计算出一个新的值，如果基于的数据改变，会重新计算。
watch：监听数据的变化，并可执行一些逻辑操作。
区别
computed：
1、初始化时就调用；
2、在 computed 属性对象中定义计算属性的方法，用法和操作data中的数据一样
3、如果属性值是get和set函数，当数据变化时，调用 set 方法。get 方法必须要有一个返回值，函数的返回值就是属性的属性值
4、有缓存机制，即使重复调用，只要依赖数据不变，会取缓存中的计算结果，只有依赖的数据改变才会重新计算
watch:
1、主要用来监听某些特定数据的变化，从而进行某些具体的业务逻辑操作，可以看作是 computed 和 methods 的结合体
2、可以监听的数据来源：data，props，computed内的数据
3、支持异步
4、不支持缓存，只要监听的数据改变，就会触发相应的操作
Vue中Computed和Watch的区别
computed：计算属性，基于data中或props 中的数据计算出一个新的值，如果基于的数据改变，会重新计算。
watch：监听数据的变化，并可执行一些逻辑操作。
区别
computed：
1、初始化时就调用；
2、在 computed 属性对象中定义计算属性的方法，用法和操作data中的数据一样
3、如果属性值是get和set函数，当数据变化时，调用 set 方法。get 方法必须要有一个返回值，函数的返回值就是属性的属性值
4、有缓存机制，即使重复调用，只要依赖数据不变，会取缓存中的计算结果，只有依赖的数据改变才会重新计算
watch:
1、主要用来监听某些特定数据的变化，从而进行某些具体的业务逻辑操作，可以看作是 computed 和 methods 的结合体
2、可以监听的数据来源：data，props，computed内的数据
3、支持异步
4、不支持缓存，只要监听的数据改变，就会触发相应的操作
展开
评论
1
#每天一个知识点# day13
常用的js动态操作DOM的方法
1、document.createElement：创建元素节点
2、document.createDocumentFragment：创建空的 DocumentFragment 对象，并返回此对象。
3、elment.appendChild：为元素添加一个新的子元素
4、elemet.insertBefore：现有的子元素之前插入一个新的子元素
5、element.cloneNode(true/false):克隆某个元素(深拷贝/浅拷贝)
6、elemnt.removeChild： 删除一个子元素
7、element.set/get/removeAttribute：设置或者改变指定属性节点。
常用的js动态操作DOM的方法
1、document.createElement：创建元素节点
2、document.createDocumentFragment：创建空的 DocumentFragment 对象，并返回此对象。
3、elment.appendChild：为元素添加一个新的子元素
4、elemet.insertBefore：现有的子元素之前插入一个新的子元素
5、element.cloneNode(true/false):克隆某个元素(深拷贝/浅拷贝)
6、elemnt.removeChild： 删除一个子元素
7、element.set/get/removeAttribute：设置或者改变指定属性节点。
展开
评论
点赞
#每天一个知识点# js获取元素或者元素集合的方法
1.document.getElementById
1)上下文只能是document（只有document这个实例的原型链上才能找到这个方法，其它实例都找不到）
2)ID重复了获取第一个
3)IE6~7中会把表单元素的name当做id使用
2.document.getElementsByTagName
1)获取当前上下文中，所有子子孙孙中标签名叫做XXX的元素
3.document.getElementsByClassName
1)IE6~8中不兼容
4.document.getElementsByName
1)在IE浏览器中只对表单元素的name起作用
2)上下文也只能是document
5.document.querySelector
6.document.querySelectorAll
1)不兼容IE6~8
2)没有DOM映射
7.document.documentElement
8.document.body
9.document.head
1.document.getElementById
1)上下文只能是document（只有document这个实例的原型链上才能找到这个方法，其它实例都找不到）
2)ID重复了获取第一个
3)IE6~7中会把表单元素的name当做id使用
2.document.getElementsByTagName
1)获取当前上下文中，所有子子孙孙中标签名叫做XXX的元素
3.document.getElementsByClassName
1)IE6~8中不兼容
4.document.getElementsByName
1)在IE浏览器中只对表单元素的name起作用
2)上下文也只能是document
5.document.querySelector
6.document.querySelectorAll
1)不兼容IE6~8
2)没有DOM映射
7.document.documentElement
8.document.body
9.document.head
展开
评论
点赞
![[尴尬]](http://lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_11.8824107.png)
![[困]](http://lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_24.6e6570b.png)