开发组件
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}
默认:
_template : { |
style : '<%each style%><%$index%>:<%$value%>;<%/each%>' |
} |
# _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} 回调传递参数
this . _callback ( 'Change' , [arg1 , arg2 , . . . ] ) |
//调用组件 |
组件名 ( { |
onChange : function ( self , arg1 , arg2 , . . . ) { |
} |
} ) |
实例方法
# 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
封装组件
//编写一个简单的copy组件 |
//copy.js |
Nui . define ( ['{core}/component' ] , function ( component ) { |
//继承基类或者组件 |
var Copy = this . extend ( component , { |
//定义类成员 |
_static : { |
//私有类属性 |
_cache : [ ] , |
//私有类方法 |
_save : function ( text ) { |
this . _cache . push ( text ) |
} , |
//公开类方法 |
history : function ( ) { |
return this . _cache |
} |
} , |
//定义选项参数 |
_options : { |
text : '' |
} , |
//组件入口 |
_init : function ( ) { |
this . _exec ( ) |
} , |
_exec : function ( ) { |
if ( this . _getTarget ( ) ) { |
this . _bind ( ) |
} |
} , |
_bind : function ( ) { |
var self = this ; |
//实例方法中访问构造函数(类) |
var _class = self . constructor ; |
this . _on ( 'click' , this . target , function ( ) { |
//调用类方法 |
_class . _save ( self . _options . text ) ; |
self . _copy ( ) |
} ) |
} , |
_copy : function ( ) { |
var node = document . createElement ( 'textarea' ) ; |
node . value = this . _options . text ; |
document . body . appendChild ( node ) ; |
node . select ( ) ; |
document . execCommand ( 'copy' ) ; |
node . remove ( ) ; |
} , |
//公开的实例方法 |
destroy : function ( ) { |
this . _off ( ) ; |
this . _reset ( ) ; |
} |
} ) |
return Copy |
} ) |
调用组件
import copy from './copy' ; |
//-------实例方式调用 |
var obj = copy ( { |
target : '#demo1' , |
text : '这是复制的内容' |
} ) |
//调用实例方法 |
obj . destroy ( ) |
//-------jQuery形式调用 |
$ ( '#demo2' ) . copy ( { |
text : '这是复制的内容' |
} ) |
//调用实例方法 |
$ ( '#demo' ) . copy ( 'destroy' ) |
//-------类方法自动调用 |
copy . init ( Nui . doc ) //查询容器内带有data-copy-options属性的元素 |
//调用类方法销毁有所实例 |
copy . destroy ( ) |