从Vue学封装前端库的必备细节（一）

文章基于对《Vue.js 设计与实现》「框架设计的核心要素」章节学习，外加个人理解发散，并未完全照搬书中代码和文字。推荐购买正版《Vue.js 设计与实现》进行深度学习。

提升用户开发体验

友好的警告提示

在使用库或者框架的时候，提供友好的警告信息至关重要，这可以帮助开发者快速定位问题。

我们先定义一个简单的 warn 函数：

function warn(msg) {
    console.warn(`[xxx warn] ${msg}`)
}

在必要的地方调用警告函数：

class Poster {
    constructor() {}
    muntCanvas(canvas, el) {
        const el = document.querySelector(selector)
        if (!el) {
            warn(`${el} 元素不存在`)
        }
        if (canvas.tagName.toLowerCase() !== 'canvas') {
            warn(`${el} `)
        }
        (el || document.body).appendChild(canvas)
    }
}

统一的错误处理

当他人在使用我们封装好的库或框架时，经常会遇到程序报错的情况，不同的方式处理错误，带给使用者的体验也不同。

比如我们封装了一个请求库：

class FileRequest {
    constructor(requester) {
        this.requester = requester
    }
    upload(url, options) {
        const file = new FormData()
        this.requester.post(url, {
            data: file
        })
        // ...
    }
}

用户在使用时可以自行处理错误信息：

import axios from 'axios'
const fileRequest = new FileRequest(axios)

try {
    fileRequest.upload(//...)
} catch (err) {
    console.error(err.message)
}

也可以在库内部进行统一处理：

class FileRequest {
    constructor(requester) {
        this.requester = requester
    }
    upload(url, options) {
        const file = new FormData()
        try {
            this.requester.post(url, {
                data: file
            })
        } catch (err) {
            // ...
        }
    }
}

不过我们还可以更进一步，对错误处理程序进行统一封装，并且为用户暴露错误处理接口：

class FileRequest {
    constructor(requester) {
        this.requester = requester
        this.errorHandler = null
    }

    defaultErrorHandler(err) {
        console.error(`[Request error] ${err.message}`)
    }
    callWidthErrorHandler(cb) {
        try {
            cb && cb()
        } catch (err) {
            this.errorHandler
                ? this.errorHandler(err)
                : this.defaultErrorHandler(err)
        }
    }
    upload(url, options) {
        const file = new FormData()
        this.callWidthErrorHandler(() => {
            this.requester.post(url, {
                data: file
            })
        })
    }
    download(url) {
        this.callWidthErrorHandler(() => {
            this.requester.post(url)
            //...
        })
    }
}

这样用户才使用的时候，就可以自定义统一错误处理逻辑：

import axios from 'axios'
const fileRequest = new FileRequest(axios)
fileRequest.errorHandler = function (err) {
    console.error(`[Custom error handler] ${err.message}`)
}
// ...

在 Vue.js 中，我们也可以注册统一的错误处理函数：

// ...
const app = createApp(App)
app.config.errorHandler = () => {
    // ...
}

自定义 Chrome DevTools Formatter

关于 Chrome DevTools Formatter 相关，可以查看Writing custom formatters for logged objects in Chrome。