尝试了 material-components-web 提供的自动初始化方法 mdc-auto-init，感觉要是分别给每个 HTML 标签做标记的话比较繁琐，所以自己写了一个初始化方法。

思路是，把要用到的 node 和 constructor 都写在一个配置文件里面（其实就是一个 list 而已），然后初始化函数遍历配置，并完成相应的构建。

// ./components/mdcConf.ts

// 记得先导入需要用到的包
import { MDCRipple } from '@material/ripple';
import { MDCTextField } from '@material/textfield';
import { MDCTopAppBar } from '@material/top-app-bar';

// 下面是配置，很容易理解吧
const Conf = [
    ['.mdc-top-app-bar', MDCTopAppBar],
    ['.mdc-text-field', MDCTextField],
    [
        [
            '.mdc-button',
            '.primary-action',
        ],
        MDCRipple
    ],
]

export default Conf

// ./components/mdcInit.ts

import mdcConf from "./mdcConf"

const Conf = mdcConf

/** 
 * 初始化函数
 * 参考 <https://git.io/JegHJ>
 */
export default function () {
    let components = []
    for (const i of Conf) {
        if (typeof (i[0]) == 'string') {
            const component = i[0]
            const constructor = i[1]
            components.map.call(document.querySelectorAll(component), function (e: any) {
                return new constructor(e)
            })
        } else if (typeof (i[0]) == 'object') {
            const component = i[0].join(',')
            const constructor = i[1]
            components.map.call(document.querySelectorAll(component), function (e: any) {
                return new constructor(e)
            })
        }
    }
}

最后在需要的地方调用初始化函数就行了！

// ./index.ts
import mdcInit from "./components/mdcInit"

window.onload = function () {
  mdcInit()
}

「樱花庄的白猫」原创文章：《MDC 自动初始化》，转载请保留出处！https://2heng.xin/2019/09/03/mdc-auto-init/

Q.E.D.

Comments

赏