canyuegongzi

高级前端如何更优雅的定义WebComponent

前言

WebComponent 方式是实现组件化的一种解决方案，目前社区内也有很多成熟对方案，如 Omi 、stencil ，其中腾讯前端团队的 Omi 方案还是相当完善的。

早些时间笔者也在 Omi 的基础上封装了 @canyuegongzi/web-core ，但目前此种方案在使用方面尚存在不足，诸如属性定义繁琐、事件抛出缺乏灵活性、数据无法响应式等；故此最近在 web-core 基础上对相关的逻辑做了重构、升级成为 @canyuegongzi/web-core-plus 。

简单对新旧定义组件方式做个类比：

web-core方式定义

import * as css from './index.scss';
@CustomTag({ name: 'wu-tree' })
export default class WuTree extends CustomWebComponent {
    static css = css.default ? css.default : css
    static propTypes = {
        size: String,
        highlightCurrent: Boolean,
        showCheckbox: Boolean,
        data: Array
    }
    static defaultProps = {
        size: WebUiConfig.size,
        highlightCurrent: true,
        showCheckbox: false,
        data: []
    }

    static observedAttrList = [ "data" ];
    
    public isChecked: boolean | undefined;
    
    constructor() {
        super();
    }
    public render(props) {
        return (
            组件
        );
    }
}

利用旧版本的核心包在定义组件时，只能依赖 propTypes、defaultProps 定义属性，也无法利用生命周期钩子函数做自定义操作。

web-core-plus方式定义

import { h, Component, Prop, Emit, Watch } from "@canyuegongzi/web-core-plus";
import css from './index.scss';

@Component({
    name: 'wu-plus-icon',
    css: css
})
export class WuIcon extends HTMLElement {
    constructor() {
        super();
    }
    @Prop({ default: '', type: String })
    public name: string;
    
    @Emit('change')
    public valueChange() {
        return this.name;
    }

    @Watch('name')
    private nameChange(newVal: string, oldVale:string) {
        console.log('值修改', oldVale, newVal);
    }

    public render(_renderProps= {}, _store = {}) {
        return (
            
        );
    }
}