javascript中BOM的window对象的方法

BOM也叫浏览器对象模型，它提供了很多对象，用于访问浏览器的功能。BOM缺少规范，每个浏览器提供商又按照自己想法去扩展它，那么浏览器共有对象就成了事实的标准。所以，BOM本身是没有标准的或者还没有哪个组织去标准它。

window对象：BOM的核心对象是window，它表示浏览器的一个实例。window对象处于JavaScript结构的最顶层，对于每个打开的窗口，系统都会自动为其定义 window 对象。

Window 对象方法

相关链接：javascript中BOM的window对象的属性

一、系统对话框

1、alert('Lee');//直接弹出警告

2、if (confirm('请确定或者取消')) {alert('您按了确定!');} else {alert('您按了取消!');}

onfirm本身有返回值，onfirm参数为提示文本，按确定返回true，按取消返回false

3、var num = prompt('请输入一个数字', 0);

两个参数，一个文字提示，一个是默认值(可省略)，当用户在输入框输入一个值时获取该值并赋值给该变量，可在后面调用

二、新建窗口

使用window.open()方法可以导航到一个特定的URL，也可以打开一个新的浏览器窗口。

它可以接受四个参数：1.要加载的URL;2.窗口的名称或窗口目标;3.一个特性字符串;4.一个表示新页面是否取代浏览器记录中当前加载页面的布尔值。

open('http://www.baidu.com'); //新建页面并打开百度
open('http://www.baidu.com','baidu'); //新建页面并命名窗口并打开百度
open('http://www.baidu.com','_parent'); //在当前窗口或父窗口打开百度,_parent是新建一个目标使得文档载入父窗口或者包含超链接引用的框架的框架集。如果这个引用是在窗口或者在顶级框架中，那么它与目标 self 等效。

不命名会每次打开新窗口，命名的第一次打开新窗口，之后在这个窗口中加载。窗口目标是提供页面的打开的方式，比如本页面，还是新建。

第三字符串参数

width：一个数值，新窗口的宽度。不能小于100
height：一个数值，新窗口的高度。不能小于100
top：一个数值，新窗口的Y坐标。不能是负值
left：一个数值，新窗口的X坐标。不能是负值
location：yes或no，是否在浏览器窗口中显示地址栏。不同浏览器默认值不同
menubar：yes或no，是否在浏览器窗口显示菜单栏。默认为no
resizable：yes或no，是否可以通过拖动浏览器窗口的边框改变大小。默认为no
scrollbars：yes或no，如果内容在页面中显示不下，是否允许滚动。默认为no
status：yes或no，是否在浏览器窗口中显示状态栏。默认为no
toolbar：yes或no，是否在浏览器窗口中显示工具栏。默认为no
fullscreen：yes或no，浏览器窗口是否最大化，仅限IE
    open('http://www.baidu.com','baidu','width=400,height=400,top=200,left=200,toolbar=yes');

open本身返回弹出窗口的window对象

var box = open(); box.alert('');//可以指定弹出的窗口执行alert();

三、间歇调用和超时调用

JavaScript是单线程语言，但它允许通过设置超时值和间歇时间值来调度代码在特定的时刻执行。前者在指定的时间过后执行代码，而后者则是每隔指定的时间就执行一次代码。

超时调用需要使用window对象的setTimeout()方法，它接受多个参数：前两个参数表示要执行的代码和毫秒数的超时时间。之后的参数会作为参数传入要运行的函数

setTimeout("alert('Lee')", 1000);

function box() {alert('Lee');}
setTimeout(box, 1000);

setTimeout(function () {alert('Lee');}, 1000);

调用setTimeout()之后，该方法会返回一个ID，表示超时调用。这个超时调用的ID是计划执行代码的唯一标识符，可以通过它来取消超时调用。

要取消尚未执行的超时调用计划，可以调用clearTimeout()方法并将相应的超时调用ID作为参数传递给它。

var box = setTimeout(function () {alert('Lee');}, 1000);
clearTimeout(box); //把ID传入，取消超时调用

间歇调用与超时调用类似，只不过它会按照指定的时间间隔重复执行代码，直至间歇调用被取消或者页面被卸载

设置间歇调用的方法是setInterval()，它接受的参数与setTimeout()相同：要执行的代码和每次执行之前需要等待的毫秒数。

setInterval(function () {alert('Lee');}, 1000);//重复不停执行

取消间歇调用方法和取消超时调用类似，使用clearInterval()方法。但取消间歇调用的重要性要远远高于取消超时调用，因为在不加干涉的情况下，间歇调用将会一直执行到页面关闭。

var box = setInterval(function () {alert('Lee');}, 1000);
clearInterval(box); //取消间歇调用

但上面的代码是没有意义的，我们需要一个能设置5秒的定时器，需要如下代码：

var num = 0; //设置起始秒
var max = 5; //设置最终秒
setInterval(function () { //间歇调用
    num++; //递增num
    if (num == max) { //如果得到5秒
        clearInterval(this); //取消间歇调用，this表示方法本身
        alert('5秒后弹窗!');
    }
}, 1000); //每1秒num递增一次

一般认为，使用超时调用来模拟间歇调用是一种最佳模式。在开发环境下，很少使用真正的间歇调用，因为需要根据情况来取消ID，并且可能造成同步的一些问题，我们建议不使用间歇调用，而去使用超时调用。

var num = 0;
var max = 5;
function box() {
    num++;
    if (num == max) {
        alert('5秒后结束!');
    } else {
        setTimeout(box, 1000);
    }
}
setTimeout(box, 1000); //执行定时器

在使用超时调用时，没必要跟踪超时调用ID，因为每次执行代码之后，如果不再设置另一次超时调用，调用就会自行停止

四、调整浏览器的位置和窗口大小

1、调整浏览器位置

moveTo(0,0); //IE有效，移动到0,0坐标

moveBy(10,10); //IE有效，向下和右分别移动10像素

2、调整浏览器大小

resizeTo(200,200); //IE有效，调正大小

resizeBy(200,200); //IE有效，扩展收缩大小

由于此类方法被浏览器禁用较多，用处不大。

五、requestAnimationFrame(func)方法

在一些动画操作时，由于浏览器的帧数时60帧，即每秒绘制60个画面

那么在制作动画时如果在一帧的时间内运行了多次那么也只会绘制一帧，就造成了性能浪费(空帧)

但是如果在一帧的时间一次都没有运行，就会造成画面卡顿(跳帧)，如何保证每帧画面都有一个新的计算但是每帧仅计算一次呢？

可能你会想到使用setInterval()函数，将时间间隔设为1000/60，在之前，我们也确实是通过该方法绘制动画效果的

但是这里的1000/60真的会按照我们的预期每帧运行一次吗？答案是不一定

首先计算机计算浮点数会有部分精度损失，其次CPU时间也可能带来不可预期的结果，另外电脑的性能等因素也会影响执行的效率和间隔，而且是我们不可控不可预料的

于是就有了requestAnimationFrame(func)方法

该方法的作用是告诉浏览器在即将进行下一帧绘制之前运行指定函数，这样就保证了每一帧绘制时都会进行仅一次的运算

由于该方法仅告诉浏览器下一帧绘制前要运行的函数，也就是说是一个一次性的，下下一帧及之后的帧就不会再运行了

所以我们使用递归调用

function demo(){
    let rafid = requestAnimationFrame(function(){
        //运算过程，如改变位置、大小等
        demo(); // 继续设置下一帧
    });
    if (指定条件){
        cancelAnimationFrame(rafid); //在达到动画停止的条件时停止运行
    }
}