摘要:所有我們?cè)诘臅r(shí)候需要將參數(shù)反轉(zhuǎn)一下處理中的所有事件,如果有定義事件,將事件和回調(diào)函數(shù),傳入實(shí)例的對(duì)象中調(diào)用父類的重置方法。獲取事件類型之外的所有參數(shù)參數(shù)傳入事件函數(shù)調(diào)用可以說(shuō)是框架的基石,的強(qiáng)大功能都是基于此類。
基類 NEJ.C() 定義
NEJ框架中定義一個(gè)類統(tǒng)一使用NEJ.C方法,使用范例如下所示:
/** * 類描述信息 * @class 類名稱 * @extends {nej.ut._$$Event} * @param {Object} _options 可配置參數(shù),已處理參數(shù)列表如下 * * */ _p._$$Class = NEJ.C();
通過(guò)此方法定義的類具有一下特性:
類具有靜態(tài)方法_$extend,可以從其他類繼承
實(shí)例具有__init方法用來(lái)初始化控件,該方法中通過(guò)__supInit調(diào)用父類__init方法
繼承通過(guò)NEJ.C定義的類具有靜態(tài)方法_$extend,可以從其他類集成,使用范例如下所示
//變量聲明 var _ = NEJ.P, _p = _("nej.ut"), _x = _("m.x");//定義命名空間 /** * 類描述信息 * @class 類名稱 * @extends {nej.ut._$$Event} * @param {Object} _options 可配置參數(shù),已處理參數(shù)列表如下 * * */ _x._$$Class = NEJ.C(); _proClass = _x._$$Class._$extend(_p._$$Event); //console.log(new _x._$$Class);實(shí)現(xiàn)
通過(guò)NEJ.C定義的類會(huì)有__init方法來(lái)初始化類,該方法中可以通過(guò)__supInit調(diào)用父類的初始化方法。
下圖展示了$$Event的所有方法。
注意:$開頭的方法為公開方法,__開頭的為私有方法不能在外部調(diào)用
_p._$$Event._$allocate = function(_options){ _options = _options||{}; //查看緩存池中是否有可用實(shí)例,如果有就是用緩存池中的實(shí)例 var _instance = !!this.__pool &&this.__pool.shift(); if (!_instance){ //新建實(shí)例 _instance = new this(_options); this.__inst__ = (this.__inst__||0)+1; } // 子類繼承該方法重置控件 _instance.__reset(_options); return _instance; };
類初始化方法
_pro.__init = function(){ this.__events = {}; this.__events_dom = {}; this.id = _u._$uniqueID(); };
下面我們來(lái)看看控件基類的重置方法都做了些什么事情。
_pro.__reset = function(_options){ this._$batEvent(_options); }; _pro._$batEvent = (function(){ /** * _forIn(object,function(_value,_key){},this) * 所有我們?cè)?_$setEvent的時(shí)候需要將參數(shù)反轉(zhuǎn)一下 */ var _doSetEvent = function(_event,_type){ this._$setEvent(_type,_event); }; return function(_events){ _u._$forIn(_events,_doSetEvent,this); }; })(); _pro._$setEvent = function(_type,_event){ //處理options中的所有事件,如果有定義事件,將事件和回調(diào)函數(shù),傳入實(shí)例的__events對(duì)象中 if (!!_type&&_u._$isFunction(_event)){ this.__events[_type.toLowerCase()] = _event; } };
調(diào)用父類的重置方法。
調(diào)用父類的銷毀方法
/** * 初始化DOM事件,重置接口{#__reset}中需要通過(guò) * {nej.v#_$addEvent}接口添加的事件,使用此接口添加可以在回收時(shí)自動(dòng)被清理 * [code] * // 子類重置接口添加節(jié)點(diǎn)事件 * _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); }; })();
_pro._$setEvent = function(_type,_event){ if (!!_type&&_u._$isFunction(_event)){ this.__events[_type.toLowerCase()] = _event; } };
這個(gè)函數(shù)功能非常強(qiáng)大。
_pro._$dispatchEvent = function(_type){ var _type = (_type||"").toLowerCase(), _event = this.__events[_type]; if (!_event) return; //獲取事件類型之外的所有參數(shù) var _args = _r.slice.call(arguments,1); // single event if (!_u._$isArray(_event)){ //參數(shù)傳入事件函數(shù)調(diào)用 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可以說(shuō)是NEJ框架的基石,NEJ的強(qiáng)大功能都是基于此類。
參考:http://nej.netease.com/course/topic/component/
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://m.hztianpu.com/yun/78175.html
摘要:回調(diào)使用事件可以支持多個(gè)成功后的回調(diào)。實(shí)際生產(chǎn)中,如果模塊的數(shù)據(jù)層管理使用場(chǎng)景只有一個(gè),也不需要在操作中做相關(guān)操作。一般只需要實(shí)例化成單例提供管理數(shù)據(jù)的相關(guān)事件到不同的組件。 說(shuō)明 博文中code例子是基于nej編寫,如果你沒使用過(guò)nej,也不會(huì)妨礙你理解代碼。 適用場(chǎng)景 實(shí)際開發(fā)中常遇到不同model對(duì)應(yīng)多個(gè)view。用戶通過(guò) View 層來(lái)交互,View 有時(shí)需要根據(jù)用戶的數(shù)據(jù)更新...
摘要:為內(nèi)置變量,值為列表長(zhǎng)度,上例中值為。語(yǔ)法備注循環(huán)時(shí)包含和值范例備注為內(nèi)置變量,值為循環(huán)的索引值。描述遍歷表語(yǔ)法注子語(yǔ)句為可選范例注為內(nèi)置變量,值為當(dāng)前項(xiàng)的鍵值。 復(fù)制到這里一下,方便日后查詢,源地址如果模板中存在 將/換成/ 如何使用jst模板 代碼舉例: 序號(hào)姓名性別 {if !defined(worke...
摘要:一句化即它是插件的插件,作者事后才發(fā)現(xiàn)有這么一個(gè)插件繞了不少?gòu)澛贰_@里的主要是為了保存這段內(nèi)容用于打包使用。免費(fèi)領(lǐng)取驗(yàn)證碼內(nèi)容安全短信發(fā)送直播點(diǎn)播體驗(yàn)包及云服務(wù)器等套餐更多網(wǎng)易技術(shù)產(chǎn)品運(yùn)營(yíng)經(jīng)驗(yàn)分享請(qǐng)?jiān)L問(wèn)網(wǎng)易云社區(qū)。文章來(lái)源網(wǎng)易云社區(qū) 本文由作者鄭海波授權(quán)網(wǎng)易云社區(qū)發(fā)布。 前言我這里就不介紹requirejs了, 簡(jiǎn)而言之: requirejs是支持AMD規(guī)范的模塊加載器, 事實(shí)上它也是...
摘要:此文已由作者張磊授權(quán)網(wǎng)易云社區(qū)發(fā)布。歡迎訪問(wèn)網(wǎng)易云社區(qū),了解更多網(wǎng)易技術(shù)產(chǎn)品運(yùn)營(yíng)經(jīng)驗(yàn)。前言在對(duì)蜂巢項(xiàng)目從遷移到的過(guò)程中,遇到的問(wèn)題,以及在此過(guò)程中所使用的解決方案。三個(gè)頭是一致的。文章來(lái)源網(wǎng)易云社區(qū) 此文已由作者張磊授權(quán)網(wǎng)易云社區(qū)發(fā)布。 歡迎訪問(wèn)網(wǎng)易云社區(qū),了解更多網(wǎng)易技術(shù)產(chǎn)品運(yùn)營(yíng)經(jīng)驗(yàn)。 前言在對(duì)蜂巢項(xiàng)目從 nej + regularjs 遷移到 vue 的過(guò)程中,遇到的問(wèn)題,以及在此...
摘要:抽象語(yǔ)法樹是怎么生成的談到這點(diǎn),就要說(shuō)到計(jì)算機(jī)是怎么讀懂我們的代碼的。需要注意什么狀態(tài)狀態(tài)是抽象語(yǔ)法樹轉(zhuǎn)換的敵人,狀態(tài)管理會(huì)不斷牽扯我們的精力,而且?guī)缀跛心銓?duì)狀態(tài)的假設(shè),總是會(huì)有一些未考慮到的語(yǔ)法最終證明你的假設(shè)是錯(cuò)誤的。 現(xiàn)在談到 babel 肯定大家都不會(huì)感覺到陌生,雖然日常開發(fā)中很少會(huì)直接接觸到它,但它已然成為了前端開發(fā)中不可或缺的工具,不僅可以讓開發(fā)者可以立即使用 ES 規(guī)范...
閱讀 3331·2023-04-25 20:35
閱讀 3674·2019-08-30 15:54
閱讀 2063·2019-08-30 15:43
閱讀 2238·2019-08-29 15:14
閱讀 1959·2019-08-29 11:17
閱讀 3440·2019-08-26 13:36
閱讀 752·2019-08-26 10:15
閱讀 2920·2019-08-23 15:41