开发组件

Nui以面向对象的方式封装组件，内置一个组件基础类模块，包含类属性、类方法、实例属性、实例方法（不懂的问度娘），开发组件时必须继承该模块，也可以根据实际需要继承已有的组件，并对齐进行重新封装。

命名规范

文件名即是组件名，不能重复且只能由下划线、字母、数字组成。

“_”前缀表示为私有属性或者方法，仅内部使用。

“__”前缀表示系统内置的属性或者方法，仅内部使用，不可重写或修改。

没有“_”前缀的表示对外公开的属性或方法，可通过“实例对象.方法名”或者“类.方法名”访问。

回调方法必须on开头方法名第一个字母大写，例如onDestroy。

私有实例属性

# __id

功能：实例标识符

类型：{Number}

# _options

功能：设置选项参数

类型：{Object}

默认值：

参数名	参数类型	参数说明
target	Selector	调用组件的元素
id	String	组件id
skin	String	组件皮肤
className	String	给组件生成的元素上增加一个类或者多个类，需配合实例方法_tplData生效
onInit	Function	组件初始化时回调，根据实际情况在适当的位置调用，比如element元素创建完成后
onReset	Function	组件重置时回调
onDestroy	Function	组件销毁时回调

# _static

功能：设置类属性以及方法

类型：{Object}

# _template

功能：设置模版

类型：{Object}

默认：

# _events

功能：绑定事件，_event方法调用后才生效

类型：{Object}

私有实例方法

# _init

功能：入口函数，实例初始化时仅执行一次，内部必须调用_exec方法

# _exec

功能：主函数，用于拦截校验，是否执行后续逻辑，执行reset以及option方法时，会重新调用该函数

# _getTarget

功能：检测_options中target是否有效，有效则设置实例属性target，并在target上添加“nui_component_组件名”属性，无效返回null

# _jquery

功能：检测元素是否是jQuery对象，是就返回该对象，不是就封装为jQuery对象

参数：elem {selector} 元素

# _bindComponentName

功能：给元素添加“nui_component_组件名”属性，并在dom元素上绑定对象实例

参数：element {jQuery Object}

# _tplData

功能：在data中增加className属性，用于设置组件生成的元素外部类名

参数：data {Object} 模版数据

# _tpl2html

功能：获取编译后的模版

参数：id {String} 模版id

参数：data {Object, Array} 模版数据

# _event

功能：绑定事件，实例属性中必须包含element（生成的组件元素）与_events属性，用法参考代理事件

# _on

功能：绑定事件

参数：type {String} 事件类型

参数：dalegate {Selector} 代理元素

参数：selector {String} 触发事件元素

参数：callback {Function} 事件回调

参数：trigger {Boolean} 是否立即执行事件

# _off

功能：销毁事件

# _delete

功能：删除组件实例

# _reset

功能：销毁事件并删除element元素

# _callback

功能：调用选项参数回调函数，不论有没有传递参数，第一个实参都为当前对象实例

参数：method {String} 回调名，不包含on前缀，第一个字母大写

参数：args {Array} 回调传递参数

实例方法

# on

功能：绑定回调方法，设置后覆盖之前已经启用的回调方法

参数：name {String} 回调方法名称，不包含前缀on，第一个字母不区分大小写

参数：name {Object} 设置多个回调方法，使用后第2个参数将无效

参数：callback {Function} 回调方法

# option

功能：设置组件选项参数

参数：options {String} 设置单个参数

参数：options {Object} 设置参数集合

参数：isOriginal {Boolean} 是否在最初的选项参数基础上设置

# reset

功能：重置组件

# destroy

功能：销毁组件

若组件不需要option/reset/destroy实例方法，继承后设置为null即可

私有类属性

# __instances

功能：组件实例集合

类型：{Object}

# __parent

功能：返回父组件对象信息

类型：{Object}

# __component_name

功能：返回组件名

类型：{String}

私有类方法

# _init

功能：组件被创建时被调用一次

# _getSize

功能：返回元素边缘大小

参数：elem {jQuery Object} 元素

参数：dir {String} 方向（l, r, lr, t, b, tb），l表示left，r表示right以此类推，默认值为tb

参数：attr {String} 边缘属性（border, padding, margin, all），默认值为border

# _$fn

功能：将组件封装为jQuery插件形式，不需要的话设置为null

参数：name {String} 组件名

参数：module {Function} 组件模块

# _$ready

功能：自执行组件，元素上必须包含data-组件名-options="选项参数"，不需要的话设置为null

参数：name {String} 组件名

参数：module {Function} 组件模块

类方法

# config

功能：设置组件默认参数

参数：attr {String, Object} 选项参数名或者集合

参数：value 选项参数值

# hasInstance

功能：校验包含该id的实例是否存在，如果存在则返回实例对象，否则返回false

参数：id {Number, String} 组件实例_options中的id或者实例返回的__id

# init

功能：初始化容器内包含data-组件名-options="选项参数"属性的组件

参数：container {Object} 容器元素

# reset

功能：重置组件

参数：container {Object} 容器元素（选填）

参数：id {Number, String} 组件实例_options中的id或者实例返回的__id

# option

功能：设置组件选项参数

参数：container {Object} 容器元素（选填）

参数：options {String} 设置单个参数

参数：options {Object} 设置参数集合

参数：isOriginal {Boolean} 是否在最初的选项参数基础上设置

参数：id {Number, String} 组件实例_options中的id或者实例返回的__id

# destroy

功能：销毁组件

参数：container {Object} 容器元素（选填）

参数：id {Number, String} 组件实例_options中的id或者实例返回的__id

开发组件

命名规范

私有实例属性

# __id

# _options

# _static

# _template

# _events

私有实例方法

# _init

# _exec

# _getTarget

# _jquery

# _bindComponentName

# _tplData

# _tpl2html

# _event

# _on

# _off

# _delete

# _reset

# _callback

实例方法

# on

# option

# reset

# destroy

私有类属性

# __instances

# __parent

# __component_name

私有类方法

# _init

# _getSize

# _$fn

# _$ready

类方法

# config

# hasInstance

# init

# reset

# option

# destroy

封装组件

调用组件