web前端-JavaScript-BOM

HTML BOM

1.BOM的概念

概念：BOM（Browser Object Model）即浏览器对象模型

ps：通常情况下如果提到了bom，一般指的都是window对象。

BOM和DOM的关系

(1)DOM通过document对象来访问、控制、修改html和xhtml等文档中的内容

  (2)BOM通过  window  对象来访问、控制、修改浏览器中的内容

 

联系：BOM包含DOM。
      浏览器提供用来访问的是BOM对象

      从BOM对象可以访问到DOM对象

      从而使javascript可以操作浏览器、并通过操作浏览器读取到文档的内容

 

  区别：DOM描述了处理网页内容的方法和接口，即操作页面内部

      BOM描述了与浏览器进行交互的方法和接口，即操作页面之间

2.window对象

概念：window对象是bom的具象化表现形式。

window和bom之间的关系就好比document对象和dom之间的关系一样：

  2.1 属性和方法

(1)window.name

  属性：

  window.name是window对象的一个属性，默认值为空。

  特性：

  window.name值在不同的页面（甚至不同域名）加载后依旧存在,

      并且可以支持非常长的name值（2MB左右）

  应用：

  正是由于window.name属性拥有在不同页面保持存在的特性，

  因此出现了一门叫做【跨域传输】的技巧。

  而这个技巧的内部实现原理就是window.name的持久性的特性。

(2)window尺寸属性

  window.outerHeight

  window.outerWidth

  这两个属性返回的是整个浏览器的高度

  和页面窗口的大小没有任何关系

  window.innerHeight

  window.innerWidth

  返回视口的宽高 (计算滚动条的高度)

  页面变化它就变

  document.documentElement.clientHeight

  document.documentElement.clientWidth 

  返回视口的宽高(不计算滚动条的高度)

window.pageYOffset

window.pageXOffset

返回页面滚动的距离(通用)

这两个属性指的是页面发生滚动的距离

window.screenX

window.screenY

返回浏览器距离屏幕的距离

(3)window.navigator对象属性

window.navigator对象包含大量有关Web浏览器的信息，在检测浏览器及操作系统上非常有用。（这个对象和event一样是一个全局变量，并且是唯一的）

  navigator.appCodeName  //浏览器代码名的字符串表示

  navigator.appName   //官方浏览器名的字符串表示

  navigator.appVersion   //浏览器版本信息的字符串表示  

  navigator.cookieEnabled   //如果启用cookie返回true，否则返回false

  navigator.javaEnabled()   //如果启用java返回true，否则返回false

  navigator.platform   //浏览器所在计算机平台的字符串表示

  navigator.plugins   //安装在浏览器中的插件数组

  navigator.userAgent   //返回和浏览器内核相关的信息

  ps:如果window.navigator.userAgent出现了Mobile，可以确定用户使用的是移动设备

(4)window对象中涉及到的方法

3.提示框

 浏览器中常见的三种提示框

(1) alert(alertMsg);

(2) prompt(alertMsg,defaultMsg); 

(3) confirm(alertMsg)

4.间隔调用和延迟调用

4.1 间隔调用

间隔调用全称为间隔调用函数，又名定时器。是一种能够每间隔一定时间自动执行一次的函数。

  语法：var timer = null；

      timer = setInterval(需要执行的函数，执行间隔时间ms)； 

  例如：var timer = null；

      timer = setInterval(function(){

  console.log('hello world!');

      },2000);

既然间隔调用每隔一段时间就会自动执行一次，那么清除间隔调用就势必存在。

  语法：clearInterval(变量标识)

  例如：clearInterval(timer);

  上述代码就能够将刚刚创建的定时器移除掉，令其不在间隔一段时间后自动再次执行。

4.2 延迟调用

  延迟调用又叫延迟调用函数。是一种能够等待一定时间后在执行的函数。

  语法：var timer = null;

      timer = setTimeout(需要执行的函数，等待的时间);

  例如：var wait = null；

      wait = setTimeout(function(){

  console.log('hello world!');

      },2000);

  根据语法所述，上述代码所表示的含义为：等待2s后打印一句【hello world！】

  注意：延迟调用除了在语法上和间隔调用略有不同外，其余语法均相同。

5.初识数据解析

数据解析：将【不能被直接使用的数据】通过某种方法转变为【能够被直接使用的数据】的过程称为数据解析。

  而对于开发者来说最常见的数据解析就是将【字符串数据】解析为【对象数据】

6. 页面加载优化和js文件解析顺序

6.1 defer

defer属性：等待DOM加载完成后才去加载JS脚本

6.2 async

async属性：DOM加载和js脚本加载异步执行，同时进行。

  async优势：避免了因DOM文件过大导致的【文件加载阻塞】

  async缺陷：无法确定js脚本到底何时执行，并仅对外部js脚本生效

6.3 不添加任何属性的js脚本

js脚本在不受任何外界因素影响的时候，实际上就是按照html代码的加载顺序执行的。因此【不添加任何属性的js脚本】总是会在【引入脚本的节点】加载完毕之前执行。

7. 浏览器性能优化：回流和重绘

回流必将引起重绘，而重绘不一定引起回流。

      如何从重绘和回流方面提高浏览器性能

1.不要一项一项的去改变样式，尽可能一口气写完。(可以写在一起，不要被打断就行)

                  最好使用.style或者.style.cssText

2.读写DOM也尽量也放在一起

3.使用文档碎片 var linshi = document.createDocumentFragment();

4.使用fixed或者absolute可以减少回流和重绘

5.使用

  window.requestAnimationFrame(function () {

  for(var i=0;i<div.length;i++){

  div[i].style.background = "red";

  }

  })

  把发生重绘的代码推迟到下一次重绘发生时一起执行

8. window.history对象

(1)window.history.back()  跳转到栈中的上一个页面

  (2)window.history.forward()  跳转到栈中的下一个页面

  (3)window.history.go(num)  跳转到栈中的指定页面

  (4)window.history.length  栈中页面的数量

9. 函数的【道岔】：call和apply

语法：

 call:  函数.call(函数实际的调用者,函数参数1,函数参数2,...)

  apply:  函数.apply(函数实际的调用者,【函数参数1,函数参数2,...】)

 

他们所表达的含义是：

  函数的实际调用者是call或者apply的第一个参数。

  而后的参数是这个要执行的函数的参数。

 

  call函数结论：

  (1)call函数能够改变函数的实际调用者，也就是函数中this的指向。

  (2)call函数中第一个参数必须写，而其余参数可以不写。

  (3)call函数传递参数的时候，用逗号分隔每一个参数

  apply函数结论：

  (1)apply函数能够改变函数的实际调用者，也就是函数中this的指向

  (2)apply函数中第一个参数必须写，而其余参数可以不写

  (3)apply函数传递参数的时候，参数采用数组方式传递

10. 闭包

闭包就是将函数内部和函数外部连接起来的一座桥梁。

由于闭包的实际调用者都是window，因此所有闭包中的this均指向了window。

由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大。

所以不能滥用闭包，否则会造成网页的性能问题

function func(){
	num=999;　　　　
	return function(){console.log(num);}
}
func()();

11. this总结

  下面是对于this的使用场景

  (1)this在正常函数中：  谁调用了函数，this指向谁

  (2)this在闭包中：  闭包中的this指向window

  (3)间隔调用和延迟调用：  间隔调用和延迟调用中的this指向window

  (4)事件中的this

  HTML：this指向window

  DOM0：this指向绑定该事件的元素

  DOM2级：IE指向window 非IE中指向指向绑定该事件的元素

  (5)自执行函数：  this指向window

  (6)call和apply函数：  第一个参数是谁，this指向谁