19 сен 2013 в 18:33

AngularJS: Кеширование шаблонов в localstorage

Ожидает приглашения

Про данный фремворк, было написано достаточно много статей. Под впечатлением, наша команда в текущем проекте, так же решила его использовать. Впечатление от него достаточно положительное, большинство проблем решаются обычным «гуглением». Плюс наличие достаточно большого количества готовых наработок и примеров, доставляют большое удовольствие работы с ним. А отсутствие готовых модулей с легкостью компенсируется простотой расширения данного фреймворка. О данной возможности я хотел бы написать.

Все кто имел дело с данным фремворком знают, что система кеширования и загрузка шаблонов достаточно хорошо реализована. Но зачем каждый раз загружать шаблоны если их можно хранить в локальном хранилище? Что нам нужно для этого:

Переопределить templateCache провайдер
Реализовать методы CacheFactoryProvider

На хабре была хорошая статься Понимание типов сервисов в AngularJS. Которая нам поможет написать провайдер для нового функционала.

    app.provider('$templateCache', function(){
        this.$get = ['cacheFactoryLocalStorage', function($cacheFactoryLocalStorage) {
            return $cacheFactoryLocalStorage;
        }];
    });

$cacheFactoryLocalStorage — это фабрика вернет нужный объект. Про реализацию фабрики так же написано в выше приведенной статье.

    app.factory('cacheFactoryLocalStorage',[
        '$cacheFactory',
         function($cacheFactory){
        }]);
    });

Для реализации данной фабрики заглянем в исходники, в которые дают понять, что нужно реализовать несколько методов:

put: Кладем в кеш.

var setItemToCache = function(key, val){
    if(!val) return;
    var cacheVal = {
        val: val,
        time: new Date().getTime()
    };

    if(typeof templatesObj !== "undefined"){
        cacheVal['md5'] = templatesObj[key];
    }

    var item = localStorage.getItem('templateCache');
    var tmpObj = {};
    if(item){
        tmpObj = JSON.parse(item);
    }
    tmpObj[key] = cacheVal;

    localStorage.setItem('templateCache', JSON.stringify(tmpObj));
};

get: Получаем из кеша

var getItemStorageCache = function(key){

    var item = localStorage.getItem('templateCache');
    if(!item) return;
    var itemObj = JSON.parse(item);

    if(_.isUndefined(itemObj[key])) return;

    var templatesObjCache = itemObj[key];
    var dateCurrent = new Date();
    var dateItem = new Date(templatesObjCache.time);

    if(dateCurrent.getDaysBetween(dateItem)>1) return;
    if(typeof templatesObj !== "undefined" && typeof templatesObj[key] !== "undefined"){
        if(templatesObj['md5'] != templatesObjCache[key]) return;
    }
    if(_.isEmpty(templatesObjCache['val'])) return;
    return templatesObjCache['val'];

};

remove: Удаляем из кеша

var removeItemStorageCache = function(key){
    var item = localStorage.getItem('templateCache');
    if(!item) return;
    var itemObj = JSON.parse(item);
    if(_.isUndefined(itemObj[key])) return;
    delete itemObj[key];
    localStorage.setItem('templateCache', JSON.stringify(itemObj));
};

removeAll: Очищаем кеш

var removeAllCache = function(){
            localStorage.removeItem('key');
        };

Так же есть еще два метода:

destroy
info

Для этих методов поставим просто заглушки.
В итоге наша фабрика примет такой вид:

    app.factory('cacheFactoryLocalStorage',[
        '$cacheFactory',
         function($cacheFactory){
             var LocalStorageCache = {
                put: setItemToCache,
                get: getItemStorageCache,
                remove: removeItemStorageCache,
                removeAll: removeAllCache,
                destroy: function() {
    
                },
                info: function() {
                }
            };

            //проверяем поддержку браузера если нет возвращаем дефолтный кешер
            return  Modernizr.localstorage ? LocalStorageCache : $cacheFactory('templates');
        }]);
    });

Данный код не претендует на идеальность. Я просто хотел показать на сколько гибкий данный фреймворк.

Хабы: