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
:组件被安装前,被调用。
// 例如可以在组件被安装前调数据接口{this;}
render
:首次渲染时,被调用。
// 在渲染时定义组件初始结构{return html`Hello World !`}
componentDidMount
:组件被安装后,被调用。
// 例如可以在组件安装后绑定事件{thisrefsbtn{...}}
update
: 组件更新时,被调用。
// 例如可以在被点击是显示组件{this;}
componentDidUnmount
: 组件被移除后,被调用。
// 例如可以在组件被移除后清除计时器{;}
2. 状态(State)机制
setState
是组件统一的API,用于主动触发组件的样式或结构变化。
注:开发者需要手动控制state
改变后的变化。
;{super;thisstate =show : false;}{return html`Hello World !`;}: voidif changeshowthisstyledisplay = "block"customElements;
4. 节点(Refs)缓存
ebuider会根据节点上的ref
标记缓存节点
注:同一个标记只缓存一个节点
;{const Style = this;thisclassName = Stylemain;return html`Hello World !`;}{}customElements;
4. 初始参数(Props)
每次调用props
,ebuilder会遍历组件标签上的attribute
,然后返回一个json对象。同时把对每个属性值尝试进行JSON.parse()
,并将属性名aa-bb
转成aaBb
格式。
;{super;thisstate =data : thisprops'goodsList';}{return html``;}customElements;
5. 兼容低版本浏览器(Polyfill)
建议采用动态加载,压缩后的js文件在目录./polyfill/dist
。