【前端】之JavaScript基础知识

JS 基础知识

• JS中，简单类型的数据存储在栈中，复杂类型的数据存储在堆中，其引用存储在栈中
• JS中的深拷贝和浅拷贝：
  • 浅拷贝：将对象中的所有简单类型的属性拷贝出来，引用类型属性直接赋值null
  • 深拷贝：将对象中的所有属性都拷贝出来，引用类型属性对象中的属性一一拷贝
• JS类型检测方法：
  • typeof 100：number/string/boolean/undefined/object/function
  • 100 instanceof Number：true/false
  • Object.prototype.toString.apply(100)：[Object Number/String/Function/Null]
• JS中数组定义方式：
  • var arr = new Array();
  • var arr = new Array(20); // 长度20
  • var arr = new Array(1,2,3,4);
  • var arr = [1,2,34,4]; var arr = [[1,2,3],[2,3,4]];
• JS中的try/catch/finally：
  • JS中的try/catch/finally用法和JAVA中相同
  • 抛出异常：throw new Error("这是一个异常");
  • 打印异常信息：console.error("打印的异常");
• JS中的函数传参：
  • 简单类型的参数，传递的是一个局部变量，其变化后不影响原始值
  • 引用类型的参数，传递的是一个指针，其变化后悔影响原始值
  • 函数内部可以使用arguments[i]来获取函数的第i个参数
• JS代码执行流程：JS代码由浏览器解析器执行，解析器要先进行预解析，即在同一级作用域中，找出var声明的变量、function函数和函数的参数，将它们提到这个作用域的最前端，然后再逐行解析
• JS中的DOM操作：
  • 添加：ele.appendChild(node);
  • 插入：ele.insertBefore(newNode, node); //将newNode插入到node前面
  • 删除：ele.removeChild(node);
  • 修改：ele.replaceChild(newNode, oldNode);
  • 创建：document.createElement('div');
  • 克隆：var newNode = ele.cloneNode(true); //true会克隆所有子节点
• JS - Date API：
  • 获取当前系统时间：var date = new Date();
  • 获取某个日期时间：var date = new Date(2016, 12, 25);
  • 获取年：getFullYear()；获取月：getMonth()+1；获取日：getDate()
  • 获取时：getMonth()；获取分：getMinutes()；获取秒：getSeconds()
  • 获取时间戳（毫秒）：getTime()
• JS - String API：
  • 大小写转换：str.toUpperCase(); str.toLowerCase();
  • 字符串分割：str.split('/');
  • 查找子串：str.indexOf("abc");
• JS - Math API：
  • 绝对值：Math.abs(-10)
  • 向上/向下取整：Math.ceil(4.5); Math.floor(4.5);
  • X的Y次幂：Math.pow(x, y);
  • 开平方：Math.sqrt(16);
  • 返回一个0-1的随机数：Math.random();
• JS - Array API：
  • 将arr2中的数据链接到arr1后面：arr1.concat(arr2);
  • 数组变成字符串：var str = [1,2,3].join('-'); //1-2-3
  • 删除并返回数组中的最后一个元素：arr1.pop();
  • 删除并返回数组中的第一个元素：arr1.shift();
  • 向数组最后添加多个元素，返回新的长度：arr1.push(8);
  • 向数组开头添加多个元素，返回新的长度：arr1.unshift(8);
  • 逆序数组：arr1.reverse();
  • 将数组按升序排序：arr1.sort();
  • 将数组按自定义规则排序：arr1.sort(function(a, b) { return a < b; });
  • 返回数组中从startpos开始到endpos-1的所有元素（如果endpos是负数，则是到数组中的倒数第几个元素）：arr1.slice(startpos, endpos);

JS offset

• JS中的offset用于方便的获取元素尺寸
• offsetWidth和offsetHeight：
  • DOM对象的这两个属性，可以检测元素所占位置的宽高
  • 这里的宽高包括宽高本身和padding、边框，但不包括margin
  • offsetWidth和offsetHeight的返回值是number类型，没有px单位
• offsetLeft和offsetTop：
  • DOM对象的这两个属性，可以检测元素距离父容器边界的距离
  • 这里的父容器必须是具有position属性的容器，如果直系父容器没有position属性，则找爷爷容器
  • 如果所有父容器都没有position属性，则返回与body边界的距离
  • offsetLeft和offsetTop只包括父容器的padding，不包括父容器的边框和margin
  • offsetLeft和offsetTop的返回值是number类型，没有px单位
• offsetParent：
  • 返回距离该元素最近的，有position属性的父容器对象
  • 这里的position属性可以是relative、absolute、fixed，但不可以是static
  • 如果该元素上层的所有父容器都没有设置position属性，则返回body对象

JS 动画

• 闪现动画：直接设置元素的位置即可
• 匀速动画：设置定时器，每隔一定时间移动一定的位置

  btn.onclick = function() {
      setInterval(function() {
          div.style.left = div.offsetLeft + 5 + "px";
      }, 100);
  }
  

• 变速动画：
  • 变速动画，就是一个开始时运动快，运动过程中越来越慢的动画效果
  • 变速动画的优点：有非常逼真的动画效果，实现的动画效果更加细腻
  • 变速动画的缺点：如果不清除定时器，则会一直运行下去
  • 变速动画原理：盒子位置 = 盒子本身位置 + (目标位置 - 盒子本身位置) / 10
  • 变速动画实现代码：

    var timer = null;
    btn.onclick = function() {
    	timer = setInterval(function() {
    		div.style.left = div.offsetLeft + Math.ceil((400 - div.offsetLeft) / 10) + 'px';
    		console.log(1);
    		if(Math.abs(div.offsetLeft) === 400) {
    			clearInterval(timer);
    		}
    	}, 30);
    };
    

JS HTML基本结构获取方法

• 文档标题title：document.title
• 所有HTML：document.documentElement
• 文档头标签head：document.head
• 文档内容body：document.body

JS JSON

• JSON定义：var json = {'param1':'aaa', 'param2':123, ...};
• JSON数据的遍历，代码如下：

  for(var k in json) {
      console.log(k);       // 属性
      console.log(json[k]); // 属性值
  }
  

JS scroll

• scrollWidth和scrollHeight：
  • DOM对象的这两个属性，可以检测元素内容的宽高
  • 这里的宽高包括对象本身的宽高和padding值，不包括margin和border
  • 如果内容超出对象，则以内容为准；否则以对象本身为准
• scrollLeft和scrollTop：
  • DOM对象的这两个属性，可以获取网页被卷去的头部的像素大小
  • 由于这两个方法有浏览器兼容问题，获取的时候需要考虑兼容，代码如下：

    console.log(document.body.scrollTop || document.documentElement.scrollTop);
    // 也可以按下面的方法写
    console.log(document.body.scrollTop + document.documentElement.scrollTop);
    // 也可以按下面的方法写
    console.log(window.pageYOffset);
    

  • 当前的主流写法：

    console.log(window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop);
    

• 通过代码设置页面滚动到某个坐标值：window.scrollTo(x, y);
• 监听页面的滚动事件：window.onscroll = function() {};

JS 事件对象Event

• 如果事件函数中没有参数，系统默认会提供一个event参数，代码如下：

  div.onclick = function() {
      console.log(event); // event有值
  }
  

• 如果带了参数且参数不为event，则event仍可用，但有些浏览器不支持这个函数参数
• 如果带了参数且参数为event，则有些浏览器不会再识别event，如IE浏览器
• 针对上面的问题，需要有一个兼容的写法，代码如下：

  div.onclick = function(event) {
      event = event || window.event;
      console.log(event);
  }
  

• event属性：
  • event.target：触发事件的对象
  • event.type：事件的类型（click）
  • event.button：获取事件是鼠标的哪个按钮被点击（左键0，滑轮1）
  • event.pageX：光标相对于该网页顶部的水平位置（IE不支持该属性）
  • event.pageY：光标相对于该网页左边的垂直位置（IE不支持该属性）
  • event.screenX：光标相对于屏幕顶端的水平位置
  • event.screenY：光标相对于屏幕左端的垂直位置
  • event.clientX：光标相对于该网页可见区域的水平位置
  • event.clientY：光标相对于该网页可见区域的垂直位置
• event事件冒泡机制：
  • 当一个盒子触发一个事件之后，会将这个事件依次传递给它的父盒子、父父盒子......
  • 注意：一个事件只能触发同类事件，如onclick只能触发onclick
  • 也就是说，当点击一个盒子之后，会依次触发其父盒子的onclick、其父父盒子的onclick......（如果这些盒子都有onclick事件的话）
  • 事件冒泡的顺序：div -> body -> html -> document -> window
  • 以下事件不冒泡：onmouseenter、onmouseleave、onload、onunload、onfocus、onblur
  • 阻止冒泡的代码：

    if (event || event.stopPropagation) {
        event.stopPropagation();
    } else {
        event.cancelBubble = true;
    }
    

• event事件传播的三个阶段：
  • 捕获阶段：事件从DOM树顶层向下查找，直到捕获到事件源
  • 冒泡阶段：事件依次向上冒泡
  • 目标阶段：事件依次执行

JS client

• clientWidth和clientHeight：
  • DOM对象的这两个属性，用于获取网页可视区域的宽高
  • 不同对象的这两个属性，拥有不同的意义
  • 如果调用这两个属性的是一个盒子，则表示这个盒子的宽高
  • 如果调用这两个属性的是body/html，则表示网页可视区域的宽高
• clientX和clientY：这两个属性仅用于事件中获取鼠标位置
• clientTop和clientLeft：
  • clientWidth = width + padding
  • clientHeight = height + padding

JS 三大家族总结

• 三大家族包括：offset、scroll、client
• offsetWidth/height = width/height + padding * 2 + border * 2
• scrollWidth/height = width/height

  if(window.pageYOffset !== undefined){
      return {
          "top": window.pageYOffset,
          "left": window.pageXOffset
      };
  }else if(document.compatMode === "CSS1Compat"){
      return {
          "top": document.documentElement.scrollTop,
          "left": document.documentElement.scrollLeft
      };
  }else{
      return {
          "top": document.body.scrollTop,
          "left": document.body.scrollLeft
      };
  }
  

• clientWidth/height = width/height + padding * 2

  if(window.innerHeight !== undefined){
      return {
          "width": window.innerWidth,
          "height": window.innerHeight
      }
  }else if(document.compatMode === "CSS1Compat"){
      return {
          "width": document.documentElement.clientWidth,
          "height": document.documentElement.clientHeight
      }
  }else{
      return {
          "width": document.body.clientWidth,
          "height": document.body.clientHeight
      }
  }
  

• offsetTop/offsetLeft：
  • 调用者：任意元素
  • 作用：距离父系盒子中有定位的（有position属性的）父盒子的距离
• scrollTop/scrollLeft：
  • 调用者：document.body
  • 作用：被浏览器卷去的网页上边和左边的内容宽高
• clientX/clientY：
  • 调用者：事件event
  • 作用：鼠标距离浏览器可视区域边界的距离