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. 生命周期
• 2. 状态(State)机制
• 3. 节点(Refs)缓存
• 4. 初始参数(Props)
• 5. 兼容低版本浏览器(Polyfill)

• 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);
}

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 );

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 );

每次调用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 );

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

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