JS新特性和流行框架 - 跟着李南江学编程

1.什么是SessionStorage和LocalStorage
和Cookie一样, SessionStorage和LocalStorage也是用于存储网页中的数据的

2.Cookie、 SessionStorage、LocalStorage区别
2.1生命周期(同一浏览器下)
Cookie生命周期:         默认是关闭浏览器后失效, 但是也可以设置过期时间
SessionStorage生命周期: 仅在当前会话(窗口)下有效，关闭窗口或浏览器后被清除, 不能设置过期时间
LocalStorage生命周期:   除非被清除，否则永久保存

2.2容量
Cookie容量:         有大小(4KB左右)和个数(20~50)限制
SessionStorage容量: 有大小限制(5M左右) http://dev-test.nemikor.com/web-storage/support-test/
LocalStorage容量:   有大小限制(5M左右) http://dev-test.nemikor.com/web-storage/support-test/

2.3网络请求
Cookie网络请求:         每次都会携带在HTTP头中，如果使用cookie保存过多数据会带来性能问题
SessionStorage网络请求: 仅在浏览器中保存，不参与和服务器的通信
LocalStorage网络请求:   仅在浏览器中保存，不参与和服务器的通信

3.Cookie、 SessionStorage、LocalStorage应用场景
Cookie:         判断用户是否登录
LocalStorage:   购物车
sessionStorage: 表单数据

4.注意点:
无论通过以上那种方式存储的数据, 切记不能将敏感数据直接存储到本地

1.什么是JSONP?
JSONP让网页从别的地址（跨域的地址）那获取资料，即跨域读取数据

2.JSONP实现跨域访问的原理
2.1在同一界面中可以定义多个script标签
2.2同一个界面中多个script标签中的数据可以相互访问
2.3可以通过script的src属性导入其它资源
2.4通过src属性导入其它资源的本质就是将资源拷贝到script标签中
2.5script的src属性不仅能导入本地资源, 还能导入远程资源
2.6由于script的src属性没有同源限制, 所以可以通过script的src属性来请求跨域数据

1.JS是单线程的
所以JS中的代码都是串行的, 前面没有执行完毕后面不能执行

2.同步代码和异步代码
除了"事件绑定的函数"和"回调函数"以外的都是同步代码

2.1程序运行会从上至下依次执行所有的同步代码
2.2在执行的过程中如果遇到异步代码会将异步代码放到事件循环中
2.3当所有同步代码都执行完毕后, JS会不断检测 事件循环中的异步代码是否满足条件
2.4一旦满足条件就执行满足条件的异步代码

2.为什么JS是单线程的?
avaScript的单线程，与它的用途有关。
作为浏览器脚本语言，JavaScript的主要用途是与用户互动，以及操作DOM。
这决定了它只能是单线程，否则会带来很复杂的同步问题。

例如: 如果JS是多线程的
现在有一个线程要修改元素中的内容, 一个线程要删除该元素, 这时浏览器应该以哪个线程为准？

1.什么是promise?
promise是ES6中新增的异步编程解决方案, 在代码中的表现是一个对象


 需求: 从网络上加载3个资源, 要求加载完资源1才能加载资源2, 加载完资源2才能加载资源3
  前面任何一个资源加载失败, 后续资源都不加载

2.promise作用
企业开发中为了保存异步代码的执行顺序, 那么就会出现回调函数层层嵌套
如果回调函数嵌套的层数太多, 就会导致代码的阅读性, 可维护性大大降低
promise对象可以将异步操作以同步流程来表示, 避免了回调函数层层嵌套(回调地狱)

1.什么是Promise?
Promise是ES6中新增的一个对象,
通过Promise就可以实现 用同步的流程来表示异步的操作
通过Promise就可以 避免回调函数层层嵌套(回调地狱)问题

2.如何创建Promise对象?
new Promise(function(resolve, reject){});
promise对象不是异步的, 只要创建promise对象就会立即执行存放的代码

3.Promise是如何实现 通过同步的流程来表示异步的操作的?
promise对象是通过状态的改变来实现的, 只要状态发生改变就会自动触发对应的函数

4.Promise对象三种状态
pending:   默认状态，只要没有告诉promise任务是成功还是失败就是pending状态
fulfilled(resolved): 只要调用resolve函数, 状态就会变为fulfilled, 表示操作成功
rejected:  只要调用rejected函数, 状态就会变为rejected, 表示操作失败
注意点: 状态一旦改变既不可逆, 既从pending变为fulfilled, 那么永远都是fulfilled
                              既从pending变为rejected, 那么永远都是rejected

5.监听Promise状态改变
我们还可以通过函数来监听状态的变化
resolved --> then()
rejected --> catch()

// console.log("1");
let promise = new Promise(function (resolve, reject) {
    console.log("2");
    reject();
    // resolve();
});
// console.log("3");
// console.log(promise);
promise.then(function () {
    console.log("then");
});
promise.catch(function () {
    console.log("catch");
});

1.JS中的异常
简单粗暴就是有错误出现
由于JS是单线程的, 编写的代码都是串行的,
所以一旦前面代码出现错误,程序就会被中断, 后续代码就不会被执行

2.JS中的异常处理
2.1自身编写代码问题, --> 手动修复BUG
2.2外界原因问题, --> try{}catch{}
对于一些可预见的异常, 我们可以使用try{}catch{}来处理,

3.JS中如何进行异常处理
利用try{}catch{}来处理异常可以保证程序不被中断, 也可以记录错误原因以便于后续优化迭代更新
try {
    可能遇到的意外的代码
}
catch(e) {
    捕获错误的代码块
}
* */
// function say(){
//     console.log("say");
// }
console.log("1");
try {
    say();
}catch (e) {
    console.log(e);
}
console.log("2");

1. Zepto?
Zepto 是一个轻量级的针对现代高级浏览器的 JavaScript库，
它与jQuery有着类似的api, 如果你会用jQuery，那么你也会用Zepto

2.既然和jQuery差不多, 为什么还需要Zepto?
2.1jQuery更多是在PC端被应用，Zepto更多是在移动端被应用；
   也正是因为jQuery用在PC端, 所以jQuery考虑了很多低级浏览器的的兼容性问题, ,所以代码更多体积更大；
   也正是因为Zepto用在移动端, 所以Zepto则是直接抛弃了低级浏览器的适配问题 , 所以代码更少体积更小；
2.2综上所述: Zepto其实就是专门用于移动端的轻量级的jQuery

3.官方网址:
英文版：http://zeptojs.com/
中文版：http://www.css88.com/doc/zeptojs_api/
/*
let oBtn = document.querySelector("button");
oBtn.onclick = function () {
    $("div").css({backgroundColor: "red"});
}
*/

4.Zepto的特点
Zepto采用了模块化的开发, 将不同的功能放到了不同的模块中,
在使用的过程中我们可以按需导入, 也就是需要什么功能就导入什么模块
/*
$("button").click(function () {
    $("div").css({backgroundColor: "red"});
});
/*
5.Zepto注意点
如果是从官方网站下载的, 那么已经包含了默认的一些模块
如果是从github下载的, 那么需要我们自己手动导入每一个模块
当然后续学习了NodeJS后, 我们也可以自己定制

1.Zepto选择器
Zepto是模块化开发的, zepto.js核心模块中只包含了基础功能
如果想使用高级的选择器必须引入高级选择器模块
$("button").click(function () {
    // $("div").css({backgroundColor: "yellow"});
    // $(".one").css({backgroundColor: "yellow"});
    // $("#two").css({backgroundColor: "yellow"});
    $("div:first").css({backgroundColor: "yellow"});
});

1.zepto动画
Zepto是模块化开发的, zepto.js核心模块中只包含了基础功能
如果想使用动画必须引入动画模块
2.zepto动画注意点
由于zepto是一个轻量级的针对现代高级浏览器的 JavaScript库
不需要兼容低级浏览器, 所以zepto中的动画是通过CSS3属性来实现动画的
而jQuery中是通过DOM来实现动画的
$("button").click(function () {
    // $("div").animate({marginLeft: 500}, 2000);
    // $("div").hide(2000);
    // $("div").show(2000);
    $("div").toggle(2000);
});

1.无论PC端还是移动端都支持click事件
而且不仅仅是jQuery和Zepto支持, 原生的JS也支持
let oDiv = document.querySelector("div");
oDiv.onclick = function () {
    console.log("被点击了");
}

$("div").click(function () {
    console.log("被点击了");
});
2.移动端click事件注意点
在企业开发中如果需要在移动端监听点击事件, 一般不会使用click来监听
因为移动端的事件很多(单击/双击/轻扫/捏合/拖拽等等)
所以如果通过click来监听,系统需要花费100~300毫秒判断到底是什么事件
而移动端对事件的响应速度要求很高, 事件响应越快用户体验就越好
所以如果需要在移动端监听点击事件, 那么请使用tap事件
3.tap事件
tap事件是Zepto自己封装的一个事件, 解决了原生click事件100~300毫秒的延迟问题
$("div").tap(function () {
    console.log("被点击了");
});

1.Zepto是如何实现tap事件的?
虽然tap事件是Zepto自己封装的事件, 但是无论如何封装肯定都是通过原生JS来实现的
在原生的JS中专门为移动端新增了几个事件
touchstart: 手指按下
touchmove:  手指在元素上移动
touchend :  手指抬起

2.注意点:
这几个事件只支持移动端, 不支持PC端
let oDiv = document.querySelector("div");
oDiv.ontouchstart = function () {
    console.log("手指按下");
}
oDiv.ontouchend = function () {
    console.log("手指抬起");
}
oDiv.ontouchmove = function () {
    console.log("手指移动");
}

  1.Touch事件对象
    移动端的touch事件也是一个事件, 所以被触发的时候系统也会自动传递一个事件对象给我们

    2.移动端touch事件对象中比较重要的三个子对象
    touches:        当前屏幕上所有手指的列表
    targetTouches:  保存了元素上所有的手指里列表
    changedTouches: 当前屏幕上刚刚接触的手指或者离开的手指
    /*
    let oDiv1 = document.querySelector(".box1");
    oDiv1.ontouchstart = function (event) {
        console.log("touches1", event.touches);
        console.log("targetTouches1", event.targetTouches);
    }
    let oDiv2 = document.querySelector(".box2");
    oDiv2.ontouchstart = function (event) {
        console.log("touches2", event.touches);
        console.log("targetTouches2", event.targetTouches);
    }
    */
    /*
    let oDiv1 = document.querySelector(".box1");
    oDiv1.ontouchstart = function (event) {
        // console.log("touches1", event.touches);
        console.log("targetTouches1", event.targetTouches);
    }
    oDiv1.ontouchend = function (event) {
        // console.log("touches1", event.touches);
        console.log("targetTouches1", event.targetTouches);
    }
    */
    let oDiv1 = document.querySelector(".box1");
    oDiv1.ontouchstart = function (event) {
        console.log("按下", event.changedTouches);
    }
    oDiv1.ontouchend = function (event) {
        console.log("抬起", event.changedTouches);
    }
    /*
    touches和targetTouches
    如果都是将手指按到了同一个元素上, 那么这两个对象中保存的内容是一样的
    如果是将手指按到了不同的元素上, 那么这个两个对象中保存的内容不一样
    touches保存的是所有元素中的手指, 而targetTouches保存的是当前元素中的手指

    changedTouches
    在ontouchstart中保存的是刚刚新增的手指
    在ontouchend中保存的是刚刚离开的手指
    * */

1.移动端点透问题
当一个元素放覆盖了另一个元素, 覆盖的元素监听touch事件,而下面的元素监听click事件
并且touch事件触发后覆盖的元素就消失了, 那么就会出现点透问题

2.移动端点透问题出现的原因
2.1当手指触摸到屏幕的时候，系统生成两个事件，一个是touch 一个是click
2.2touch事件先执行,执行完后从文档上消失
2.3click事件有100~300ms延迟, 所以后执行.
2.4但click事件执行的时候触发的元素已经消失了, 对应的位置现在是下面的元素, 所以就触发了下面元素的click事件

3.移动端点透问题解决方案
在touch事件中添加event.preverDefault(); 阻止事件扩散
let oClick = document.querySelector(".click");
let oTap = document.querySelector(".tap");

oTap.ontouchstart = function (event) {
    this.style.display = "none";
    event.preventDefault(); //  阻止事件扩散
}
oClick.onclick = function () {
    console.log("click");
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>04-侧边栏菜单</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            touch-action: none;
        }
        html,body{
            width: 100%;
            height: 100%;
        }
        .box{
            width: 85px;
            height: 100%;
            border: 1px solid #000;
        }
        .box>ul{
            list-style: none;
            width: 100%;
            position: relative;
        }
        .box>ul>li{
            width: 100%;
            height: 40px;
            line-height: 40px;
            text-align: center;
            border-bottom: 1px solid #666;
        }
        .box>ul>li:last-child{
            border-bottom: none;
        }
    </style>
    <script src="js/iscroll.js"></script>

</head>
<body>
<div class="box">
    <ul>
        <li>热门推荐</li>
        <li>指趣学院</li>
        <li>手机数码</li>
        <li>家用电脑</li>
        <li>电脑办公</li>
        <li>计生情趣</li>
        <li>美妆护肤</li>
        <li>个护清洁</li>
        <li>汽车用品</li>
        <li>京东超市</li>
        <li>男装</li>
        <li>男鞋</li>
        <li>女装</li>
        <li>女鞋</li>
        <li>母婴童装</li>
        <li>图书音像</li>
        <li>运动户外</li>
        <li>内衣配饰</li>
        <li>食品生鲜</li>
        <li>酒水饮料</li>
        <li>家具家装</li>
        <li>箱包手袋</li>
        <li>钟表珠宝</li>
        <li>玩具乐器</li>
        <li>医疗保健</li>
        <li>宠物生活</li>
        <li>礼品鲜花</li>
        <li>生活旅行</li>
        <li>奢侈品</li>
        <li>艺术邮币</li>
        <li>二手商品</li>
    </ul>
</div>
<script>
    new IScroll(".box");
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>04-移动端轮播图</title>
    <link rel="stylesheet" href="css/swiper.css">
    <script src="js/swiper.js"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
            touch-action: none;
        }
        div{
            width: 100%;
        }
        ul{
            list-style: none;
        }
        ul>li>img{
            width: 100%;
            vertical-align: bottom;
        }
        .my-bullet{
            display: inline-block;
            width: 20px;
            height: 20px;
            background: #fff;
            border-radius: 50%;
            margin: 0 5px;
        }
        .my-bullet-active{
            background: #f40;
            opacity: 1;
        }
        .swiper-button-prev, .swiper-button-next{
            width: 30px;
            height: 50px;
            background: rgba(0,0,0,0.3);
        }
        .swiper-button-prev::before{
            content: "<";
            display: inline-block;
            width: 30px;
            height: 50px;
            line-height: 50px;
            text-align: center;
            font-weight: bold;
            font-size: 30px;
            color: #fff;
        }
        .swiper-button-next::before{
            content: ">";
            display: inline-block;
            width: 30px;
            height: 50px;
            line-height: 50px;
            text-align: center;
            font-weight: bold;
            font-size: 30px;
            color: #fff;
        }
    </style>
</head>
<body>
<div class="swiper-container">
    <ul class="swiper-wrapper">
        <li class="swiper-slide"><img src="images/img1.jpg" alt=""></li>
        <li class="swiper-slide"><img src="images/img2.jpg" alt=""></li>
        <li class="swiper-slide"><img src="images/img3.jpg" alt=""></li>
        <li class="swiper-slide"><img src="images/img4.jpg" alt=""></li>
    </ul>
    <!-- 如果需要分页器 -->
    <div class="swiper-pagination"></div>
    <!-- 如果需要导航按钮 -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
</div>
<script>
    let mySwiper = new Swiper ('.swiper-container', {
        // 如果需要分页器
        pagination: {
            el: '.swiper-pagination',
            bulletClass : 'my-bullet',
            bulletActiveClass: 'my-bullet-active',
        },
        // 如果需要前进后退按钮
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
        loop: true, // 循环模式选项
        autoplay: {
            delay: 2000,
        },
    });
</script>
</body>
</html>





        1.什么是Animate.css?
        其实swiper-animate就是参考Animate.css演变出来的一个插件,
        Animate.css和swiper-animate一样都是用于快速添加动画的,
        所以会用swiper-animate就会用Animate.css

        2.Animate.css的使用:
        2.1引入animate.css的文件
        2.2给需要执行动画的元素添加类名


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>02-WOWJS使用</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 400px;
            height: 200px;
            border: 1px solid #000;
            margin: 100px auto;
        }
        .box1{
            width: 200px;
            height: 200px;
            background: red;
            float: left;
        }
        .box2{
            width: 200px;
            height: 200px;
            background: blue;
            float: right;
        }
    </style>
    <link rel="stylesheet" href="css/animate.css">
    <script src="js/wow.js"></script>
</head>
<body>
<div class="box">
    <!--
    wow这个类名是一个基类, 如果想通过wow.js添加动画, 那么就必须写上这个基类
    这里的slideInLeft就是Animate.css中的动画名称, 只要是Animate.css中的动画再wow.js中都可以使用
    -->
    <div class="box1 wow slideInLeft" data-wow-duration="5s"></div>
    <div class="box2 wow slideInRight" data-wow-delay="5s" data-wow-iteration="2"></div>
</div>
<script>
    /*
    1.什么是WOW.js?
    WOW.js是对animate.css的扩充, 让页面滚动更有趣
    通过WOW.js，可以在页面滚动的过程中逐渐释放动画效果。
    简单点理解: (wow.js + animate.css) 约等于  (swiper.js + swiper.animate.css)
    只不过swiper更加强大, 企业中使用频率更高, 所以重点掌握swiper

    2.wow.js使用
    2.1引入animate.css
    2.2引入wow.js
    2.3给需要执行动画的元素添加类名
    2.4在JavaScript中初始化wow.js
     */
    new WOW().init();
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>01-Canvas开篇</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        canvas{
            background: red;
        }
    </style>
</head>
<body>
<!--1.在body中创建一个canvas标签-->
<!--
注意点
canvas标签有默认的宽度和高度
默认的宽度是300px
默认的高度是150px
-->
<canvas></canvas>
<script>
    /*
    1.什么是Canvas？
    Canvas是H5新增的一个标签, 我们可以通过JS在这个标签上绘制各种图案
    Canvas 拥有多种绘制路径、矩形、圆形、字符以及图片的方法。
    * */
    // 2.通过js代码拿到canvas标签
    let oCanvas = document.querySelector("canvas");
    // 3.从canvas标签中获取到绘图工具
    let oCtx = oCanvas.getContext("2d");
    // 4.通过绘图工具在canvas标签上绘制图形
    // 4.1设置路径的起点
    oCtx.moveTo(50, 50);
    // 4.2设置路径的终点
    oCtx.lineTo(200, 50);
    // 4.3告诉canvas将这些点连接起来
    oCtx.stroke();
</script>
</body>
</html>
					

我正在跟着江哥学编程, 更多前端+区块链课程: www.it666.com