javascript 高级程序设计 8-9

[ycshill]

BOM: 在 Web 中使用 javascript的核心。

[ycshill]

window

• BOM 的核心，是浏览器的一个实例， 它既是通过 js 访问浏览器的一个接口，又是 ES 规定的 global 对象。

窗口关系及其框架：

• window: 使用框架的时候可能会有多个，每个 frame 都有一个；
• top: 始终是最高层框架，也就是浏览器窗口；
• parent：指向当前框架的直接上层框架；
• self: window本身；

 <frameset rows="160, *">
    <frame name="topFrame"></frame>
    <frameset cols="50%, 50%">
      <frame src="left.html" name="letFrame" />
      <frame src="right.html" name="rightFrame" />
    </frameset>
  </frameset>

窗口位置

• screenX/screenLeft: 窗口距离屏幕左边的距离；
• screenY/screenTop: 窗口距离屏幕上边的距离；
• moveTo(x, y)：移动到（x, y）
• moveBy(disX, disY) : 横向移动disX，纵向移动disY;

窗口大小

• outerWidth/outerHeight：浏览器窗口大小；
• innnerWidth/innerHeight: 可视窗口的大小；
• resizeTo(w, h): 调整为w*h 大小的窗口；
• resizeBy(disW, disH): disW,disH 分为为新 - 老 的差值；

导航和打开窗口

• window.open(url, target, feature, replace )
  • url：加载的url
  • target: 窗口目标，也可以是_self/_target/_top/_blank
  • feature: 描述窗口的特性；
  • replace: 新页面是否取代浏览器历史记录中当前页面
  • 返回一个指向新窗口的引用，opener- 指向打开它的原始窗口；close() - 关闭；
  • 注意：通过脚本的形式打开新窗口必须是在同步代码中调用， 异步调用的话，浏览器会拦截，这个机制是绕不开的。

间歇调用和超时调用

js 是 单线程、非阻塞的语言

• 单线程：JavaScript为处理页面中用户的交互，以及操作DOM树、CSS样式树来给用户呈现一份动态而丰富的交互体验和服务器逻辑的交互处理。如果JavaScript是多线程的方式来操作这些UI DOM，则可能出现UI操作的冲突； 如果Javascript是多线程的话，在多线程的交互下，处于UI中的DOM节点就可能成为一个临界资源，假设存在两个线程同时操作一个DOM，一个负责修改一个负责删除，那么这个时候就需要浏览器来裁决如何生效哪个线程的执行结果。当然我们可以通过锁来解决上面的问题。但为了避免因为引入了锁而带来更大的复杂性，Javascript在最初就选择了单线程执行。

• 非阻塞：事件循环（event loop）
  

所有任务分为同步任务和异步任务，同步任务和异步任务在不同的执行环境，同步任务进入主线程，异步任务进入任务队列，任务队列中又包括宏任务队列和微任务队列，主线程内的任务执行完毕为空，会去任务队列中读取对应的任务（先微任务，再读取宏任务），推入到主线程去执行。

• 推荐两篇文章：

  • http://lynnelv.github.io/js-event-loop-browser
  • https://www.cnblogs.com/yugege/p/9598265.html

• 来几个小例子，加深理解：

  • 第一个

  <script type="text/javascript">
    console.log(1);
    setTimeout(function() {
      console.log('第一个宏');
    }, 0);
    Promise.resolve().then(function() {
      console.log('promise1');
    })
  </script>
  <script type="text/javascript">
    console.log(2);
    setTimeout(function() {
      console.log('v');
    }, 0)
    Promise.resolve().then(function() {
      console.log('promise3');
    })
  </script>
  

  它的执行过程如下：

  • 整体 script 代码做为第一个宏任务放到宏任务队列中，第二个 整体script 代码放入到宏任务队列中；
  • 读取第一个宏任务，放入到执行栈中，【打印1】，遇到setTimeout，放入到宏任务队列中，遇到Promise.resolve().then 放入到微任务队列中。
  • 此时这个宏任务执行结束，有微任务吗？有，执行这次tick中所有的微任务队列，【打印promise1】
  • 没有微任务了，把第二个进入宏任务中的放入到执行栈，也就是 第二个 script，【打印2】遇到setTimeout，放入到宏任务队列中，遇到Promise.resolve().then 放入到微任务队列中。
  • 此时这个宏任务执行结束，有微任务吗？有，执行这次tick中所有的微任务队列，【打印promise2】
  • 没有微任务了，执行宏任务，【打印第一个宏】，【打印第2个宏】

系统对话框

• 显示对话框的时候代码会停止执行，关掉对话框的时候代码又恢复执行。
• alert(str);
• confirm(str); 返回 Boolean，确定（true）, 取消（false）；
• prompt(str, defaultText); 返回点击的string 或者 null；
• print(); 调出【打印】对话框；

[ycshill]

location

• 提供了一些文档信息，也提供了一些导航信息，既是window对象的属性，也是document对象的属性；

属性名

属性名	例子	说明
hash	#document	返回hash或者空串
host	www.wrox.com:80	服务器名称和端口号
hostname	www.wrox.com	服务器名称
herf	http://www.wrox.com	完整的url
pathname	//issues/16	url中的目录和（或）文件名
port	8080	返回端口号
portocol	http:	返回使用协议
search	?q=javascript	?开头

方法

• reload(param) : 重新加载页面，不传递参数，会以最有效的方式重新 （从浏览器缓存，或者服务起），传递参数为true的话，会从服务器重新加载；

[ycshill]

history 对象

• history.go(-1)
• hisgory.go(1)
• go(num) : 前进num 页
• go('www.baidu.com')
• back()
• forward()
• length

[ycshill]

客户端检测

第9章好无聊，我都没有学到什么

能力检测

在实际开发中，应该将能力检测作为确定下一步解决方案的依据，而不是用它来 判断用户使用的是什么浏览器。

怪癖检测

• 想知道浏览器有什么bug
• ”一般来说，“怪癖”都是个别浏览器所独有的，而且通常被归为 bug。在相关浏览器的新版本中，这 些问题可能会也可能不会被修复。由于检测“怪癖”涉及运行代码，因此我们建议仅检测那些对你有直 接影响的“怪癖”，而且最好在脚本一开始就执行此类检测，以便尽早解决问题。“

第9章讲得真的是～～～云里雾里得