Component组件

2024-06-19 00:21:35首发，2个月前更新

WebComponents组件是es6标准，可以部分代替vue或react等数据响应式框架的部分功能，关键是Webcomponents获得标准支持，原生可用；基于webcomponents标准，AXUI的组件分为两类，一类是有至少一个模块内核的webcomponents组件，修改attributes属性等同于更新模块的参数（使用update方法），例如AX-MENU自定义标签，其内核是Menu模块；第二类是没有核心模块的普通webcomponents组件，通过修改其自身的attributes即可更新参数，例如AX-LINE等。

前言

本框架的自定义组件命名以ax-开头，有两种组件类型：

纯样式组件，没有内置模块，例如ax-line组件，只能通过修改组件的attributes来改变状态
模块式组件，内置至少一个核心模块，除了修改组件的attributes来改变状态，还可通过操作模块实例改变组件状态，例如ax-menu组件

纯样式组件公共变量

本框架的纯样式组件基于相同的编写方式，所以有相同的内部变量。

变量名	值类型	默认值	说明
propsRaw	object	{}	attributes转properties的初始值，始终不变
properties	object	{}	随时可能变化的properties值
propsProxy	object	{}	properties值的代理对象
observer	object	{proxy,ins,target}	properties值的代理

纯样式组件的公共方法

本框架的纯样式组件基于相同的编写方式，所以有相同的内部方法。

方法名	返回值	说明
reset()	this	组件恢复propsRaw属性，无参数

模块式组件公共变量

本框架的模块式组件基于相同的编写方式，所以有相同的内部变量。

变量名	值类型	默认值	说明
shadowEl	HTMLElement	null	影子节点
slotEl	HTMLElement	null	插槽节点
wrapEl	HTMLElement	null	模块宿主节点
ins	object	null	主模块实例
properties	object	{}	被代理的对象，随时改变
propsProxy	object	{}	properties的代理对象
observer	object	{proxy,ins,target}	properties值的代理

模块式组件公共属性

本框架的模块式组件基于相同的编写方式，所以有相同的参数选项。

属性名	值类型	默认值	说明
ins-name	string	''	实例名，如果填写了可通过ax.instance取得实例，查看ax.instance详细
storage-name	string	''	数据缓存名称，如果填写了可自动保存参数
storage-keys	array	[]	在填写了storName前提下，该参数将决定保存哪些参数
breakpoints	object	{}	在不同尺寸终端下使用不同的参数，查看ax.breakpoints详细
lang	object	{}	语言包，如果填写了将替换ax.lang中的值

模块式组件公共事件

本框架的模块式组件基于相同的编写方式，所以有相同的监听事件。

事件名	参数	返回值	说明
on-ready	()	this	完成构造函数后，未初始化之前执行
on-start	()	this	完成构造函数后，开始初始化之前执行
on-init	()	this/AsyncFunction(可能)	完成初始化后执行
on-destroy	(item)	this	实例销毁后执行
on-reset	()	this	参数重置后执行
on-update	(settings)	this/AsyncFunction(可能)	更新参数后执行
on-save	(item)	this	保存缓存后执行
on-clearcache	()	this	清除缓存后执行

监听class属性

组件的class属性不是纯样式组件的原有属性也不是模块式组件的参数，但是我们也将其纳入了监听范围。

对于两类组件均可使用内置的observer变量监听到class变化，当然其他属性也是能监听到的。

输出
HTML
JS

这是纯样式按钮组件
```
                
                
            
```

                
                    let classBtn = document.querySelector('#classBtn'),
                    classObs = classBtn.observer.ins;
                    classObs.on('set',(data)=>{
                        console.log(`设置了${data.key}：`,data.value)
                    })
                    classBtn.onclick=()=>{
                        classBtn.classList.add('test');
                    }