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, 那么永远都是rejected5.监听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，那么你也会用Zepto2.既然和jQuery差不多, 为什么还需要Zepto?
2.1jQuery更多是在PC端被应用，Zepto更多是在移动端被应用；也正是因为jQuery用在PC端, 所以jQuery考虑了很多低级浏览器的的兼容性问题, ,所以代码更多体积更大；也正是因为Zepto用在移动端, 所以Zepto则是直接抛弃了低级浏览器的适配问题 , 所以代码更少体积更小；
2.2综上所述: Zepto其实就是专门用于移动端的轻量级的jQuery3.官方网址:
英文版：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="data:images/img1.jpg" alt=""></li><li class="swiper-slide"><img src="data:images/img2.jpg" alt=""></li><li class="swiper-slide"><img src="data:images/img3.jpg" alt=""></li><li class="swiper-slide"><img src="data: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.css2.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更加强大, 企业中使用频率更高, 所以重点掌握swiper2.wow.js使用2.1引入animate.css2.2引入wow.js2.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

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

从零玩转HTML5+CSS3项目实战-跟着李南江学编程
从零玩转HTML5+CSS3项目实战-跟着李南江学编程 1.CSS高级应用 1.边框圆角的基本使用 1.1什么是边框圆角:将直角的边框变为圆角的边框 1.2边框圆角的格式:border-radius: ...
前端基础1 - 跟着李南江学编程
前端基础1 - 跟着李南江学编程基础语法: ` Title <div> <dl> <dt> <a href="text.html"> ...
Bootstrap - 跟着李南江学编程
Bootstrap Bootstrap 是全球最受欢迎的前端组件库,用于开发响应式布局.移动设备优先的 WEB 项目. Bootstrap 是一个用于 HTML.CSS 和 JS 开发的开源工具包.利 ...
Kinect SDK v1.7 新特性、交互框架与新概念
Kinect SDK v1.7 新特性.交互框架与新概念 zouxy09@qq.com http://blog.csdn.net/zouxy09 2013年3月18日,微软Kinect for Win ...
【深度学习】ResNet残差网络 ResidualBlock残差块实现(pytorch) | 跟着李沐学AI笔记 | ResNet18进行猫狗分类
文章目录前言一.卷积的相关计算公式(复习) 二.残差块ResidualBlock复现(pytorch) 三.残差网络ResNet18复现(pytorch) 四.直接调用方法五.具体实践(ResN ...
动手学深度学习在线课程-跟着李沐学AI
动手学深度学习在线课程-跟着李沐学AI http://courses.d2l.ai/zh-v2/ 李宏毅<机器学习>中文课程(2022) https://hub.baai.ac.cn/vi ...
Object.observe() js新特性
Object.observe() 用来实时监测js中对象的变化,变化时调用一个方法.使用此方法,可以代替angular中的脏检查,可以大大的提高性能,详情可以看下文. [翻译]Object.obser ...
什么是Vue.js？||为什么要学习流行框架||框架和库的区别？||MVC和MVVM的关系图解
什么是Vue.js? Vue.js 是目前最火的一个前端框架,React是最流行的一个前端框架(React除了开发网站,还可以开发手机App, Vue语法也是可以用于进行手机App开发的,需要借助于W ...
30分钟学会js新特性
JavaScript新特性准备工作安装node和nodemon 12.16.3版本的node已经逐渐支持es2015以上的新特性 nodemon的作用是监听文件代码的变动,自动重启下载方式 cn ...
Spring 4.x框架中的新特性---Spring4.0框架的新功能和改善
2004年Spring框架首次发布,然后陆续发布了一些重要的版本:Spring2.0提供XML命名空间和AspectJ的支持:Spring2.5包含了注释驱动配置:Spring3.0在框架基础代码中引 ...

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

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

最新文章

热门文章