ebuilder

用react思维去开发webcomponent

Usage no npm install needed!

<script type="module">
  import ebuilder from 'https://cdn.skypack.dev/ebuilder';
</script>

README

Ebuilder

用react思维去开发webcomponent

兼容性

提供一个polyfill文件,对低版本做兼容。

浏览器 版本 支持
Safari 5.1.7+
Internet Explorer 11+
Chrome 54+

Ebuilder 能做什么?

  • 进入js组件库,编辑html标签即可完成一个页面
  • 用生命周期钩子和状态器管理组件(但需要自己手动修改dom)
  • 组件基类是DOM,可以直接被vue\react等其他框架调用

创建一个简单应用

git clone https://github.com/kimchen003/ebuilder-quick-start.git
yarn install
yarn start

使用手册

1. 生命周期

  • componentWillMount:组件被安装前,被调用。
// 例如可以在组件被安装前调数据接口
componentWillMount() {
    this.getData()
        .then(result => {
            this.setState({ data: result });
        });
}
  • render:首次渲染时,被调用。
// 在渲染时定义组件初始结构
render() {
    return html`
        <div>Hello World !</div>
    `
}
  • componentDidMount:组件被安装后,被调用。
// 例如可以在组件安装后绑定事件
componentDidMount() {
    this.refs.btn.onclick = function(){
        ...
    }
}
  • update: 组件更新时,被调用。
// 例如可以在被点击是显示组件
update(change) {
    this.setState({ show: change.show });
}
  • componentDidUnmount: 组件被移除后,被调用。
// 例如可以在组件被移除后清除计时器
componentDidUnmount() {
    clearInterval(timer);
}

2. 状态(State)机制

setState是组件统一的API,用于主动触发组件的样式或结构变化。
注:开发者需要手动控制state改变后的变化。

import { WebComponent, html, render } from 'ebuilder';

export default class EbuilderTest extends WebComponent {

    constructor() {
        super();

        this.state = {
            show : false
        };

    }

    render() {
        return html`
            <div>Hello World !</div>
        `;
    }

    update(change): void {
        if( change.show ){
            this.style.display = "block"
        }
    }


}

customElements.define("ebuilder-test", EbuilderTest );

4. 节点(Refs)缓存

ebuider会根据节点上的ref标记缓存节点
注:同一个标记只缓存一个节点

import { WebComponent, html, render } from 'ebuilder';

export default class EbuilderTest extends WebComponent {

    render() {
        const { Style } = this;
        this.className = Style.main;

        return html`
            <div ref='title'>Hello World !</div>
        `;
    }

    componentDidMount() {
        setTimeout(()=>{
            this.refs.title.innerHTML = 'Changed !';
        },300)
    }

}

customElements.define("ebuilder-test", EbuilderTest );

4. 初始参数(Props)

每次调用props,ebuilder会遍历组件标签上的attribute,然后返回一个json对象。同时把对每个属性值尝试进行JSON.parse(),并将属性名aa-bb转成aaBb格式。

<ebuilder-test goods-list="[{name:'香蕉'},{a:'苹果'}]"></ebuilder-test>
import { WebComponent, html, render } from 'ebuilder';

export default class EbuilderTest extends WebComponent {

    constructor() {
        super();

        this.state = {
            data : this.props['goodsList']
        };

    }

    render() {
        return html`
            ${
                data.map(c => {
                   return html`
                       <div>产品:${ c.a }</div>
                   `;
                })
            }
        `;
    }
}

customElements.define("ebuilder-test", EbuilderTest );

5. 兼容低版本浏览器(Polyfill)

建议采用动态加载,压缩后的js文件在目录./polyfill/dist

<script>
    if( !window.customElements ){
        document.write('<script src="https://raw.githubusercontent.com/kimchen003/ebuilder/master/polyfill/dist/index.js"><\/script>');
    }
</script>