callback hell方法的使用

可读性不友好

function loadImg(src,callback,fail){
    var img = document.createElement('img');
    img.onload = function(){
        callback(img);
    }
    img.onerror = function(){
        fail();
    }
    img.src = src;
}
var src = "https://www.baidu.com/img/baidu_jgylogo3.gif";

loadImg(src,function(img){
    console.log('img width',img.width)
},function(){
    console.log('faild')
})

用promise 去改造

用多个.then去分批处理

function loadImg(src){
    return new Promise(function(resolve,reject){
        var img = document.createElement('img');
        img.onload = function(){
            resolve(img);
        }
        img.onerror = function(){
            reject();
        }
        img.src = src;
    })
}
var src="https://www.baidu.com/img/baidu_jgylogo3.gif";
var result = loadImg(src);
result.then(function(img){
    console.log('img width',img.width)
},function(){
    console.log('faild')
})
result.then(function(img){
    console.log('img height',img.height)
})

问题解答:

  1. new promise实例,而且要传入return
  2. new promise时要传入函数,函数有resolve reject函数
  3. 成功时执行resolve()失败时执行reject()
  4. .then监听结果

ES6常用功能

  1. let 定义变量,可以重新赋值
  2. const 定义常量,不可以重新赋值
  3. 多行字符串/模板变量
  4. 解构赋值(详情见es6)
  5. 块级作用域(很大的改动)
  6. 函数默认参数
  7. 箭头函数

块级作用域

<!-- 在js里面 -->
var obj = {a:100,b:200}
for (var key in obj) {
    console.log(key,'for in')
}
console.log(key)  // 100,200

<!-- 在es6 -->
var obj = {a:100,b:200}
for (let key in obj) {
    console.log(key,'for in')
}
console.log(key); // undefine

箭头函数改变this指向的问题

<!-- 用箭头函数,指向本身函数对象 -->
function fn(){
    console.log('real',this); // {a:100}

    var arr = [1,2,3];
    arr.map(item=>{
        console.log(this); // {a:100}
    })
}
fn.call({a:100}); // call是强制让fn函数对象指向{a:100}

<!-- 不用箭头函数,this指向window -->
function fn(){
    console.log('real',this); // {a:100}

    var arr = [1,2,3];
    arr.map(function(item){
        console.log(this); // window;
    })
}
fn.call({a:100});

原型

描述一下zepto是如何使用原型
描述一下jquery如何使用原型
再结合自己的项目经验,说一个自己开发的列子

$p.css('color','red'); // css是原型方法
$p.html(); // html是原型方法

原型如何体现他的扩展性

异步

问题:

一. 什么是单线程,和异步有什么关系
  1. 单线程只有一个线程,同一时间只能做一件事情
var i,sum = 0;
for(i=0;i<100000;i++){
    sum+=i;
}
console.log(sum);

<!-- alert不处理,js执行和dom渲染暂时卡顿 -->
console.log(1);
alert('hello');
console.log(2);
  1. 用单线程的原因-避免DOM渲染的冲突
    A. 浏览器需要渲染DOM

    B. js可以修改DOM结构

    C. JS执行的时候,浏览器DOM渲染会暂停

    D. 两段JS也不能同时执行(都修改DOM就冲突了)

    E. webworder支持多线程,但是不能访问DOM

  2. 单线程的解决单线程方案-异步

    console.log(100)
    setTimeout(function(){
        console.log(200);
    },1000)
    console.log(300);
    console.log(400);
    // 100
    // 300
    // 400
    // 200  一秒后执行
console.log(100)
$.ajax({
    url:'XXXX',
    success:function(res){
        console.log(res) // 最后执行
    }
});
console.log(300)
cobsole.log(400)

异步的问题:

问题一:没有按照书写的方式执行,可读性差

问题二:callback中不容易模块化(setTimeout和ajax里面的函数)

二. 什么是event-loop 异步的解决方案。
  1. 事件轮询,js实现异步的具体解决方案
  2. 同步代码,直接执行
  3. 异步函数先放在异步队列中;有setTimeout等待时间过后,才放入异步队列中。ajax执行完毕过后放入异步队列
  4. 待同步函数执行完毕,轮询执行异步队列的函数

回答点:

  1. 什么是异步队列,何时被放入异步队列
  2. 轮询的过程。
三. 是否用过jquery的deferred

问题解答:

1. 可以拿jquery1.5 对ajax的改变举例

2. 说明如何简单的封装、使用deferred,说出它的好处

3. 说明promise和deferred的区别

jQuery1.5的变化——1.5之前

var ajax = $.ajax({
    url:'./data.json',
    success:function(){
        console.log('success 1');
        console.log('success 2');
        console.log('success 3');
    },
    error:function(){
        console.log('error');
    }
})

jQuery1.5的变化——1.5之后
这样写的好处:

  1. 这样对修改封闭,对扩展开放,
  2. 增加一个函数,不用再修改原来的函数
  3. 多人开发,一人维护一个函数。
  4. 测试也只测试新的函数。
  5. 对代码管理和维护有好处的
// 每一个方法都会执行
var ajax = $.ajax('data.json');
ajax.done(function(){
    console.log('success 1');
}).fail(function(){
  console.log('fail 1');
}).done(function(){
    console.log('success 2');
}).fail(function(){
  console.log('fail 2');
}).done(function(){
    console.log('success 3');
}).fail(function(){
  console.log('fail 3');
})
<!-- 与promise很相近了 -->
var ajax = $.ajax('data.json')
ajax.then(function(){
   console.log('success 1');
},function(){
    console.log('error 1');
}).then(function(){
   console.log('success 2');
},function(){
    console.log('error 2');
})
  1. 无法改变js异步和单线程的本质
  2. 只能从写法上杜绝callback这种形式
  3. 它是一种语法糖形式,但是解耦了代码
  4. 很好的体现:开放封闭原则
  5. 减少了回归测试的成本。多人开发方便。

使用jquery deferred举例:

var wait = function(){
    var task = function(){
        console.log('执行完成');
    }
    setTimeout(task,20000)
}
wait();
function waitHandle(){
    // 定义
    var dtd = $.Deferred();

    var wait = function(dtd){

        var task = function(){
            console.log('执行完毕');
            // 成功
            dtd.resolve()
            // 失败
            // dtd.reject()
        }
        setTimeout(task,2000);

        // wait返回
        return dtd;
    }

    // 最终返回
    return wait(dtd);
}

var w = waitHandle();
w.then(function(){
    console.log('ok 1');
},function(){
    console.log('err 1');
})
w.then(function(){
    console.log('ok 2');
},function(){
    console.log('err 2');
})
w.then(function(){
    console.log('ok 3');
},function(){
    console.log('err 3');
})

w.reject();  //  不会报错


// 开放封闭原则!!!

总结:
dtd的API可分成两类,用意不同

第一类:dtd.reolve  dtd.reject  主动触发

第二类:dtd.then  dtd.done  dtd.fail  被动监听

初步引入promise概念,是 jquery deferred 引入过来的

promise和jquery deferred的区别:

promise对象只能被动监听,不能主动修改,所以在w.reject()会报错。

function waitHandle(){
    // 定义
    var dtd = $.Deferred();

    var wait = function(dtd){

        var task = function(){
            console.log('执行完毕');
            // 成功
            dtd.resolve()
            // 失败
            // dtd.reject()
        }
        setTimeout(task,2000);

        // wait返回
        return dtd.promise(); // 这里返回的是promise对象
    }

    // 最终返回
    return wait(dtd);
}
var w = waitHandle();
$.when(w).then(function(){
    console.log('ok 1');
},function(){
    console.log('err 1');
}).then(function(){
    console.log('ok 2');
},function(){
    console.log('err 2');
})

w.reject();  // 这里就会直接报错。
四. promise的基本使用和原理

基本语法回顾

1. 异常捕获

function loadImg(src){
    return new Promise(resolve,reject){
        var img = document.createElement('img');
        img.onload = function(){
            resolve(img);
        }
        img.onerror = function(){
            reject('图片加载失败');
        }
        img.src=  src;
    }
}

var src="https://wwww.img.address";
var result = loadimg(src);
// 规定:then只接受一个成功的参数,最后统一用catch来捕获错误
result.then(function(img){
    console.log(1,img.width);
    return img;
}).then(function(img){
    console.log(2,img.width);
}).catch(function(ex){
    // 统一捕获异常,也会捕获到reject方法
    console.log(ex);
})

2. 多个串联

// 场景:希望加载完第一个,再加载第二个
var src1 = 'img.address';
var result1 = loadImg(src1);
var src2 = 'img.address';
var result2 = loadImg(src2);

result1.then(function(img1){
    console.log('加载第一章图片',img1.width);
    return result2  // 重要!!!
}).then(function(img2){
    console.log('加载第二章图片',img2.width);
}).catch(function(ex){
    console.log(ex);
})

3. promise.all和promise.race

// Promise.all接收一个promise对象的数组
// 待全部完成之后,统一执行success
Promise.all([result1,result2]).then(datas=>{
    // 接收到的datas是一个数组,依次包含了多个promise返回的内容
    console.log(datas[0]);
    console.log(datas[1]);
})

// Promise.race 接收一个包含多个promise对象的数组
// 只要有一个完成,就执行success
Promise.race([result1,result2]).then(data=>{
    // data 是最先执行完成的 promise对象的返回值
    console.log(datas);
})

4. promise标准

关于“标准”的闲谈,标准很重要

    任何技术推广使用都需要一套标准来支撑
    如 html js css http等,无规则不成方圆
    任何不符合标准的东西,终将会被用户抛弃

状态变化

    三种状态:pending fulfilled rejected
    初始状态pending
    pending 变成fulfilled,或者pending变为rejected
    状态不可逆

then

promise 实例必须实现then这个方法
then()必须可以接收两个函数作参数
then()返回的必须是一个promise实例

问题解答总结:

1. 基本语法复习
2. 如何异常捕获(error和reject都要考虑)
3. 多个串联-链式执行的好处
4. promise.all和promise.race
5. promise标准-状态变化,then函数
五. 介绍一下 async/await

是es7体验中的。

then只是将callback拆分了

async/await是最直接的同步写法

const load = async function(){
    const result1 = await loadImg(src1);
    console.log(result1);
    const result2 = await loadImg(src1);
    console.log(result2);
}
load()

语法(和promise的区别和联系)

1. 使用await,函数必须用async标识
2. await 后面跟的是一个promise实例
    使用了promise,并没有和promise冲突
    完全是同步的写法,再也没有回调函数
    但是:改变不了JS单线程、异步的本质
3. 需要安装babel-polyfill并,引入
六. 总结当前js异步解决方案
1. jQuery Deferred
2. Promise
3. async/await
4. generator(并不是解决异步的,原理比较复杂,忽略)
04-07 04:01