专题复习八、闭包及js跨域
2017-08-20 本文已影响22人
田田kyle
- 何为闭包
闭包解决的是函数外部访问函数内部变量的问题，举例说明：
function xxx (){
var user = {
name:'frank',
age:20}
}
假设现在想访问函数内部user的相关数据，怎么办？有两种实现方法：
①绑定全局变量上
function xxx (){
var user = {
name:'frank',
age:20
}
window.usergetter ={
namegetter:function(){
return user.name
},
agegetter:function(){
return user.age
},
old:function(){
user.age+=1
}
}
}
（window.usergetter是可以访问到function xxx的变量的，绑定到全局变量中，这样其他函数也可以访问了。如下面的yyy函数。在这里window.usergetter就叫做闭包，它是沟通外部与内部的桥梁）
function yyy(){
window.usergetter.namegetter()
window.usergetter.agegetter()
}
②不使用全局变量
function xxx (){
var user={
name:'frank'
age:20
}
return function (){
user.age +=1
}(精华之笔，意味着xxx的返回值是一个函数且这个函数里有xxx里面的变量)
}
如何拿到变量
var fn = xxx() fn.call() - 跨域
跨域就是指一个域名的网页去请求另一个域名的资源。只要协议、域名、端口有任何一个不同就当做是跨域。浏览器一般不对script、img等进行跨域限制，所以我们有机会通过script实现跨域访问
跨域一般有一下方法：
1、jsonp
假设现在服务器代码如下：
case 'main.js':
var number = query.data（拿到查询参数）
response.end('alert('+number+')')
我们访问路径：main.js?data=1
控制台打出：alert（1）zh
现在假设我们不改后面改前面，代码如下：
case 'main.js':
var functionName = query.callback（拿到查询参数）
response.end('functionName'+'(1)')
我们访问路径：main.js?callback=xxx
控制台打出：xxx（1）,这就是jsonp，就是你callback后面值是什么，我函数名就是什么
那怎么利用jsonp实现跨域访问呢。假设现在'(1)'变成重要的信息，例如：‘我的密码是yyy’
现在我一个域名想要获取你的main.js文件
服务器代码：
swich(path){
case 'index.html'
response.end('<script src="http://localhost:8888/main.js?callback=ccc"></script>)
break;
}
打开这个域名下的index.html，发现它请求了http://localhost:8888/main.js?callback=ccc路径下的文件，且在控制台打出ccc(‘我的密码是yyy’).这样的话，我们就拿到了另一个js的数据，我们只需要重新定义ccc函数就可以实现将相关信息输入到页面中。如：function ccc(x){document.write(x)}.
ccc可以自己定义，这样就是二者的桥梁。jsonp就是动态js（callback约定），把数据放到callback里面
2、document.domain
使用条件：①有其他页面window对象引用 ②二级域名相同 ③协议相同 ④端口相同
例如：http://wenku.baidu.con http://zhidao.baidu.com（二级域名都是baidu.com）
原理：把二者的document.domain都设置为同一个值，表明他们需要协作，例如本例中可以都设置为baidu.com，这样用一个页面的window对象操作另一个页面了
上述方法不常用，最常用的是把其中一个页面通过iframe嵌套在另一个页面中，设置二者的document.domain相同，这样这个页面就对iframe有掌控权了
3、window.name
原理：打开一个页面设置其window.name，页面跳转后，新页面的window.name不会发生改变，利用这个原理，在window.name存一些想要的数据，通过iframe交互。例：
var iframe =document.getElementById('iframe');
var data='';
iframe.onload = function(){
data = iframe.contentwindow.name;（获取name里的内容）
iframe.src='about:blank';（跳转空页面，保证同源）
}
4、[HTML5]postMessage
参考链接：postMessage
5、CORS
浏览器一旦发现ajax请求是跨源，就会自动添加一些附加的头信息，用来与服务器判别交互。实现CORS，关键是服务器，只要服务器实现CORS接口，就可以跨源通信
跨源通信一般分为简单请求和费简单请求，区别在于请求方法（head、get、post）及头信息的限制，非简单请求会比简单请求多一个预检请求流程
Origin(浏览器，源) Access-Content-Allow-Origin（服务器：响应）
与jsonp比较更强大，因为jsonp只支持get请求，而CORS支持所有类型的请求，但是CORS会存在安全问题
参考链接:CORS
