【盘一盘】 005 《JavaScript高级程序设计（第3版）》（二）BOM

JavaScript高级程序设计（第3版）

---

BOM（浏览器对象模型）
要说BOM是什么东西，可以需要和DOM一起来描述。

看一下书中的名词解释：
BOM（浏览器对象模型），提供与浏览器交互的方法和接口。
DOM（文档对象模型），提供访问和操作网页内容的方法和接口。

很好，不知所云。

在来看下书中的如何描述BOM和DOM分别能做哪些事情：

BOM：

• 弹出新浏览器窗口的功能
• 移动、缩放和关闭浏览器窗口的功能
• 提供浏览器详细信息的navigator对象
• 提供浏览器所加载页面的详细信息的location对象
• 提供用户显示器分辨率详细信息的screen对象
• 对cookies的支持
• 像XMLHttpRequest 和 IE的ActiveXObject 这样的自定义对象

DOM：

• DOM1
  • DOM核心（DOM Core）：映射基于XML的文档结构，以便简化对文档中仁义部分的访问和操作。
  • DOM HTML：针对HTML的对象和方法。
• DOM2
  • DOM视图（DOM Views）:定义了跟踪不同文档（例如，应用CSS之前和之后的文档）视图的接口
  • DOM事件（DOM Events）：定义了基于CSS为元素应用样式的接口
  • DOM遍历和范围（DOM Traversal and Range）：定义了遍历和操作文档树的接口。
• DOM3
  • DOM加载和保存（DOM Load and Save）：引入了以统一方式加载和保存文档的方法
  • DOM验证（DOM Validation）：新增了验证文档的方法
  • DOM核心扩展：支持XML Infoset、XPath和XML Base

想必单纯听BOM和DOM的时候，你并不能知道这中文翻译过来的解释是什么意思。BOM其实就像是我们房间的整体结构，你房间的信息（window、screen）、房间的管线信息（location、location、cookies）、房间在当前区域的市政规划（navigator）。BOM就如同没有装修房子前的基本信息，在开发时随时可以获取当前网页所处的环境和信息，并且可以为网页存放一些临时或永久的信息，保证开发心知肚明。DOM就与BOM相反了。DOM就是房间里的施工图了，你想在哪里显示个字，在哪里放张图片，完全交给了DOM来处理。同时DOM具备单独将放冰箱的位置换成电视。当然，换成智能电视，可以控制他，那这个DOM元素就是具备操作能力，即事件。涂个粉色的墙吧，让CSS来协助帮忙，告诉CSS是涂哪面墙就可以。
所以，BOM可以理解为获取当前页面所在的基本信息，和所在浏览器信息。DOM可以理解为获取用户见到的，看到的页面内容。

接下来，就是逐一分析各个部分了。先从BOM开始吧。请翻到P211面第8章。

BOM操作：
BOM既然是获取浏览器当前的基本信息，这些信息就放在各个“对象”的手上。“对象”，顾名思义就是目标物，可以向它索取你必要的内容。举个例子，你如果想知道当前浏览器的宽度和高度，有一个叫“window”的“对象”。只需要window.screen.availHeight（高度）、window.screen.availWidth（宽度），你需要的数据就能得到。BOM到底有多少“对象”呢？

• window对象
• location对象
• navigator对象
• screen对象
• history对象

window对象。这个对象是BOM的核心对象，核心在于它能干很多事情》》》

• 全局作用域
  • 可以直接对window对象新增或删除变量甚至函数。例如window.age = 29。
  • 那我也可以使用var age = 29来定义变量。那他们有什么本质上的区别吗？
    • 在于delete操作符删除上。全局变量delete age 会报错或者返回false。window对象通过delete window.age可以直接删除。
  • Eg.
    • window.age = 29
    • delete window.age
• 窗口关系及框架
  • 这个目前对我来说比较少用了，目前使用的是单页面渲染，以前要动态显示数据，需要通过ifarme来嵌套处理。
  • 获取三种不同窗口信息：window获取当前窗口信息，top获取最外层窗口信息，parent获取当前窗口的父级信息
  • eg.
    • window.frames[0]获取当前窗口信息
    • top.frames[0] 获取最外层窗口信息
    • parent.frames[0] 获取当前上一级（父级）窗口信息
• 窗口位置
  • 获取窗口位置的方法有很多种，并不是因为有好几种代码可以获取，而是因为各个浏览器之间的问题，导致了兼容上出现了不同的情况。比如有部分浏览器是通过screenLeft来确定屏幕的左边，而有些浏览器是通过xcreenX来确定屏幕的左边。为了解决跨屏幕兼容的问题。作者提供如下调整。
  • 当然，作者还介绍了窗口偏移window.moveTo(0,0)屏幕位置和window.moveBy(0,0)屏幕移动偏移量。
  • eg
    • var leftPos = (typeof window.screenLeft == "number") ? window.screenLeft : window.screenX;
    • var topPos = (typeof window.screenTop == "number") ? window.screenTop : window.screenY;
• 窗口大小
  • 这里还挺有意思的，作者讲到这点时，似乎觉得无奈——获取窗口大小不是一件简单的事情。
  • 由于各个浏览器对窗口大小的定义不同。但目前有两种相对可行的获取大小的方法。
  • window.innerWidth()，window.innerHeight()
  • document.documentElement.outerWidth()，document.documentElement.outerHeight()
  • 对于这种又是兼容问题，作者提出如下方法。

var pageWidth = window.innerWidth, pageHeight = window.innerHeight;
if (typeof pageWidth != "number”){
    if (document.compatMode == "CSS1Compat”){
        pageWidth = document.documentElement.clientWidth;
        pageHeight = document.documentElement.clientHeight;
    } else {
        pageWidth = document.body.clientWidth;
        pageHeight = document.body.clientHeight;
    }
}

• 导航和打开窗口

  • window.open() 导航到一个特定的URL
  • 其中open中有四个参数（URL，窗口目标，一个特性字符串，一个表示新页面是否取代浏览器历史记录中当前加载页面的布尔值）
  • eg
  • window.open("[http://www.wrox.com/","wroxWindow](http://www.wrox.com/)", "height=400,width=400,top=10,left=10,resizable=yes");
  • URL：写入要弹出的窗口所对应的地址
  • 窗口目标：调转到新窗口的名字
  • 一个特性字符串：弹出的新窗口的配置信息，以逗号隔开的字符串
    • 配置参数如下：
    • 

      配置表
  • 间歇调用和超时调用

    • 超时调用：

      • var timer = setTimeout(() => {}, 1000);

      • 指定时间过后执行代码

      • 中途取消执行：clearTimeout(timer)

    • 间歇调用

      • var timer2 = setInterval(() => {}, 1000);
      • 每隔指定的时间就执行一次代码
      • 取消循环执行：clearInterval(timer2)

• 系统对话框

• 这里常用的三种对话框：alert()警告框、comfirm()确认框、prompt()提示输入框

• 那还有两种相对少用，但认识一下：window.print()显示“打印”对话框、window.find()显示“查找”对话框

总结

这一节，重点了解了什么是BOM，并了解了BOM的核心对象——window。后续我们会共同来讨论其他几个对象的实际运用。