cache - 缓存管理基类控件

是util里缓存管理的基类,对外提供事件注册,分发事件,提供从localStorage里存取,清除数据,从cache里存取删除数据。

事件的注册是为了服务器异步返回的请求到达客户端后异步的根据注册的事件返回给业务层, 这个基类,一般是去继承这个基类去做一下缓存数据的管理。

可以参照例子继承cache基类做一个缓存类。

Allocate

cache控件所在脚本 {lib}util/cache/cache.js

从cache继承生成一个类,注册的事件是ondataloaded这一事件,当缓存dispatch出这个事件时,业务程可以做相关的处理:

var f = function() {
            var _  = NEJ.P,
                _tu = _('t.u'),
                _p = _('nej.ut'),
                _proCustCache,
                _supCustCache;
        //参数的选择详见cache.js
        _p._$$CustCache = NEJ.C();
          _proCustCache = _p._$$CustCache._$extend(_p._$$Cache);
          _supCustCache = _p._$$CustCache._$supro;
       /**
         * 控件重置
         * @param  {Object} _options 可选配置参数
         * @return {Void}
         */
        _proCustCache._$loadData = function(_key){
            //send ajax request,一般情况下ajax的callback里dispatchEvent注册的事件
            //我这在这里做一个例子,这里写一个临时的数据,直接回调__loadData方法
            //先从缓存里取_key这个值存在不,要是不存在就发请求到后台
            if(!!this.__getDataInCache(_key))
                this._$dispatchEvent('ondataloaded',this.__getDataInCache(_key));
            else
                this.__loadData(_key,{type:1})
        };
        /**
         * 数据加载完回调
         * @param  {Number} _time 时间值
         * @return {Void}
         */
        _proCustCache.__loadData = function(_key,_data){
            this.__setDataInCache(_key,_data);
            this._$dispatchEvent('ondataloaded',_data);
        };

        var _cache = _p._$$CustCache._$allocate({ondataloaded:onDataLoaded});
        _cache._$loadData('_type')

        function onDataLoaded(_data){
           _tu._$log('ondataloaded:'+_data.type)
        }
}
define(['{lib}util/cache/cache.js', '{pro}js/extend.js'], f);

Explain

缓存一般都是异步的形式从后台取数据过来,数据返回后,dispatchEvent相对应的那个回调 输入的参数都是{ondataloaded:onDataLoaded,onxxx:onXXX}这样的一个对象,value是一个回调函数

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

_$$Cache external interface

cache.$setEvent(_options) 跳转到第几个tab

cache.$dispatchEvent(_type) 分发事件,触发回调函数

cache.$clearDataLocal 清除缓存

cache.list.js

列表缓存管理基类,从后台取过来的列表数据,存放在缓存中,以备下次需要时获取,不用理次去后台取数据,数据列表存在缓存中都有一个对应的key来存放这些列表数据。 cache.list.js列表缓存的基类,cache.list.base.js从cache.list.js继承,传入相应的回调函数以备相应操作时进行回调, 以下例子是从cache.list.base.js继承,实现了一个基本的列表缓存类。

var f = function() {
            var _  = NEJ.P,
                _tu = _('t.u'),
                _p = _('nej.ut'),
                _listCache,
                _proCustListCache,
                _supCustListCache;
        //参数的选择详见cache.js
        _p._$$CustListCache = NEJ.C();
          _proCustListCache = _p._$$CustListCache._$extend(_p._$$AbstractListCache);
          _supCustListCache = _p._$$CustListCache._$supro;
       /**
       *数据加载,此方法是通过ajax把数据取过来
       *@param  {Object}    _options
       *                            key     列表对应的key 
       */
       _proCustListCache.__doLoadList = function(_options){
            //通常是ajax请求数据,这里测试只是说明一下这个方法是用来取数据用,取完以后就会有onload回调,代表数据加载完毕
            _options.onload([{id:1,type:1},{id:2,type:2}]);
       }

       _listCache = _p._$$CustListCache._$allocate({onlistload:onListLoad});
       _listCache._$getList({key:'test',offset:0,limit:10});

       function onListLoad(_option){
           var _data = _listCache._$getListInCache(_option.key);
           for(var i=0,l=_data.length;i<l;i++){
                _tu._$log('id:'+_data[i].id+',type:'+_data[i].type);
           }
       }
}
define(['{lib}util/cache/cache.list.base.js', '{pro}js/extend.js'], f);

Explain

后台的列表数据的获取,缓存都用从cache.list.base.js继承过去,重写__doLoadList方法,根据不同的key从后台取不同的数据,取回来缓存起来,并通知页面数据已经取好, 页面收到已经取完数据的通知后马上从缓存中取数据,把数据呈现在页面上。getList支持分页数据的缓存

_$$AbstractListCache external interface

cache.list.js 对外接口

_$setTotal(_key) 设置对应key的列表总数,以备翻页时用

_$getTotal(_key) 获取对应key的列表总数,以设置播页器用

_$setLoaded(_key) 设置对应key的列表已经加载完毕

_$getListInCache(_key) 获取对应key的列表数据,是已经存在cache里的列表

_$getList(_options) 获取对应的列表数据,如果列表已经在缓存中,触发onlistloaded回调,如果没有根据_options里的参数发送请求数据

_$clearListInCache(_key)清除对应key的缓存数据,使期失效,下次请求时从服务器取数据

_$getItemInCache(_id) 获取对应id的一个项数据

Recycle

listCache.$recycle(); 一般情况下这个_listCache是不要回收的,要是回收了缓存失效,相当于没有缓存数据了

Known Issues

Demo

cache控件demo

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