如何实现链式调用

如何实现链式调用

今天看了月影老师的PPT，感觉写的太好了，真的是循序渐进，循循善诱，醍醐灌顶，如沐春风…

特此总结一下

原PPT地址：https://ppt.baomitu.com/d/93fec210#/2

题目

html如下：

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
</ul>

要求第2n+1个li字体红色，第3n+1个li字体22px，绿色

小白

没错我就是小白…

function setColor (el, color) {
    el.style.color = color
}
function setFontSize (el, fontSize) {
    el.style.fontSize = fontSize
}
let items1 = document.querySelectorAll('ul > li:nth-child(2n+1)')
let items2 = document.querySelectorAll('ul > li:nth-child(3n+1)')

for (let item of items1) {
    setColor(item, 'red')
}
for (let item of items2) {
    setColor(item, 'green')
    setFontSize(item, '22px')
}

批量操作

设置一个batch函数，完成批量操作

function setColor(el, color) {
    el.style.color = color
}
function setFontSize(el, fontSize) {
    el.style.fontSize = fontSize
}
let items1 = document.querySelectorAll('ul > li:nth-child(2n+1)')
let items2 = document.querySelectorAll('ul > li:nth-child(3n+1)')

function batch (fn) {
    return function (el, ...args) {
        if (el.length >= 0) {
            return Array.from(el).map(e => fn.apply(this, [e, ...args]))
        } else {
            return fn.apply(this, [el, ...args])
        }
    }
}

setColor = batch(setColor)
setFontSize = batch(setFontSize)

setColor(items1, 'red')
setColor(items2, 'green')
setFontSize(items2, '22px')

这个API就进步了一些，不用显式地使用for循环了。

更进一步的，我们不希望显式地调用querySelectorAll，所以加一个queriable的高阶函数

可查询

function setColor(el, color) {
    el.style.color = color
}
function setFontSize(el, fontSize) {
    el.style.fontSize = fontSize
}

function batch (fn) {
    return function (el, ...args) {
        if (el.length >= 0) {
            return Array.from(el).map(e => fn.apply(this, [e, ...args]))
        } else {
            return fn.apply(this, [el, ...args])
        }
    }
}

function queriable (fn) {
    return function (selector, ...args) {
        if (typeof selector === 'string') {
            selector = document.querySelectorAll(selector)
        }
        return fn.apply(this, [selector, ...args])
    }
}

setColor = queriable(batch(setColor))
setFontSize = queriable(batch(setFontSize))

setColor('ul > li:nth-child(2n+1)', 'red')
setColor('ul > li:nth-child(3n+1)', 'green')
setFontSize('ul > li:nth-child(3n+1)', '22px')

queriable函数让我们的setColor既可以接收一个字符串，也可以接收一个dom集合。

但是对于同一个dom集合，都是改变CSS，我们写了2行代码。能否将2行代码缩减成1行呢？下面增加一个打包的pack函数

打包

function setColor(el, color) {
    el.style.color = color
}
function setFontSize(el, fontSize) {
    el.style.fontSize = fontSize
}

function batch (fn) {
    return function (el, ...args) {
        if (el.length >= 0) {
            return Array.from(el).map(e => fn.apply(this, [e, ...args]))
        } else {
            return fn.apply(this, [el, ...args])
        }
    }
}

function queriable (fn) {
    return function (selector, ...args) {
        if (typeof selector === 'string') {
            selector = document.querySelectorAll(selector)
        }
        return fn.apply(this, [selector, ...args])
    }
}

function pack (package) {
    return function (selector, obj) {
        for (let key in obj) {
            package[key].call(this, selector, obj[key])
        }
    }
}

let css = pack({color: setColor, fontSize: setFontSize})
css = queriable(batch(css))

css('ul > li:nth-child(2n+1)', {color: 'red'})
css('ul > li:nth-child(3n+1)', {color: 'green', fontSize: '22px'})

pack函数接收一个对象，把color交给setColor处理，把fontSize交给setFontSize处理；pack返回的函数接收2个参数，一个是需要操作的dom对象，一个是需要操作的CSS样式

let css = pack({color: setColor, fontSize: setFontSize})

这个时候css函数实际上还没有批量操作和可查询的功能，要想拥有这2个功能只需要经高阶函数包装一下。

css = queriable(batch(css))

链式调用

下面实现链式调用

实现链式调用的时候改一下需求，第2n+1个li的字体颜色不仅是红色，而且innerHTML改为‘abc’

**链式调用的关键在于方法化，我们要把函数注册成为一个对象的方法，同时每次调用方法后仍返回这个对象。**我们让这个对象是一个自定义的Chain类

function setColor(el, color) {
    el.style.color = color
}
function setFontSize(el, fontSize) {
    el.style.fontSize = fontSize
}

function setText (el, text) {
    el.innerHTML = text
}

function batch(fn) {
    return function (el, ...args) {
        if (el.length >= 0) {
            return Array.from(el).map(e => fn.apply(this, [e, ...args]))
        } else {
            return fn.apply(this, [el, ...args])
        }
    }
}

function queriable(fn) {
    return function (selector, ...args) {
        if (typeof selector === 'string') {
            selector = document.querySelectorAll(selector)
        }
        return fn.apply(this, [selector, ...args])
    }
}

function pack(package) {
    return function (selector, obj) {
        for (let key in obj) {
            package[key].call(this, selector, obj[key])
        }
    }
}

function methodize(fn) {
    return function (...args) {
        fn.apply(null, [this._selector, ...args])
        return this
    }
}

function Chain(selector) {
    this._selector = selector
}

let css = queriable(batch(pack({color: setColor, fontSize: setFontSize})))
let text = queriable(batch(setText))

Chain.prototype.css = methodize(css)
Chain.prototype.text = methodize(text)

function $(selector) {
    return new Chain(selector)
}

$('ul > li:nth-child(2n + 1)').css({ color: 'red' }).text('abc')
$('ul > li:nth-child(3n + 1)').css({ color: 'green', fontSize: '22px' })