开发组件

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%>'
}
js

# _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, ...){
}
})
js

实例方法

# 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
})
js

调用组件

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()
js