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?