event - 控件基类

所有的控件都继承于event类,ui控件,util控件都继承于此,他的核心是管理事件,在添加完事件后,可以用_$dispatchEvent('eventtype'),来触发eventtype的回调事件,控件需要和个界进行通信,都是在reset时把事件添加,要通信时dispatchEvent触发事件回调,以达到模块外部的逻辑改变

1.从从父类继承

_p._$$Widget = NEJ.C();
_proWidget = _p._$$Widget._$extend(nej.ut._$$Event);

2.重写控件初始化业务逻辑

_proWidget.__init = function(_options){
     // _options - 配置参数信息
     //            初始化时一般不对该参数做处理
     // 调用父类初始化业务逻辑
     this.__supInit(_options);
     // TODO something
};

3.重写控件重置业务逻辑

_proWidget.__reset = function(_options){
    // _options - 配置参数信息
    //            此处重置控件配置信息
    // 调用父类重置业务逻辑
    this.__supReset(_options);
    // TODO something
};

4.重写控件回收业务逻辑

_proWidget.__destroy = function(){
    // 调用父类回收业务逻辑
    this.__supDestroy();
    // TODO something
};

Allocate

event控件基类所在脚本 {lib}util/event.js

创建一个控件,event的控件多数是给ui或util继承制作控件,做一个控件,当在item里点调编辑时,这一项的item数据放到编辑区域,更新后把编辑的数据呈现到table里

var f = function(){
    var _  = NEJ.P,
        _e = _('nej.e'),
        _o = NEJ.P('nej.o'),
        _v = NEJ.P('nej.v'),
        _ui = NEJ.P('nej.ui'),
        _p = _('nej.demo'),
        _proWorkerItem,
        _supWorkerItem;


    var _key = _e._$addNodeTemplate('<div class="m-item m-hd f-cb">\
                                        <div class="f-fl col0"><input type="checkbox" class="ztag"/></div>\
                                        <div class="f-fl col1 ztag">序号</div>\
                                        <div class="f-fl col2 ztag">姓名</div>\
                                        <div class="f-fl col3 ztag">性别</div>\
                                        <div class="f-fl col4"><a href="javascript:void(0);" class="ztag act">删除</a><a href="javascript:void(0);" class="ztag act">编辑</a></div>\
                                    </div>');
    // 工人项
    _p._$$WorkerItem = NEJ.C();
    _proWorkerItem = _p._$$WorkerItem._$extend(_ui._$$Item, !0);
    _supWorkerItem = _ui._$$Item.prototype;
    /**
     * 控件初始化
     * @return {Void}
     */
    _proWorkerItem.__init = function(_opt){
        this.__super(_opt);
        _opt = _opt || _o;
        this.__onCheck = _opt.oncheck;
    };
    /**
     * 初始化节点,子类重写具体逻辑
     * @return {Void}
     */
    _proWorkerItem.__initNode = function(){
        this.__body = _e._$getNodeTemplate(_key);
        var _etds = _e._$getByClassName(this.__body,'ztag');
        this.__ecb = _etds[0];//this.__body.getElementsByTagName('input')[0];
        this.__enumber = _etds[1];
        this.__ename = _etds[2];
        this.__egender = _etds[3];
        this.__edelete = _etds[4];
        this.__edit = _etds[5];
        _v._$addEvent(this.__edelete, 'click', this.__onClickDelete._$bind(this));
        _v._$addEvent(this.__ecb, 'click', this.__onClickCheck._$bind(this));
        _v._$addEvent(this.__edit, 'click', this.__onClickEdit._$bind(this));
    };
    /**
     * 刷新项,子类实现具体逻辑
     * @return {Void}
     */
    _proWorkerItem.__doRefresh = function(_data){
        this.__enumber.innerText = this.__index + 1;
        this.__ename.innerText = _data.name;
        this.__egender.innerText = _data.gender?'男':'女';
        if(this.__index+1 == this.__end)
            _e._$addClassName(this.__body, 'last');
    };

    /**
     * 点击编辑事件响应
     * @return {Void}
     */
    _proWorkerItem.__onClickEdit = function(){
        this._$dispatchEvent('onedit',this.__data);
    };
    /**
     * 点击删除的响应函数
     * @param {Object} _event   事件对象
     */
    _proWorkerItem.__onClickDelete = function(_event){
        //alert('删除"' + this.__data.name + '"');
        this.__destroy();
    };
    /**
     * 点击复选框的响应函数
     * @param {Object} _event   事件对象
     */
    _proWorkerItem.__onClickCheck = function(_event){
        this.__onCheck&&this.__onCheck(this);
    };
    /**
     * 控件销毁
     * @return {Void}
     */
    _proWorkerItem.__destroy = function(){
        _supWorkerItem.__destroy.apply(this, arguments);
        this.__ecb.checked = false;
        _e._$delClassName(this.__body, 'last');
    };
    /**
     * 获取数据
     * @return  {Object}    数据
     */
    _proWorkerItem._$getData = function(){
        return this.__data;
    };
    /**
     * check该项
     * @param {Boolean} _checked
     */
    _proWorkerItem._$check = function(_checked){
        this.__ecb.checked = !!_checked;
    };
    /**
     * 获取该项是否选中
     * @return  {Boolean} _checked  是否选中
     */
    _proWorkerItem._$checked = function(){
        return this.__ecb.checked;
    };
};
define('{pro}js/item.js', ['{lib}ui/item/item.js', '{lib}util/template/tpl.js'], f);

生成这些item时需要加onedit回调函数,通过event的事件管理,可以在_$dispatchEvent时找到相对应的回调函数 分配item时如下:

var f = function(){
    var _  = NEJ.P,
        _e = _('nej.e'),
        _o = NEJ.P('nej.o'),
        _v = NEJ.P('nej.v'),
        _u = NEJ.P('nej.u'),
        _ui = NEJ.P('nej.ui'),
        _tu = NEJ.P('t.u'),
        _p = _('nej.demo'),
        _workItems;
    // 页面初始化接口
    var _ename = _e._$get('ename'),
        _eid = _e._$get('eid'),
        _egender = _e._$get('egender'),
        _econtent = _e._$get('content');

    function init(){
        var _data = {workers: [{name:'魏文庆', gender:1,id:1}, {name:'严跃杰', gender:1,id:2}, {name:'张晓容',id:3}]}; 
        _v._$addEvent('allocate', 'click', function(){
            // 点击"分配模板"按钮的消息响应

            _e._$empty(_econtent);
            workItems = _e._$getItemTemplate(_data.workers, _p._$$WorkerItem, {
                parent: _econtent,
                oncheck: onCheck,
                onedit:onEdit
            });
        });
        _v._$addEvent('recycle', 'click', function(){
            // 点击"回收模板"按钮的消息响应
            _p._$$WorkerItem._$recycle(workItems);
        });
        _v._$addEvent('selectAll', 'click', onClickSelectAll);
        _v._$addEvent('delete', 'click', onClickDelete);
        _v._$addEvent('update', 'click', function(_event){
            if(_eid.value=='')
                alert('没有编辑项')
            else{
                var _index = _u._$indexOf(_data.workers,function(_item){return _item.id==eid.value});
                _data.workers[_index].name = _ename.value;
                _data.workers[_index].gender = (_egender.value.indexOf('男')!=-1?1:0);
                _p._$$WorkerItem._$recycle(workItems);
                workItems = _e._$getItemTemplate(_data.workers, _p._$$WorkerItem, {
                    parent: _econtent,
                    oncheck: onCheck,
                    onedit:onEdit
                });
            }
        });
    }
    /**
    * 编辑回调
    *  @param   {Object}    _data   数据
    */
    function onEdit(_data){
        _ename.value = _data.name;
        _egender.value = _data.gender==1?'男':'女';
        _eid.value = _data.id;
    }
    /**
     * 工人项check的回调函数
     * @param {Object} _item    工人项
     */
    function onCheck(_item){
        var _checkedItems = getCheckedItems();
        var _eselectAll = _e._$get('selectAll');
        var _checked;
        if (!_checkedItems||!_checkedItems.length) {
            _eselectAll.checked = false;
            return;
        }
        if (_checkedItems.length == workItems.length) {
            _eselectAll.checked = true;
        }
    }
    /**
     * 获取所有的选中项
     * @return  {Array} 选中项列表
     */
    function getCheckedItems(){
        var _items = [];
        _u._$forEach(workItems, function(worker){
            if(worker._$checked()){
                _items.push(worker);
            }
        });
        return _items;
    }
    /**
     * 点击"删除"按钮的响应函数
     * @param {Object} _event   事件对象
     */
    function onClickDelete(_event){
        var _checkedItems = getCheckedItems();
        var _arr;
        if(_checkedItems.length){
            _arr = [];
            _u._$forEach(_checkedItems, function(_item){
                var _data = _item._$getData();
                _arr.push(_data&&_data.name);
            });
            _p._$$WorkerItem._$recycle(_checkedItems);
        }
    }
    /**
     * 点击"全选"复选框的响应函数
     * @param {Object} _event   事件对象
     */
    function onClickSelectAll(_event){
        var _checked = v._$getElement(_event).checked;
        _u._$forEach(workItems, function(_worker){
            _worker._$check(_checked);
        });
    }
    init();

    _tu._$processCode();
};
define(['{lib}base/element.js','{lib}base/event.js','{pro}js/event.js', '{pro}js/extend.js'], f);

如果要生成的是一个单例,可以用event提供的,进行生成

var _widget = _p._$$Widget._$getInstance({
       conf0:'aaaaaaa',
       conf1:'bbbbbbbbbbbbb',
       onxxx:function(){
           // TODO something
       }
   });

Explain

参数

event的参数都是逻辑需要用来模块间能信的一对键值,凡是值是function参数,在reset时都会添到事件到event的缓存,在_$dispatchEvent时用来调用,所有的控件的回调都是在这个基础类里进行定义

更多的参数信息请参照event.js api说明

Recycle

回收方法 widget.$recycle();

或是用

_p._$$Widget._$recycle(_widget);

或是多个实例

_p._$$Widget._$recycle([_widget0,_widget1]);

在回收前和回收后都可以有事件分发,用来进行相对应的逻辑控件如

_proWidget.__destroy = function(){
       // 触发回收之前事件
       this._$dispatchEvent('onbeforerecycle');
       // 调用父类清理逻辑,如果有触发回收之后事件则以下业务逻辑需在触发回收之后事件后面调用
       //this.__supDestroy();
       // 清理本控件的数据
       this.__widget2 = this.__widget2._$recycle();
       // 触发回收之后事件,确保在onafterrecycle事件被清理前触发
       this._$dispatchEvent('onafterrecycle');
       this.__supDestroy();
};

Event external interface

_$allocate(_options)        分配控件

_$recycle(_instance)        类回收控件

_$getInstance(_options)     单例获取

_$recycle()                 实例回收

_$hasEvent(_type)           是否已经存在该事件

_$addEvent(_type,_event)    添加事件           

_$setEvent(_type,_event)    设置事件,如查已经存在重写

_$batEvent(_options)        批量的添加事件

_$clearEvent()              清除控件事件

_$pushEvent(_type,_event)   追加事件,如果原先的已经有事件,则生成一个事件数据,进行追回

_$dispatchEvent(_type)      分发事件,如_type的类型是pushEvent进来的,则进行遍历,触发所有的事件

Known Issues

Demo

控件基类demo

© 1997-2013 Netease. All Rights Reserved.
comments powered by Disqus