Angular 跨页缓存设计

自去年开始，AngularJS 引入到项目中，并逐渐推动公司产品核心模块进行重构，提升产品稳定性与开发效率。在前端架构演进的过程中最艰难的不是理解 API，而是思维方式被颠覆的无助，所有繁杂的事务都被高度抽象化，以前 WEB 富 UI 开发最头疼的表现部分放到现在几乎不费吹灰之力，前端工程师重心将由 UI 转向数据模型的构建。在这个过程中，小伙伴经常会遇到跨页数据传递这个经典问题，于是我在公司给组里同事做了一次分享，以下是概要：

业务场景

• 跨页选中操作
• 分步骤操作

问题

• Angular 跳转页面后，控制器实例被注销
• Angular 没有提供跨页传递临时数据的特性

可选方案

A. 超级单页

使用同一个控制器与同一份实例，不使用路由

缺点

• 无历史记录：不支持浏览器前进后退操作（体验差）
• 无URL：不支持收藏与分享地址（如果应用出BUG，客户无法提供 URL，导致售后成本变高）

B. URL传递数据

通过 URL 查询参数传递数据

缺点

• 可能引起安全问题
• 不支持复杂的数据模型（只支持String类型）

D. Ng Service 缓存

使用 Angular Service 构建内存缓存

权衡后，采用此方案。

实践遇到的问题

唯一性难以保证

• 可能使用未清理的缓存引起 BUG

内存泄露

• 过期的缓存得不到清理
• 缓存会连同控制器一起被 Ng Service 持有(闭包的缘故)

基于路由缓存设计

保证唯一性

• 在连续操作的页面 URL 中添加 cache key
• 在控制器中根据 cache key 匹配缓存

cacheKey

// 取 URL 的 cache key
var cacheKey = $routeParams['cache_key'];

读写缓存

if (!AppCache.cache || AppCache.key !== cacheKey) {

    // 覆盖 service 缓存
    AppCache.cache = createCache();
    AppCache.key = cacheKey || Date.now().toString();
}

发送缓存

// 通过路由传递缓存
$scope.submit = function () {
    var queryParam = angular.extend({
        'cache_key': AppCache.key
    },$routeParams);

    $location.search(queryParam);
}

解决内存泄露

• 在$routeChangeSuccess事件中清理缓存
• 避免在控制器中创建缓存（解除闭包）

清理过期缓存

$rootScope.$on('$routeChangeSuccess',function () {
    if ($routeParams['cache_key'] === undefined) {
        AppCache.cache = {};
    }
})

封装 RouteCache 服务

高度抽象，屏蔽实现细节

API 设计(第一版)

// 读缓存
var routeCache = RouteCache(createCache);
var data = routeCache.getCache();
var cacheKey = routeCache.getKey();

// 通过路由传递缓存
$scope.submit = function () {
    var queryParam = angular.extend({
        'cache_key': cacheKey
    },$routeParams);
    $location.search(queryParam);
}

API 设计(优化后)

// 读缓存
var data = RouteCache(createCache);

// 通过路由传递缓存
$scope.submit = function () {
    var queryParam = angular
         .extend({},data,$routeParams);
    $location.search(queryParam);
}

问题：如何做到 URL 只显示 cache_key 而不暴露数据？

答案：使用原型继承，angular.extend 不会拷贝原型。

RouteCache 内部：

data = createCache();
data = Object.create(data);
data['cache_key'] = cacheKey;

Object.create(data)是 ECMA5 增加的方法，原理类似：

Object.create = function (object) {
    function F(){};
    F.prototype = object;
    return new F();
}

RouteCache 服务完整源码

/*
 * 基于路由的缓存服务
 * 可以将任何数据模型缓存在路由参数中，适合处理跨页的数据传递
 *
 *  取缓存:
 *      $scope.data = RouteCache(cacheFactory);
 *  写缓存:
 *      $location.search(
 *          angular.extend(
*               {},*              $routeParams,*              $scope.data
 *          )
 *      );
 *
 * @author  糖饼
 */
define(['./services'],function (services) {

    services.factory('RouteCache',['$rootScope','$routeParams','$cacheFactory',function ($rootScope,$routeParams,$cacheFactory) {

        var cache = $cacheFactory('RouteCache');
        var ROUTE_KEY = '@cache_key';
        var TABLE_NAME = 'CACHE';


        /*
         * @param   {Function}  缓存工厂
         * @return  {Object}    继承自缓存的对象
         */
        function Cache (cacheFactory) {

            var data = cache.get(TABLE_NAME);
            var routeKey = $routeParams[ROUTE_KEY];


            if (!data || cache.get(ROUTE_KEY) !== routeKey) {

                data = cacheFactory();

                // 继承缓存
                data = Object.create(data);

                cache.put(TABLE_NAME,data);
                cache.put(ROUTE_KEY,routeKey || Date.now().toString());
            }


            data[ROUTE_KEY] = cache.get(ROUTE_KEY);

            return data;
        };


        // 自动清理缓存
        $rootScope.$on('$routeChangeSuccess',function () {
            if (typeof $routeParams[ROUTE_KEY] === 'undefined') {
                cache.removeAll();
            }
        });


        return Cache;
    }]);

});

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!