JavaScript系列教程(一)

目录:1:var、let、const区别;2:JS事件捕获与冒泡;3:cookie、sessionStorage、localStorage、session。

 

一、var、let、const区别

var:没有块的概念,可以跨块访问,不能跨函数访问

let:只能在块作用域里访问,不能跨块访问,也不能跨函数访问

const:定义常量,只能在块作用域里访问,而且不能修改

补充:const定义的对象属性是否可以改变,答案是可以的,因为对象是引用类型,const仅保证指针不发生改变,修改对象的属性不会改变对象的指针,是被允许的。

{var i = 100;}
console.log(i) // 9

{let i = 100;}
console.log(i) // i is not defined

1.1、let 配合for循环的独特应用

  js中for循环体比较特殊,每次执行都是一个全新的独立的块作用域,let声明的变量传入到for循环体的作用域后,不会发生改变,不受外界影响。如下:

 补充:需要更好的理解下面代码需要理解微任务和宏任务(后续再做分析)
{
    let i = 0;
    setTimeout(function(){console.log(i)},100)  // i = 0
}
{
    let i = 1;
    setTimeout(function(){console.log(i)},100)  // i  =1
}
{
    let i = 2;
    setTimeout(function(){console.log(i)},100)  // i = 2
}

  而用var声明的变量,因为var变量在块中并没有作用域约束,所以就是定义全局变量i,而重复声明一个同名变量,后面声明覆盖前面声明,所以最后i = 2,最后打印的访问的变量在局部找不到就向上级查找,找到全局变量i,均为2;

{
  var i = 0;
  setTimeout(function(){console.log(i)},100) // i = 2
}
{
  var i = 1;
  setTimeout(function(){console.log(i)},100) // i = 2
}
{
  var i = 2;
  setTimeout(function(){console.log(i)},100) // i = 2
}

 

二、JS事件捕获与冒泡

    事件冒泡:事件冒泡会从当前触发的事件一级一级往上传递,依次触发,直到document为止。

  事件捕获:事件捕获会从document开始触发,一级一级往下传递,依次触发,直到真正事件目标未知。

  如:我们创建三个div,每个div添加点击事件(利用事件监听添加点击事件,第三个参数是布尔值,默认false,false是事件冒泡,true是事件捕获)。

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <style media="screen">
    #box1 { width: 300px; height: 300px; background: blueviolet; }
    #box2 { width: 200px; height: 200px; background: aquamarine; }
    #box3 { width: 100px; height: 100px; background: tomato; }
    div { overflow: hidden; margin: 50px auto; }
  </style>
  <body>
    <div id="box1">
        <div id="box2">
            <div id="box3"></div>
        </div>
    </div>
  </body>
  <script type="text/javascript">
    function sayBox3(event) {
      console.log(‘你点了最里面的box‘);
    }
    function sayBox2() {
      // console.log(event)
      // event.stopPropagation();
      console.log(‘你点了最中间的box‘);
    }
    function sayBox1() {
        console.log(‘你点了最外面的box‘);
    }
    // 事件监听,第三个参数是布尔值,默认false,false是事件冒泡,true是事件捕获 结果为: 你点了最里面的box 你点了最中间的box 你点了最外面的box
   document.getElementById(‘box3‘).addEventListener(‘click‘, sayBox3, false);
   document.getElementById(‘box2‘).addEventListener(‘click‘, sayBox2, false);
   document.getElementById(‘box1‘).addEventListener(‘click‘, sayBox1, false);

  </script>
</html>

  当我们点击最里面的dom时依次输出:你点了最里面的box -- 你点了最中间的box  -- 你点了最外面的box

    当我们点击中间的div时依次输出:你点了最中间的box  --  你点了最外面的box

    由此可以得出:事件冒泡会从当前触发的事件目标一级一级往上传递,依次触发,直到document为止。

    此时如果我们将参数改为true时:打印的结果依次为:你点了最外面的box  -- 你点了最中间的box  --  你点了最里面的box

    由此可以得出:事件捕获会从document开始触发,一级一级往下传递,依次触发,直到真正事件目标为止。

    2.1、阻止冒泡

  假设我想点最里面的box,但是绑定在中间及最外的box上的事件不去触发,这里就需要用到的阻止冒泡

  具体只要修改sayBox3代码如下:此时只会打印  你点了最里面的box

function sayBox3(event) {
  event.stopPropagation();
  console.log(‘你点了最里面的box‘);
}

   2.2、事件委托

  事件委托其实就是,通过监听一个父元素,来给不同的子元素绑定事件,减少监听次数,从而提升速度。

  实现原理:采用事件委托,只给ul绑定一个事件,根据事件冒泡的规则,只要你点了ul里的每一个li,都会触发ul的绑定事件,我们在ul绑定事件的函数里通过一些判断实现想要的事情

function clickLi() {
    alert(‘你点击了li‘);
}
document.getElementById(‘isUl‘).addEventListener(‘click‘, function(event) {
    // 每一个函数内都有一个event事件对象,它有一个target属性,指向事件源
    var src = event.target;
    // 我们判断如果target事件源的节点名字是li,那就执行这个函数
    // target里面的属性是非常多的,id名、class名、节点名等等都可以取到
    if(src.nodeName.toLowerCase() == ‘li‘) {
       clickLi() ;
    }
});

 

三、cookie、sessionStorage、localStorage、session

4.1、cookie

问题:打开一个京东的网站,在没有登录的情况下,添加商品到购物车,关闭浏览器重新打开后,购物车是否有数据?

解释:说明数据存放在我的客户端这台机器的硬盘上。

技术:Cookie (网络会话状态跟踪的技术) 

  会话是由一组请求和响应组成,是围绕着一件相关事情所进行的请求和响应。所以这些请求和响应之间一定是需要有数据传递的,即是需要进行会话状态跟踪的。

  然而http协议是一种无状态协议,在不同的请求间是无法进行数据传递的,此时就需要一种可以进行请求间数据传递的会话跟踪技术,而cookie就是一种这样的技术。

Cookie是由服务器生成,保存在客户端的一种信息载体。这个载体中存放着用户访问该站点的会话状态信息,用户在提交第一次请求后,由服务器生成cookie,并将其封装到响应头中,

以响应的形式发送给客户端。客户端接收这个到这个响应后,将Cookie保存到客户端。当客户端再次发送同类请求后,在请求中会携带保存在客户端的cookie数据,发送到服务的,

有服务器对会话进行跟踪。Cookie由若干键值对构成

4.2、session

当服务器收到请求需要创建session对象时,首先会检查客户端请求中是否包含sessionid。如果有sessionid,服务器将根据该id返回对应session对象。

如果客户端请求中没有sessionid,服务器会创建新的session对象,并把sessionid在本次响应中返回给客户端。

通常使用cookie方式存储sessionid到客户端,在交互中浏览器按照规则将sessionid发送给服务器。

4.3、sessionStorage

用于临时保存同一窗口(或标签页)的数据,在关闭窗口或标签页之后将会删除这些数据。

各个标签页的sessionStorage 是独立的 。

在a标签页写入修改删除sessionStorage ,不会影响到已经打开的标签页中的sessionStorage 。

通过a标签,window.open,window.location,windows.history ,右键复制 等方式在新标签页,本页,iframe ,新窗口中打开新页面,当前标签页的 sessionStorage 会传递到新页面。

通过按住 ctrl键打开新标签页,或者右键菜单打开新标签页,新窗口 ,当前标签页的 sessionStorage 是不会传递到新页面的 。

4.4、localStorage

用于持久化的本地存储,除非主动删除数据,否则数据是永远不会过期的。

 

JavaScript系列教程(一)

上一篇:理解异步函数(async await;Promise)


下一篇:SpringFramework-Core-1.3 Bean 概述