NEJ _$$Event类

BenCHou 发布于2019-08-19 14:55 / 2076人阅读

摘要：所有我们在的时候需要将参数反转一下处理中的所有事件，如果有定义事件，将事件和回调函数，传入实例的对象中调用父类的重置方法。获取事件类型之外的所有参数参数传入事件函数调用可以说是框架的基石，的强大功能都是基于此类。

基类 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

__supInit

_$$Event

下图展示了$$Event的所有方法。

注意：$开头的方法为公开方法，__开头的为私有方法不能在外部调用

类方法

_$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

_$getInstance

实例私有方法（定义在原型对象的私有方法，外部不能直接调用）

__init

类初始化方法

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

__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

__supDestroy

调用父类的销毁方法

__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

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

_$setEvent

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

_$batEvent

_$hasEvent

_$clearEvent

_$pushEvent

_$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/

云服务器 GPU云服务器 NEJ Event? Event event log

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/78175.html

mv**中，用数据层解决多个view对应不同model的问题

摘要：回调使用事件可以支持多个成功后的回调。实际生产中，如果模块的数据层管理使用场景只有一个，也不需要在操作中做相关操作。一般只需要实例化成单例提供管理数据的相关事件到不同的组件。说明博文中code例子是基于nej编写，如果你没使用过nej，也不会妨碍你理解代码。适用场景实际开发中常遇到不同model对应多个view。用户通过 View 层来交互，View 有时需要根据用户的数据更新...

tommego 2019-08-21 10:43 评论0 收藏0
nej jst模板语言标签

摘要：为内置变量，值为列表长度，上例中值为。语法备注循环时包含和值范例备注为内置变量，值为循环的索引值。描述遍历表语法注子语句为可选范例注为内置变量，值为当前项的键值。复制到这里一下，方便日后查询，源地址如果模板中存在将/换成/ 如何使用jst模板代码举例：序号姓名性别 {if !defined(worke...

马永翠 2019-08-21 13:44 评论0 收藏0
requirejs的插件介绍与制作

摘要：一句化即它是插件的插件，作者事后才发现有这么一个插件绕了不少弯路。这里的主要是为了保存这段内容用于打包使用。免费领取验证码内容安全短信发送直播点播体验包及云服务器等套餐更多网易技术产品运营经验分享请访问网易云社区。文章来源网易云社区本文由作者郑海波授权网易云社区发布。前言我这里就不介绍requirejs了，简而言之： requirejs是支持AMD规范的模块加载器，事实上它也是...

shinezejian 2019-06-28 11:09 评论0 收藏0
网易蜂巢（云计算基础服务）项目框架迁移指北（一）

摘要：此文已由作者张磊授权网易云社区发布。欢迎访问网易云社区，了解更多网易技术产品运营经验。前言在对蜂巢项目从迁移到的过程中，遇到的问题，以及在此过程中所使用的解决方案。三个头是一致的。文章来源网易云社区此文已由作者张磊授权网易云社区发布。欢迎访问网易云社区，了解更多网易技术产品运营经验。前言在对蜂巢项目从 nej + regularjs 迁移到 vue 的过程中，遇到的问题，以及在此...

taoszu 2019-06-28 11:00 评论0 收藏0
Babel 插件原理的理解与深入

摘要：抽象语法树是怎么生成的谈到这点，就要说到计算机是怎么读懂我们的代码的。需要注意什么状态状态是抽象语法树转换的敌人，状态管理会不断牵扯我们的精力，而且几乎所有你对状态的假设，总是会有一些未考虑到的语法最终证明你的假设是错误的。现在谈到 babel 肯定大家都不会感觉到陌生，虽然日常开发中很少会直接接触到它，但它已然成为了前端开发中不可或缺的工具，不仅可以让开发者可以立即使用 ES 规范...

draveness 2019-08-23 11:55 评论0 收藏0