ES5

ES5

兼容性

支持ES5的浏览器有：Opera 11.60+，IE9+（IE9 不支持严格模式），Firefox 4+ ，Safari 5.1+，Chrome 13.

加载事件

页面渲染步骤

1. 解析HTML结构
2. 加载外部脚本和样式表文件
3. 解析并执行部分脚本代码 (写在页面内的脚本，如自调用函数)
4. DOM树构建(body里面元素构建完成）完成
5. 加载图片等外部文件
6. 页面加载完毕

document事件

• readystatechange事件

  • interactive
  • complete

• DOMContentLoaded事件

  document.addEventListener('DOMContentLoaded',function(){
      //DOM树构建完成后执行
  })
  

  PS:以上事件用以取代window.onload事件

页面脚本执行时间

在页面中，脚本在不同的函数下的执行顺序时间是不一样的。最基础的情况如上述页面渲染步骤一样逐步执行，但是有不同的函数可以改变其执行循序。

window.load = function (){ //代码} 事件，当文本流document加载完成后加载。效率是最低的。可以认为是排名第4的。

document.addEventListener('DOMContentLoaded',function(){ //代码});

window.onload = function () {//4.最慢
  console.log('onload');
}

document.addEventListener('DOMContentLoaded', function () {//2.这种方式执行脚本的效率更高
  console.log('DOMContentLoaded');
});
document.onreadystatechange = function () {
  if (document.readyState == 'interactive') { //1.速度最快，和jq加载很像，边生产dom就边执行脚本
                      console.log('interactive');
  } else if (document.readyState == 'complete') {//3.加载完dom节点后就执行
                      console.log('complete');
  }
}

严格模式

目前除了IE6-9 其他均已支持严格模式。严格，顾名思义代表要变得严谨，以前的定义变量不写var 时被认为全部变量，严格模式下不写就会报错。js是不严谨的脚本语言，不想后端语言，少个标点符号都会报错的。因此在某些情景，需要严格模式。

那么我们为什么要使用严格模式？使用的优点有哪些？

1. 可以消除JavaScript语法的一些不合理，不严谨的地方，减少一下怪异行为；
2. 消除代码运行的一些不安全之处，保证代码的运行安全
3. 提高编译器效率，增加运行速度
4. 为未来新版本的JavaScript做好铺垫

优点：可以报出以前不报错的错误，更方便查看 错误修改bug。

使用方法：在需要严格的代码前写 'use strict'

在严格模式在出现以下现象会报错

• 声明变量必须要有声明词（以前是不写var默认为全局变量）
• 删除系统内置属性
• 对象有重名的属性将报错 var obj={name:"小王",name:'王大锤'}
• 函数有重名的参数将报错
• 函数必须声明在顶层，不能写在条件判断语句或for循环语句中

JSON对象方法

• JSON.parse(text) 将JSON字符串转成对象/数组
• JSON.stringify(value) 将数组/对象转成标准的JOSN字符串
• json字符串格式
  • 属性名必须加双引号
  • 字符串必须加双引号
  • 不能有注释
  • 最后不能有多余逗号
  • 属性值可以为以下值
    • 数字（整数或浮点数）
    • 字符串（在双引号中）
    • 布尔值（true 或 false）
    • 数组（在方括号中）
    • 对象（在花括号中）
    • null

对象之间的等号 = 是引用，改变其中一个另外一个也会被改变，堆栈指针的一个过程。如若想拷贝一个对象，可以通过以下方法：

1. 循环(浅度拷贝)

   var newobjt = {};
   for(var key in oldobj ){
   	newobj[key] = oldobj[key];
   }
   

2. 深度拷贝 JSON 的方法

   var str = JSON.stringify(oldObj); //旧对象转成字符串
   var newObj = JSON.parse(str);  //字符串转转成对象，也就完成拷贝
   

   深浅区别：浅度拷贝只是值的赋予，他们还是在同用一块内存，拷贝对象引用了原来对象的指针，新对象的改变会影响原对象，深度拷贝是在堆栈中重新开辟一块内存赋予新对象，两者是互不影响的了。正常情况来说，深度拷贝才是我们想要的拷贝，记得大学的学c语言学到指针的时候，就涉及到这个问题。

   获取元素节点

   以前获取元素节点都是通过document.getElement的方式查找节点的，现在ES5新增了方法

   • querySelector(selector)
     获取匹配选择器的第一个元素节点，返回DOM节点
   • querySelectorAll(selector)
     获取匹配选择器的所有元素，返回数组

   获取class列表属性

   classList:ES5提供的子对象，专门用于操作类名

   属性	描述
   length	class类名的个数
   add（）	添加class方法
   remove（）	删除class方法
   toggle（）	切换class方法，点击第二次切换原来的。
   contains（）	是否含有某个类，返回bool值

   funtion 的方法

   bind() 函数的方法，只有函数才能调用。

   用于当前函数和指定对象的绑定（改变this指向），返回一个新的函数。

   this 指向调用函数的对象；事件前面的对象，funtion函数是window调用的，所以在内置函数`

   btn.onclick =  function(){ 
   		setTimeout (function(){
         	  console.log(this);
   	},2000);
   }
   	//此时this是指向内置的function，内置的function是window调用的。
   btn.onclick =  function(){ 
   		setTimeout (function(){
         	  console.log(this);
   	}.bind(this或者btn),2000);
   }
   //此时可以改变this的指向了
   

data自定义属性

自己给节点增加属性，成为自定义属性，最常用就是自定义id。数据渲染的时候常用。直接在节点中加就行.data-

js访问时为dataset

 <li data-id="1">1</li>