基类 NEJ.C()

定义

NEJ框架中定义一个类统一使用NEJ.C方法,使用范例如下所示:

/**
 * 类描述信息
 * @class 类名称
 * @extends {nej.ut._$$Event}
 * @param {Object} _options 可配置参数,已处理参数列表如下
 * 
 * 
 */
_p._$$Class = NEJ.C();

通过此方法定义的类具有一下特性:

  • 类具有静态方法_$extend,可以从其他类继承
  • 实例具有__init方法用来初始化控件,该方法中通过__supInit调用父类__init方法

继承

通过NEJ.C定义的类具有静态方法_$extend,可以从其他类集成,使用范例如下所示

//变量声明
var _ = NEJ.P,
    _p = _('nej.ut'),
    _x = _('m.x');//定义命名空间

/**
 * 类描述信息
 * @class 类名称
 * @extends {nej.ut._$$Event}
 * @param {Object} _options 可配置参数,已处理参数列表如下
 *
 *
 */
_x._$$Class = NEJ.C();
_proClass = _x._$$Class._$extend(_p._$$Event);
//console.log(new _x._$$Class);

实现

通过NEJ.C定义的类会有__init方法来初始化类,该方法中可以通过__supInit调用父类的初始化方法。

__init

__init

__supInit

__supInit

_$$Event

下图展示了$$Event的所有方法。
_$$Event
注意:
$开头的方法为公开方法,__开头的为私有方法不能在外部调用

类方法

_$allocate

allocate

_p._$$Event._$allocate = function(_options){
    _options = _options||{};
    //查看缓存池中是否有可用实例,如果有就是用缓存池中的实例
    var _instance = !!this.__pool
                    &&this.__pool.shift();
    if (!_instance){
        //新建实例
        _instance = new this(_options);
        this.__inst__ = (this.__inst__||0)+1;
    }
    // 子类继承该方法重置控件
    _instance.__reset(_options);
    return _instance;
};
_$recycle

recycle

_$getInstance

_$getInstance

实例私有方法(定义在原型对象的私有方法,外部不能直接调用)

__init

类初始化方法

_pro.__init = function(){
    this.__events = {};
    this.__events_dom = {};
    this.id = _u._$uniqueID();
};
__reset

__reset
下面我们来看看控件基类的重置方法都做了些什么事情。

_pro.__reset = function(_options){
    this._$batEvent(_options);
};

_pro._$batEvent = (function(){

    /**
     * _forIn(object,function(_value,_key){},this)
     * 所有我们在 _$setEvent的时候需要将参数反转一下
     */
    var _doSetEvent = function(_event,_type){
        this._$setEvent(_type,_event);
    };

    return function(_events){
        _u._$forIn(_events,_doSetEvent,this);
    };
})();

_pro._$setEvent = function(_type,_event){
    //处理options中的所有事件,如果有定义事件,将事件和回调函数,传入实例的__events对象中
    if (!!_type&&_u._$isFunction(_event)){
        this.__events[_type.toLowerCase()] = _event;
    }
};
__supReset

调用父类的重置方法。

__destroy

__destroy

__supDestroy

调用父类的销毁方法

__doInitDomEvent

__doInitDomEvent

/**
 * 初始化DOM事件,重置接口{#__reset}中需要通过
 * {nej.v#_$addEvent}接口添加的事件,使用此接口添加可以在回收时自动被清理
 * [code]
 *   // 子类重置接口添加节点事件
 *   _pro.__reset = function(_options){
 *       this.__supReset(_options);
 *       // 添加DOM事件或者自定义事件
 *       this.__doInitDomEvent([
 *           [document,'click',this.__onDocClick._$bind(this)],
 *           [window,'ok',this.__onWindowOK._$bind(this)]
 *       ]);
 *   };
 * [/code]
 * @protected
 * @method {__doInitDomEvent}
 * @see    {#__doClearDomEvent}
 * @param  {Array} 待添加的事件配置列表 
 * @return {Void}
 */
_pro.__doInitDomEvent = (function(){
    var _doAttach = function(_args){
        if (!_args||_args.length<3) return;
        this.__events_dom['de-'+_u._$uniqueID()] = _args;
        _v._$addEvent.apply(_v,_args);
    };
    return function(_list){
        _u._$forEach(_list,_doAttach,this);
    };
})();
_$recycle

_$recycle

事件方法:事件方法也是实例方法,控件封装时主要以使用为主

_$setEvent

_$setEvent

_pro._$setEvent = function(_type,_event){
    if (!!_type&&_u._$isFunction(_event)){
        this.__events[_type.toLowerCase()] = _event;
    }
};
_$batEvent

_$batEvent

_$hasEvent

_$hasEvent

_$clearEvent

_$clearEvent

_$pushEvent

_$pushEvent

_$dispatchEvent

_$dispatchEvent
这个函数功能非常强大。

_pro._$dispatchEvent = function(_type){
    var _type = (_type||'').toLowerCase(),
        _event = this.__events[_type];
    if (!_event) return;
    //获取事件类型之外的所有参数
    var _args = _r.slice.call(arguments,1);
    // single event
    if (!_u._$isArray(_event)){
        //参数传入事件函数调用
        return _event.apply(this,_args);
    }
    // event list
    _u._$forEach(
        _event,function(_handler){
            try{
                _handler.apply(this,_args);
            }catch(ex){
                // ignore
                console.error(ex.message);
                console.error(ex.stack);
            }
        },this
    );
    return this;
};

_$$Event可以说是NEJ框架的基石,NEJ的强大功能都是基于此类。

参考:http://nej.netease.com/course/topic/component/


天赢金创
338 声望21 粉丝

天赢金创,天赢金创,天赢金创,天赢金创,天赢金创,天赢金创天赢金创,天赢金创