职责链模式

顾名思义，就是一步操作可能分位多个职责角色来完成，把这些角色都分开，然后用一个链串起来。这样就将请求者和处理者、包括多个处理者之间进行了分离。

前端最常见的就是链式操作。

jQuery 链式操作

$('#div1')
    .show()
    .css('color', 'red')
    .append($('#p1'))

Promise 链式操作

// 加载图片
function loadImg(src: string) { 
    const promise = new Promise((resolve, reject) => {
        const img = document.createElement('img')
        img.onload = () => { 
            resolve(img)
        }
        img.onerror = () => { 
            reject('图片加载失败')
        }
        img.src = src
    })
    return promise
}

const src = 'https://www.imooc.com/static/img/index/logo_new.png'

const result = loadImg(src)
result.then((img: HTMLImageElement) => {
    console.log('img.width', img.width)
    return img
}).then((img: HTMLImageElement) => {
    console.log('img.height', img.height)
}).catch((err) => {
    console.log(err)
})