一个页面: 头部、用户信息、新闻列表
jquery ajax:
1、
$.ajax({
url:'',
dataType:'json',
}).then(res=>{
//res : 成功后的返回
},err=>{
//err: 失败的对象
});
2、
let url = '';
$.ajax({
url,
data:
dataType:
...
success:function(res){
//res 成功后的数据
},
error(err){
//err 失败的对象信息
}
});
实现 : 头部,用户,新闻 三块功能
方法一:
$.ajax({url:'头部数据接口地址',success(res){用res来渲染头部页面}});
$.ajax({url:'用户数据接口地址',success(res){用res来渲染用户部分页面}});
$.ajax({url:'新闻数据接口地址',success(res){用res来渲染新闻部分页面}});
要求:等三部分数据都返回后,做点事情,打印三次请求的结果。
$.ajax({
url:'头部',
success(res){
//res
$.ajax({
url:'用户',
success(res){
//头部和用户都成功
$.ajax({
url:'新闻'
success(){
//三次都成功
}
});
}
});
}
});
==========================
以上,程序员 回调函数 —— 恶梦
直到 2015 年,ES6 出来了 —— Promise
Promise: —— 承诺、保证
多个异步请求全部完成后,要做的事情 —— 通过 Promise 来解决。
一、基本用法
let p1 = new Promise(function(resolve,reject){
$.ajax({
url:'',
data:
dataType:
...
success(res){
以前在这里直接处理res
现在不直接处理,要如下
resolve(res);
},
error(err){
reject(err);
}
});
});
p1.then(res=>{
//在这里处理成功的结果
},err=>{});
二、真正用法
Promise.all([Promise对象1,Promise对象2,...]).then(function(arr){
//说明,所有的请求都成功了
//arr[0] ——> 请求1的结果
//arr[1] ——> 请求2的结果
...
},function(err){
//只要有一个失败
});
三、封装
function creactPromise(url){
return new Promise(function(resolve,reject){
$.ajax....
});
}
四、jquery 的 ajax
let r =$.ajax({
.....
});
// r ——> 就是一个 Promise对象
$.ajax({}).then(res=>{},err=>{});
Promse.all([
$.ajax({}),
$.ajax({}),
$.ajax({})
...
]).then(arr=>{
//arr 对应多个请求的结果
},err=>{});
五、Promise.race
Promise.race([p1,p2....]).then(res=>{
//成功
res —— > 最先返回结果的那个请求
},err=>{});
//应用,对于同一个数据,多个数据接口提供请求,可以多个接口同时访问,哪个快就用哪个结果—— 保证用户能使用最快的数据
==========================
要求:当头部请求完成后,做点事,再去请求用户,用户请求完成后,做点事,再去请求新闻 ....
Generator: 生成器 —— 函数
1. 把一个函数切分成若干个小函数
2. 把异步请求同步化
3. 可以暂停的函数
语法:
function* show(){
alert(1);
alert(2);
}
let ge = show(); // ge -- Generator 对象
ge.next(); //下一个 , 触发 Generator 函数的执行
暂停: 在函数里面 , 使用
yield —— 只用于 Generator 函数里。
generator:
1) function*
2) 返回 Generator 对象
3) 可以暂停
yield
4) obj.next()
yield:
1)暂停函数
2)可以返回中间结果
3)可以接收中间参数
* yield 相当于把函数切分为若干段 ,yield 属于下半段
==========================
返回值:
obj.next(); —— 返回值:
{
done: false
value: yield 返回结果
}
* yield 返回值 属于上一部分
* 每一个next 对应的是切分后的一部分(不是对应一个 yield)
* 中间过程返回值 通过 yield ,最后的结果返回,通过 return
中间过程: done : false
整体结束: done: true
==========================
回顾:
function* show(){
alert('a');
yield x;
alert('b');
yield y;
return z;
}
//以上函数被分为3块,
第一块: alert('a'); x
第二块: yield alert('b'); y
第三块: yield return z;
//以下的next 对应的是每一块
let obj = show();
let r1 = obj.next(); //r1:{value:x,done:false}
let r2 = obj.next(); //r2:{value:y,done:false}
let r3 = obj.next(); //r3:{value:z,done:true}
==========================
接收中间参数:
obj.next(传入的参数);
使用 Generator 的意义:
1、什么时候停止,停止多久,什么时候再开始, 是可以通过程序控制;
2、在函数每次停止和下一次开始之间,可以做一些其它的操作;
==========================
题:
function* show(){
let a = 12;
let b = yield 5;
let c = 99;
let d = yield;
alert(a+b-c*d);
}
要求:把 5 接出来,乘以2,再传回去,程序如何写,结果是什么?
==========================
回顾场景:
三次请求: 头,用户,新闻
要求: 头
用户
新闻
实现:
一:回调嵌套
二:Generator
function* show(){
yield $.ajax({请求头部});
yield $.ajax({请求用户信息});
yield $.ajax({请求新闻信息});
}
let obj = show();
let r1 = obj.next(); //r1 : 头部的返回结果
....
obj.next();
....
obj.next();
..
obj.next();
==========================
ES6总结:
let
const
块作用域
()=>
1、 this 指向父级作用域
2、arguments 不能用
3、简写
如果 参数只有一个,可以省略小括号
如果 函数体只有一句话,并且是 return, 可以省略 大括号 和 return
...
应用:
1、扩展函数参数
function show(a,b,...args){}
2、复制数组
let arr2 = [...arr1];
方法:
a) 循环复制
b) ...
c) let arr2 = Array.from(arr1)
Map
let map = new Map();
map.set('key',value);
map.get('key');
map.delete('key');
for..of:
for(let item of map)
for(let item of map.entries())
for(let key of map.keys())
for(let val of map.values())
模块化:
定义/导出:
let a = 12;
let b = '';
export default {
a,b
}
使用:
import modA from 'a.js'
JSON简写:
1、 变量
let a= 12;
{
//a:a
a
}
2、函数:
{
show:function(){},
show2(){
}
}
解构赋值:
左边和右边结构一致;
数组方法:
let arr2 = arr.map(item=>{
return item + 1;
});
arr.forEach((val,index)=>{
});
let arr2 = arr.filter(item=>{
return item>10;
});
arr.reduce((pre,cur,index,self)=>{
return x; // x 做为下一次的前一个
});
arr.reduce((pre,cur,index,self)=>{},pre2);
应用:
1)数组求和
2)二维数组扁平化
面向对象:
class Person{
constructor(x){
this.x = x;
}
show(){}
show2(){}
}
class Worker extends Person{
construnctor(){
super();
this.x = x;
....
}
show(){}
}
`` 字符串板
`fdsafd${x}safdas`
startsWith
endsWith
Promise:
Generator:
==========================
Bootstrap:
前端布局的框架。主要应用于响应式的页面。
官网:http://www.bootcss.com/
组成:
基本样式
组件
Javascript 插件
* 强依赖于 jquery
原则:
1.引入库文件
bootstrap.css
jquery.js
bootstrap.js
下载:
npm:
npm i bootstrap
不会下载 jquery
npm i jquery
bower:(安装 git )
bower i bootstrap
2.基本结构
div.container —— 容器
div.row —— 行
div.col-
内容
3.栅格
整个页面分成12列
4. 列偏移
col-sm-offset-4
5.列排序
col-sm-push-*
col-sm-pull-*
6.响应式工具
.visible-sm
.hidden-sm
------------------------------
基本样式:
浮动:
pull-left
pull-right
清除浮动:
.clearfix
文本居中:
text-center
文本颜色:
text-primary
text-danger
按钮:
基本样式: btn
不同样式:
btn-primary
btn-danger
...
------------------------------