博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
JavaScript高级程序设计学习笔记--BOM
阅读量:5330 次
发布时间:2019-06-14

本文共 2824 字,大约阅读时间需要 9 分钟。

window对象

BOM的核心对象是window,它表示浏览器的一个实例。在浏览器中,window对象有双重角色,它既是通过JavaScript访问浏览器窗口的一个接口,又是ECMScript规定的Global对象。

全局作用域

由于window对象同时扮演着ECMAScript中Global对象的角色,因此所有在全局作用域中声明的变量、函数都会变成window对象的属性和方法。来看下面的例子:

var age=29;function sayAge(){alert(this.age);}alert(window.age); //29sayAge(); //29window.sayAge(); //29

定义全局变量与在window对象上直接定义属性还有一点差别就是:全局变量不能通过delete操作符删除,而直接在window对象上定义的属性可以,例如:

var age=29;window.color="red";delete window.age' //在IE<9时抛出错误,在其他所有浏览器中都返回falsedelete window.color //在IE<9时抛出错误,在其他所有浏览器中都返回truealert(window.age) ;//29alert(window.color); //undefined

原因是使用var语句添加的window属性有一个名为[[Configurable]]的特性,这个特性的值被设置为false,因此这样定义的属性不可通过delete操作符删除。

另外,还要记住一件事:尝试访问未声明的变更会抛出错误,但是通过查询window对象,可以知道某个可能未声明的变更是否存在,如:

//这里会抛出错误,因为oldValue未定义var newValue=oldValue;//这里不会抛出错误,因为这是一次属性查询//newValue的值是undefinedvar newValue=window.oldValue;

窗口关系及框架

top对象始终指向最高(最外)层的框架,也就是浏览器窗口。与框架有关的最后一个对象是self,它始终指向window;实际上,self和window对象可以互换使用。引入

self对象的目的只是为了与top和parent对象对应起来,因此它不格外包含其它值。

窗口位置

使用下面的代码可以跨浏览器取得窗口左边和上边的位置。

var leftPos=(typeof windwow.screenLeft=="number")?window.screenLeft:window.screenX;var topPos=(typeof windwow.screenTop=="number")?window.screenTop:window.screenY;

使用resizeTo()和resizeBy()方法可以调整浏览器窗口的大小 。

导航和打开窗口

window。open("http://www.wrox.com","topFrame");

如果有一个名叫"topFrame"的窗口或者框架,就会在该窗口或框架加载这个URL;否则,就会创建一个新窗口并将其命名为"topFrame".

在Chrome中,将新创建的标签页的opener属性设置为null,即表示在单独的进程中运行新标签页,如下所示:

var wroxWin=window.open("http://www.wrox.com","wroxWindow","height=400,width=400,top=10,left=10,resizable=yes");wroxWin.opener=null;

将opener属性设置为Null就是告诉浏览器新创建的标签页不需要与打开它的标签页通信,因此可以在独立的进程中运行。

间隙调用和超时调用

JavaScript是一个单线程序的解释器,因此一定时间内只能执行一段代码。为了控制要执行的代码,就有一个JavaScript任务队列。这些任务会按照将它们添加到队列的顺序执行。

setTimout()的第二个参数告诉JavaScript再过多长时间把当前任务添加到队列中。如果队列是空的,那么添加的代码会立即执行;如果队列不是空的,那么它就要等前面的代码
执行完以后再执行。
要取消尚未执行的超时调用计划,可以调用clearTimeout()方法并将相应的超时调用ID作为参数传递给它,如下所示:

//设置超时调用var timeoutId=setTimout(function(){alert("Hello world!");},1000);//注意:把它取消clearTimeout(timeoutId);

间隙调用与超时调用类似,只不过它会按照指定的时间间隔重复执行代码,直至间歇调用被取消或者页面被卸载。设置间歇调用的方法是setInterval().

//不建议传递字符串setInterval("alert('Hello world!')",10000);//推荐的调用方式setInterval(function(){alert("Hello world!");},10000);

虽然这两种调用方式都没有问题,但由于传字符串可能导致性能损失,因此不建议以字符串作为第一个参数。

也可以用clearInterval()方法并传入相应的间隙ID来取消。以下是一个常见的使用间歇调用的例子:

var num=0;var max=10;var intervalId=null;function incrementNumber(){num++;//如果执行次数达到max设定的值,则取消后续尚未执行的调用if(num==max){clearTimeout(intervalId);alert("Done");}}intervalId=setInterval(incrementNumber,500);

这个例子也可以用超时调用来实现,如下:

var num=0;var max=10;function incrementNumber(){num++;//如果执行次数未达到max设定的值,则设置另一次超时调用if(num

一般认为,使用超时调用来模拟间歇调用是一种最佳模式。在开发环境下,很少使用真正的间歇调用,原因是后一个间歇调用可能会在前一个间歇调用结束之前启动。

而像前面示例中那样使用超时调用,则完全可以避免这一点。所以,最好不要使用间歇调用。

更简洁的写法:

setTimeout(function(){ //processing setTimeout(arguments.callee, interval); }, interval);

 

转载于:https://www.cnblogs.com/Gyoung/p/3815782.html

你可能感兴趣的文章
css文本溢出显示省略号
查看>>
git安装和简单配置
查看>>
fat32转ntfs ,Win7系统提示对于目标文件系统文件过大解决教程
查看>>
Awesome Adb——一份超全超详细的 ADB 用法大全
查看>>
shell cat 合并文件,合并数据库sql文件
查看>>
Android 将drawable下的图片转换成bitmap、Drawable
查看>>
介绍Win7 win8 上Java环境的配置
查看>>
Linux设置环境变量的方法
查看>>
构建自己的项目管理方案
查看>>
利用pca分析fmri的生理噪声
查看>>
div水平居中且垂直居中
查看>>
epoll使用具体解释(精髓)
查看>>
AndroidArchitecture
查看>>
安装Endnote X6,但Word插件显示的总是Endnote Web"解决办法
查看>>
python全栈 计算机硬件管理 —— 硬件
查看>>
大数据学习
查看>>
简单工厂模式
查看>>
Delphi7编译的程序自动中Win32.Induc.a病毒的解决办法
查看>>
Objective-C 【关于导入类(@class 和 #import的区别)】
查看>>
倍福TwinCAT(贝福Beckhoff)常见问题(FAQ)-点击运行按钮进入到运行状态报错Error starting TwinCAT System怎么办 AdsWarning1823怎么办...
查看>>