NEJ _$$Event類

BenCHou 發布于2019-08-19 14:55 / 2090人閱讀

摘要：所有我們在的時候需要將參數反轉一下處理中的所有事件，如果有定義事件，將事件和回調函數，傳入實例的對象中調用父類的重置方法。獲取事件類型之外的所有參數參數傳入事件函數調用可以說是框架的基石，的強大功能都是基于此類。

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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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