Module模块

Module模块是封装好的class类,这些模块通常功能单一、通用,并且支持一系列的操作方法;模块的重要意义是方便其他组件或模块引用,也方便用户基于这些module模块进行再次封装,例如Popup、Position、Dialog、Alert、Valid等模块;Module模块主要分三类,一类是有节点宿主的,例如Drawer;二类是有数据宿主的,例如Observe;三类是其他参数未定型的模块,例如Position有三个参数(宿主节点、气泡节点和模块参数)
module系列文档 Module模块 1周前更新

使用方式

模块是Class类,需要通过new方法实例化才可使用,例如More模块,可以通过new ax.More('#id')创建实例。

模块根据宿主类型分为:节点型模块(node),数据型模块(data)和其他行模块(none)。

节点型模块主要有两个参数,第一个参数都是节点选择器,第二个参数是实例参数,例如More模块就是节点型模块。本框架的模块主要是节点型模块。

数据型模块有两个参数,第一个参数是数据(数组或对象),第二个参数是实例参数,例如Observe模块就是数据型模块。

其他模块的参数数量可能就不确定了,而且参数的数据类型也不能确定,例如Position模块包含三个参数,第一个和第二个参数均是节点选择器,第三个参数是实例选项。

  • 输出
  • HTML
  • JS
  • 中国是世界四大文明古国之一,有着悠久的历史,距今约5000年前,以中原地区为中心开始出现聚落组织进而形成国家,后历经多次民族交融和朝代更迭,直至形成多民族国家的大一统局面。
  •                 
                    
                
  •                 
                    new ax.More('#mo01');
                    
                

通过属性实例化

本框架的节点型模块比较多,节点型模块除了可以通过new实例化,也可以使用属性实例化,例如可以通过<div ax-more></div>属性的方式执行More实例化。

节点元素的属性不区分大小写,ax-more、ax-More和AX-MORE结果一致。

  • 输出
  • HTML
  • 中国是世界四大文明古国之一,有着悠久的历史,距今约5000年前,以中原地区为中心开始出现聚落组织进而形成国家,后历经多次民族交融和朝代更迭,直至形成多民族国家的大一统局面。
  •                 
                    
                

通过自定义标签实例化

节点型模块又细分为两类:

  1. 节点本身就是内容,例如More便可以将数据放在目标节点内。
  2. 目标节点和内容分离,例如Popup则需要通过其他途径获得内容。

对于有宿主节点的模块,本框架创建了Webcomponent自定义标签组件,例如ax-more、ax-menu、ax-tab等组件,使他们用起来更加方便。

  • 输出
  • HTML
  • 中国是世界四大文明古国之一,有着悠久的历史,距今约5000年前,以中原地区为中心开始出现聚落组织进而形成国家,后历经多次民族交融和朝代更迭,直至形成多民族国家的大一统局面。
  •                 
                    
                

初始化

为了方便初始化所有的模块、组件和插件,应该将ax.js文件在页面的最底部引入。在ax.js文件的后方可通过在<script>标签放入初始化模的js代码以创建实例。

对于Webcomponent组件,只要引入了ax.js文件,自定义组件便会自动初始化,不管组件元素使在ax.js文件引用位置的前面还是后面。

如果需要使用属性来激活模块创建实例,则需要对ax.js做初始化处理。我们可以以这种方式引入js文件:<script src="ax.js" onload="ax.init()"></script>,意思就是在ax.js文件加载成功之后对所有使用模块属性的节点进行初始化实例化。

如果是动态创建带模块属性的标签,需要手动使用ax.init()方法激活。关于ax.init()的用法请点击这里

公共参数

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

属性名 值类型 默认值 说明
insName string '' 实例名,如果填写了可通过ax.instance取得实例,查看ax.instance详细
storName string '' 数据缓存名称,如果填写了可自动保存参数
storKeys array [] 在填写了storName前提下,该参数将决定保存哪些参数
breakpoints object {} 在不同尺寸终端下使用不同的参数,查看ax.breakpoints详细
lang object {} 语言包,如果填写了将替换ax.lang中的值
b4Init function null 等待函数,初始化开始时执行,应返回Promise

公共事件

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

监听事件的使用方法有两种:

  1. 在参数内使用,例如:new ax.Menu('#demo',{onReset:()=>{}})
  2. 通过on方法链式使用,例如:new ax.Menu('#demo',{}).on('reset',()=>{}).on('update',()=>{})
事件名 别名(参数内用) 参数 返回值 说明
constructed onConstructed () this 完成构造函数后,未初始化之前执行
initiate onInitiate () this 完成构造函数后,开始初始化之前执行
initiated onInitiated () this/AsyncFunction(可能) 完成初始化后执行
destroyed onDestroyed (item) this 实例销毁后执行
reset onReset () this 参数重置后执行
updated onUpdated (settings) this/AsyncFunction(可能) 更新参数后执行
saved onSaved (item) this 保存缓存后执行
clearedCache onClearedCache () this 清除缓存后执行
updatedcache onUpdatedcache (settings) this 更新缓存后执行
error onError () this 报错后执行
locked onLocked () this 模块禁用后执行
unlocked onUnlocked () this 模块启用后执行

公共变量

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

如果宿主是HTMLElement节点,那么会有targetEl,例如:ax.Menu模块;如果宿主是数组数据或对象数据,那么会有targetData,例如:ax.Observe模块。

storKeysstorTmpstorObs在启用options.storName之后才有值。

变量名 值类型 默认值 说明
initCount number 0 初始化次数
targetData array [] 目标数据(宿主为data类型时有值)
targetEl HTMLElement null 目标节点(宿主为el类型时有值)
storKeys array [] 存储键
storTmp object {} 缓存键值对
storObs object {} storTmp的proxy对象
rawHtml string '' 目标节点的原始HTML文本
rawEl string null 目标节点的原始子节点(一个)
rawOpts object {} 从参数map中取得的原始参数
dftOpts object {} 基于rawOpts合并用户参数的默认参数
options object {} 用户参数
plans object {} 监听事件集合
destroyed boolean false 销毁状态
timestamp number - 创建实例时的时间戳
respSource any - 原始数据
initialized boolean false 是否已经初始化
renderCount number 0 主节点渲染次数
moduleName string - 模块名称(小写)
tplStr string '' 模块的模板字符串
tplEng function null 模块的模板引擎

公共方法

本框架的模块基于相同的编写方式,所以有相同的内部方法。

如果options.content获得是异步数据,那么initupdate方法可能会返回Promise,此时需要使用then方法进行下一步操作。

clearCacheupdateCachesave方法在启用options.storName之后才有效,这三个方法一般由模块自动完成,不需要手动操作,如果需要手动保持模块的参数状态可单独使用updateCache方法。

方法名 返回值 说明
init([cb]) Promise(this) 初始化实例,回调无参数
destroy([cb]) this 销毁实例,回调无参数
reset([cb]) this 实例重置,回调无参数
update(settings[,cb]) Promise(this) 更新参数,回调无参数
clearCache(value) this 清除缓存,无参数
updateCache(value) this 更新缓存,参数为参数键值对(该方法一般不使用)
save([cb]) this 保存缓存,回调无参数(该方法一般不使用)
lock([cb]) this 禁用模块
unlock([cb]) this 解禁模块