前端开发系列031-基础篇之BOM
BOM简单介绍
我们已经知道JavaScript的范围包括ECMAScript(语言核心) + DOM(文档对象模型) + BOM(浏览器对象模型)。
BOM 是 Browser Object Model（浏览器对象模型）的缩写，它提供了独立于内容 而与浏览器窗口进行交互的对象。由于BOM主要用于管理窗口与窗口之间的通讯，因此其核心对象是window，它表示流浏览器的一个实例。BOM由一系列相关的对象构成，并且每个对象都提供了很多方法与属性，window作为最顶层的对象，BOM中所有的对象都是通过它延伸出来的。
标准化 JavaScript语法的标准化组织是ECMA，DOM的标准化组织是W3C, 而BOM因为缺乏标准，BOM最初其实是Netscape浏览器标准的一部分，而这也正是各种浏览器不兼容的根源所在。此外需要指出的是，W3C为了把浏览器中JavaScript最基本的部分标准化，已经将BOM的主要方面纳入了HTML5的规范中。
window和全局作用域
在浏览器中，window对象拥有着双重的角色，它既是通过JavaScript访问浏览器窗口的接口，也是ECMAScript规定中的Global全局对象。因此，所有在全局作用域中声明的变量、函数都会自动成为window对象的属性和方法。
全局作用域
> ✧ 定义在全局环境下的变量和函数都会成为 `window` 对象的成员(属性和方法)
> ✧ 编码的时候应该尽可能少的使用全局变量，以避免污染全局环境
> ✧ 没有用var声明的变量会成为全局变量，即 `window` 对象的属性
> ✧ 在编码时`window` 前缀可以被省略，如 `window.console.log()` 通常写成 `console.log()`;
代码示例
/*01-全局作用域示例*/
console.log(window.age); //undefined
var age = 12;
console.log(age, window.age); //12 12 age自动成为window的属性
console.log(window.arr); //undefined
var arr = [1,2,3,"T"];
console.log(arr == window.arr); //true
arr.push("V");
console.log(window.arr); //[1,2,3,"T","V"];
function sum(a,b) {
return a + b;
}
console.log(sum(1, 2)); //3
console.log(window.sum(1, 3)); //4
/*02-没有使用var声明的变量默认成为全局变量*/
address = "北京市海淀区";
console.log(window.address); //"北京市海淀区";
function f() {
var a = "我是a";
b = "我是b";
}
f(); /*调用函数f，执行函数体中的代码*/
//console.log(a); //报错 无法访问变量a 因为a是f函数中的局部变量
console.log(b); //"我是b" b默认成为全局变量
console.log(window.a); //undefined
console.log(window.b); //"我是b"
/*03-省略window前缀*/
console.log(window.console == console); //true
因为全局作用域中声明的所有变量都会自动成为window的属性，而实际的开发中代码量可能是巨大的，且项目可能是由很N多人一起维护的，因此应该尽可能的减少全局变量的数量，以防止污染全局环境。
关于这个问题的解决方案可以有两种，一种是根据具体的业务和功能将部分代码封装到匿名函数(闭包)中保持独立性，一种是把很多变量和函数封装到特定的对象中处理。当然，更成熟的方案是使用 模块化 的方式来组织项目和代码结构，其实模块化的开发方式也是使用匿名函数封装的一种变形，在这里我们暂不作具体的展开。
注意 delete 用于删除对象的属性，需注意虽然使用delete关键字可以删除直接定义在 window 上面的属性，但却无法直接删除用 var 声明的全局变量(在严格模式下不能禁止使用 delete 来删除遍历，错误信息为 Uncaught SyntaxError: Delete of an unqualified identifier in strict mode. )。
/*测试1：使用delete删除对象的属性*/
var obj = {id:"1001"};
console.log(delete obj.id); //true
console.log(obj.id); //undefined
/*测试2：使用delete删除全局变量的属性*/
var className = 'H5-1904';
console.log(delete className); //false
console.log(className); //"H5-1904"
console.log(delete window.className); //false
console.log(window.className); //"H5-1904"
/*测试3：使用delete删除直接定义在window对象上面的属性*/
window.test = "测试的属性";
console.log(delete window.test); //true
console.log(window.test); //undefined
window核心成员详解
接下来，我将分门别类的讲解浏览器窗口的大小、滚动、导航、打开、弹窗、位置操作、历史记录以及事件处理等内容，所以这些功能都通过 window的核心成员来提供和实现。
window的 location 对象
location对象是window中最有用最重要的对象之一，它提供了与当前窗口中加载的文档有关的信息，而且它非常特殊，它既是window的属性也是document的属性。
location 对象的主要属性
hash 设置/返回从井号 (#) 开始的 URL（锚点）==>哈希值。
href 设置/返回完整的 URL。
search 设置/返回从问号 (?) 开始的 URL（参数部分）。
host 服务器名称和端口号
hostname 服务器名称
pathname URL中的目录和文件名
port 返回指定的端口号，如果没有指定则返回空字符串
protocol 返回网络协议
location 对象的主要方法
assign() 加载新的页面
reload() 重新加载(刷新)
replace(newurl) 使用新的页面来替换当前页面
url的组成http://www.baidu.com:10086/api/reg.php?username=zs&password=123&age=18#123
协议：http
域名：baidu.com
端口：10086 (默认:80)
路径：/api/
参数：username=zs&password=123&age=18
哈希：#123
窗口的主要属性
跨浏览器确定窗口的大小可以使用window的innerWidth、innerHeight、outerWidth和outerHeight四个属性，它们分别对应的是页面视图容器的宽高和浏览器窗口本身的尺寸。需要注意的是，这几个属性存在兼容性问题，在IE8-中需要通过DOM来获取大小信息。
页面视图容器也称为浏览器的视口(
viewport),相比窗口本身来说它不包括工具栏和滚动条。
/*01-获取页面可视区域的大小(宽 | 高)*/
var w =window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;
var h =window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;
/*兼容IE8-
* 如果是标准模式则使用document.documentElement.clientWidth，
* 如果是混杂模式则使用document.body.clientWidth
* */
console.log(w); //877 可视区域的宽度
console.log(h); //410 可视区域的高度
/*02-获取window窗口本身的大小*/
console.log(window.outerWidth); //877 窗口的宽度
console.log(window.outerHeight);//778 窗口的高度
/*03-获取滚动条位置相关的信息*/
console.log(window.scrollX); //水平滚动条滚动过的距离（只读）
console.log(window.scrollY); //垂直滚动条滚动过的距离（只读）
/*04-操作滚动的相关方法*/
window.scrollTo(100,100); //指定滚动位置
window.scrollBy(-100,100); //设置基于当前位置的滚动距离
窗口的打开和关闭
语法 window.open([ URL ],[ name ],[ features ],[ replace ])
作用 open()方法用于打开一个新的浏览器窗口或查找一个已命名的窗口。
/* 作用：打开新的窗口
* 语法：window.open(URL,name,features,replace)
* 参数：
* URL 打开指定页面的URL，没有指定则打开空白窗口。
* name 指定target属性或窗口的名称。
* _blank - 在新的窗口加载页面(默认)
_parent - 在窗口中加载页面
_self - 在当前窗口中加载页面(替换)
_top - URL替换任何可加载的框架集
name - 窗口名称
features 可选的字符串，声明了新窗口要显示的标准浏览器的特征
replace 可选的布尔值，设置浏览历史的处理(true表示替换当前条目，false表示新建条目)
*/
/*01-打开空白窗口*/
window.open();
/*02-打开新的标签页，加载www.wendingding.com站点*/
window.open("http://www.wendingding.com");
/*03-打开新的窗口并控制窗口的外观*/
//toolbar 浏览器工具栏是否显示
//location 是否显示地址字段
//directories 是否添加目录按钮(IE)
//status 是否添加状态栏
//menubar 是否显示菜单栏
//scrollbars 是否显示滚动条
//resizable 窗口是否可调节尺寸
//width 窗口的宽度
//height 窗口的高度
window.open("http://www.wendingding.com","_blank","toolbar=yes, location=yes, " +
"directories=no, status=no, menubar=yes, scrollbars=yes, " +
"resizable=no,width=400, height=400");
/*04-关闭当前窗口*/
window.close();
/*05-该方法用来调出打印窗口*/
window.print();
系统弹框
alert( ) 弹出对话框(确定)
confirm( ) 弹出警告框，返回布尔值（确定&取消）
prompt( ) 弹出输入框，返回消息或 null
//console.log(alert("确定")); /*提示框 该方法没有返回值*/
//console.log(confirm("确定删除吗?"));; /*警示窗 确定返回true,取消返回false*/
var res = prompt("好汉请留下尊姓大名","座山雕");
//如果点击了取消那么就返回null
//如果点击了确定那么就返回输入框的内容
console.log(res);
window的 history 对象
window对象中有一个history属性，它本身也是一个对象保存着网页的历史记录(从窗口打开时计算)。出于安全方面的考虑，开发人员无法得知用户浏览过的URL详情，但却可以利用history对象来实现前进和后退的功能。
history对象通过内部的length属性来记录浏览历史的数量，该数据包含了向前和向后的所有浏览记录，默认加载到窗口的第一个页面其history.length的值为0。
go( ) 跳转到任意的浏览历史记录，负数表示后退。
back( ) 后退一页
forward( ) 前进一页
/*方法演示 下面代码中的window前缀可以省略*/
console.log(window.history.length); //获取历史记录长度
window.history.go(1); //前进1页
window.history.go(-1); //后退1页
window.history.back(); //回退
window.history.forward(); //前进
window的事件补充
onresize 事件会在窗口大小调整的时候被触发。
onscroll 事件在页面滚动条滚动的时候会被触发。
onload 事件会在页面加载完成(HTML+CSS+其它资源)后触发。
