微信号:fed-talk

介绍:公众号开通于2016年,内容起于前端而不止于前端.

前端开发基础-JavaScript(三)

2016-07-17 22:44 icepy


继承

谈到面向对象,那么就不能不谈谈继承的问题了,而在Js中主要是将原型作为实现继承的主要思路。

var Computer = function(name){    //this.name = name;}Computer.prototype.show = function(){    alert('computer')
}var Apple = function(){

}Apple.prototype = new Computer();Apple.prototype.hide = function(){}Apple.prototype.show = function(){    alert('apple')
}var apple = new Apple();apple.show();alert(apple instanceof Computer);

使用这样的方式,实际上是从Computer的实例中先借它的prototype中所有的方法,但是这里会存在几个问题。

  • 如果Computer中需要传入参数,比如name,借的时候我根本不知道要传入什么参数。

  • 在Apple中如果要继续给原型添加方法,那么就不能使用字面量的形式了,它会覆盖掉

  • 如果要重写父类中的方法必须要在借prototype之后

  • 那么如何确定原型和实例的关系?貌似用instanceof和isPrototypeOf都会返回true

解决问题一如何传入参数

我们知道Js中有两个方法可以改变函数的上下文,apply和call,实际上类就是函数,这里既借属性也借prototype,不就可以解决这样的问题了么。

var Computer = function(name){    //this.name = name;}Computer.prototype.show = function(){    alert('computer')
}var Apple = function(name){    Computer.call(this,name);
}Apple.prototype = new Computer();var apple = new Apple('apple');alert(apple instanceof Apple);alert(apple instanceof Computer);

在运行时先借prototype,然后再借子类的this,但是这个也有个问题,那就是会调用两次父类。

继承的技巧

还有一种继承是生成一个临时对象,然后临时对象借需要继承的父类的prototype。

var extend = function(o){    var F = function(){}    F.prototype = o;    return new F();
}var parent = {    'name':['lcepy']
}var game = extend(parent);game.name.push('wow');var _game = extend(parent);_game.name.push('view');

使用这样的方式有个很大的缺陷,那就是不要借属性之类的数据,因为它们是共享的,这是一个浅拷贝,还是因为指针的原因。不过要是继承方法,这种方式很方便。

还有一种方式跟上述类似,主要是封装了一层函数,用来返回对象。

寄生组合继承

这样的方式主要解决的问题是调用两次父类的问题,避免额外的借来的属性或方法。想想看第一次Computer.call(this),借来了this上的属性或方法,第二次Apple.prototype = new Computer(),又借来了this上的属性或方法,这里的初衷是想借原型,没办法这个是实例,所以该借的不该借的都借来了。那么要避免这样的问题,就要解决继承属性的继承属性,继承原型的继承原型,也不乱借。

var extendPrototype = function(sub,supers){    var F = function(){}    F.prototype = supers.prototype;    var _f = new F();    _f.constructor = sub;    sub.prototype = _f;
}var Computer = function(name){    this.name = name;
}Computer.prototype.show = function(){    alert(this.name);
}       
var Apple = function(name){    Computer.call(this,name);
}extendPrototype(Apple,Computer);            
var apple = new Apple('apple');apple.show();

第一步把supers的原型赋值给F,第二步创建F的实例,第三步把_f实例的constructor属性修改成子类,第四步把_f实例赋值给子类的prototype。

这样的话就是不该借的也不会继承了

理解内存管理

一般来说内存管理主要有这么几种方式,引用计数和标记,而JavaScript采用的就是标记管理的方式。Js的内存管理是自动的,但是并不是说执行完后立马销毁,而是有时间周期性,相隔一段时间执行一下垃圾回收,把没有引用的内存全部销毁。

OC中采用的是引用计数来手动管理内存,这样的方式比较好,可以让开发者自己来管理。当然也有不好的地方,如果遗忘了释放,很可能引起应用的崩溃。

总体来看在IE中因为COM组件的原因,可能会发生循环引用的问题,这个问题在引用计数的内存管理都会遇见。所谓的循环引用是指在对象A中包含了一个指向B的指针,然后再对象B中包含一个指向A的指针,于是悲剧了。

var element = document.getElementById('doc');var my = {};my.element = element;element.my = my;

大家都引用,于是,可想而知。要避免这种问题,一定要在不使用的时候my.element = null,把它断开。

那么,其他浏览器呢?还是标记清理的机制,比如一个函数的变量,在进入环境时标记上“进入环境”,执行完之后标记上“离开环境”,然后等待系统来释放。

IE有一个手动释放的方法,window.CollectGarbage,调用它就立马释放已经标记离开环境的变量,不过很多文章都不建议这样做。

那么一般都这样做,引用类型的释放

var my = {};
//使用完毕之后
my = null;

让my脱离执行环境,标记上已经离开环境,然后等待系统执行垃圾回收,释放内存。

XMLHttpRequest

注明: IE8已上,支持现代XMLHttpRequest

客户端Js与服务器进行网络交互必备的一个玩意,它不支持跨域,若要跨域还需要进行一些额外的处理。

var xhr = new XMLHttpRequest();

在使用xhr对象时,要调用的第一个方法是open(),它接受三个参数[发送请求的类型,请求的URL,描述是否同步还是异步的布尔值]false同步,true异步。

关于Ajax同步异步的个人理解:

  • 同步,是用数据块的方式来传输的,在Js执行的表现上,当执行到这个Ajax请求时会等待它与服务器交互成功之后才能执行下面一行的代码,也就是阻塞。

  • 异步,是用字节来传输的,它不等待是否成功,会执行之后的代码

结束时需要调用xhr.send(),如果没有发送数据的主体,必须要null,做为发送参数。另外在接收到响应之前还可以调用abort()来取消异步请求(不建议调用它)

HTTP状态验证

当收到响应后会自动填充xhr对象,它有几个比较重要的状态,我们必须要了解清楚与处理。

  • responseText:作为响应主体返回的文本

  • responseXML:如果响应内容的类型是"text/xml"或者"application/xml",这个属性中保存的就是XML的DOM文档

  • status:响应的HTTP状态

  • statusText:HTTP状态的说明

  • readyState:用于描述请求发送到完成的过程

正常情况下需要检测status === 200 readyState === 4 这就表示responseText或者responseXML中已经填充了全部的数据可以提供给客户端使用了。

1 开头的用于描述请求已经发送,需要请求者继续操作才能继续的状态
2 开头的用于描述请求已经成功
3 开头的用于描述成功,但是还需要继续操作
4 开头的用于描述客户端发送了什么数据导致服务器错误
5 开头的用于描述服务器错误(常见的如,服务端代码抛错了)

readyState状态

0 未初始化,还没有调用open方法
1 已经调用open方法,还没有调用send方法
2 已经调用send方法,但是还没有接收到响应
3 已经接收了部分数据
4 已经接收了全部的数据

xhr对象其他方法或事件

每一个请求和响应都会带有相应的HTTP头信息,其中对开发者是很有用的,而xhr对象提供了一个setRequestHeader方法来设置头信息,它必须在调用open方法之后并且在send方法之前。

既然有设置,那么必须得有获取,xhr对象也提供了两个方法分别来获取,getResponseHeader传入一个头部字段名来获取,getAllResponseHeaders来获取全部的头信息。

而接收数据则需要处理onreadystatechange事件,每次刷新状态时,系统都会重新调用此事件。

跨域

客户端Js出于安全的考虑,不允许跨域调用其他页面的对象,正是因为这样才给Ajax带来了很多不方便的地方。跨域最简单的理解就是因为Js同源策略的存在,比如a.com域名下的Js不能访问b.com下的Js对象。

  • 协议端口没法跨,客户端

  • 在跨域上,域仅仅是通过首部来识别,window.location.protocol +window.location.host

利用document.domain和iframe来设置

对于主域相同而子域名不同的情况,可以通过document.domain来处理,比如www.163.com/index.html和wow.163.com/wower.html,在这两个文件中分别加入document.domain = "163.com",然后在index.html页面中创建一个iframe引入wower.html,获取iframe的contentDocument,这样这两个js就可以交互了。

index.html

document.domain = '163.com';var iframe = document.createElement('iframe');iframe.src = 'http://wow.163.com/wower.html';iframe.style.display = 'none'; 
document.body.appendChild(iframe);iframe.onload = function(){    var doc = iframe.contentDocument || iframe.contentWindow.document;    //现在可以通过doc来操作wower.html中的js对象了}

wower.html

document.domain = '163.com';

使用这样的方式来实现的跨域是有限制的

  • 主域名必须是同一个

  • 安全性引发的问题,比如第一个页面出现了安全问题,在后面的页面也会出现

  • iframe引用过多的话,每一个iframe都必须设置document.domain,比较琐碎

偶尔可以使用一下

利用window.name

稍微有些绕,但是数据量比较大,也比较安全

  • wow.163.com/app.html 应用所在的页面

  • wow.163.com/empty.html 中间代理页面,搞个空的即可,但是必须在主域名下

  • www.qq.com/data.html 需要交互的数据页面

在data.html页面中

window.name = 123;

app.html页面中创建一个隐藏的iframe,它的scr指向data.html,在onload事件中,把当前iframe的contentWindow.loaction修改成empty.html,当再次onload时就可以通过contentWindow.name来获取到123了。

偶尔使用

利用iframe和location.hash

利用这种方式,说实话(不建议),比较绕,而且数据量小,直接暴露在URL上。它的原理主要是这样的,假设wow.163.com/index.html页面,wow.163.com/empty.html(空的,什么内容都没有),需要交换数据的页面在www.qq.com/a.html上。

在wow.163.com/index.html#(#号就是我们要传递的数据),创建一个隐藏的iframe,hash值可以当参数传递给www.qq.com/a.html#(),在www.qq.com/a.html中可以获取到hash值,根据它进行处理,然后在www.qq.com/a.html页面中创建一个隐藏iframe,把处理的结果当hash值进行传递,给wow.163.com/empty.html#()这样,在同一个域名下,wow.163.com/empty.html中的js可以通过parent.parent.location.hash = self.location.hash来改变hash值,这样就达到了跨域的目的。

不建议使用,坑爹的思路

JSONP

这种方式是目前开发时最常用的一种方式,利用动态创建script标签来实现跨域的目的,虽然浏览器有显示Js对象的访问,但是它没有限制Js文件的加载,任何域名下的Js文件都可以加载。

对客户端而言,文件的加载其实就是发送一次GET请求,在服务端实现时,也就是处理这次的GET请求,并且响应,参数可以通过?来带走,俗称一波流。

在客户端上对于script文件加载是否已经完毕的判断,IE是判断script标签的readystatechange属性,而其他浏览器是onload事件。

突然感觉做移动端不考虑IE的兼容,果然是杠杠的,建议使用

HTML5 postMessage

主要是利用window.postMessage来发送消息,监听window.message来获取消息,判断origin可以判断消息来源,data获取消息内容,soucre来引用发送方的window对象引用。

www.b.com/b.html发送消息给www.a.com/a.html

window.postMessage('hello','www.a.com/a.html')

www.a.com/a.html获取消息

window.addEventLister('message',function(event){
    if(event.origin === 'http://b.com'){
        //处理
    }
})

iframe的发送方式

contentWindow.postMessage('data','b.com')

话不多说,移动端这种跨域方式也很常用(建议推荐使用)

HTML5 跨域头 XMLHttpRequest2

如果是自己产品,又是做移动端可以使用,比上述任何方式都要方便,需要服务端支持响应时也要设置跨域头。

如果服务器响应此头,浏览器会检查此头,它的值表示请求内容所允许的域名,也就是如果是*号,表示所有域都可以访问,如果这里是a.com,表示除了同源外,只允许来自a.com域的访问。

Access-Control-Allow-Origin:*

如果需要读取cookie则需要设置它

Access-Control-Allow-Credentials:true

设置允许跨域的请求类型

Access-Control-Allow-Methods:POST

兼容性问题,某些版本的浏览器需要在open之后,设置xhr.withCredentials = true;话不多说,建议推荐使用

早读课提醒

言归正传我们在微信群中推出了《早读课》,每日分享一篇我们认真精选的文章(不限于前端开发类),其目的是帮助开发者来学习有价值的东西。想加微信群的朋友,直接添加我的微信号:icepy_1988,审核之后会邀请你入群。想加QQ群的朋友,可以直接添加:418898836,答对问题即可入群。

关注我们

更多精彩内容可关注微信公众号:搜索 fed-talk ,来关注我们吧,也欢迎你将它分享给自己的朋友。


 
前端Talk 更多文章 前端开发基础-JavaScript(四) 白云深处有人家-《课多周刊》邮件订阅服务上线啦 什么鬼,又不知道怎么命名class了 给你的Node.js项目部署HTTPS 正在暑假中的《课多周刊》(第1期)
猜您喜欢 删除配置文件解决OS X各种WiFi无法连接的顽固问题 【BDTC先睹为快】Spark首席架构师辛湜:谈项目现状与Roadmap 新手学 appium-合集第一季度 【干货】机器学习常见算法分类汇总 DevOps概念多也不怕,读懂这张图就够了