Blog

Blog

PHODAL

Ionic Angular.js 混合应用缓存处理

在实现Ionic应用上的缓存时,遇到一些有意思的需求。

Ionic 不缓存数据

要实现这个功能的话,在Ionic有一个很简单的做法就是,直接在模板上加一个cache-view="false"

<ion-view cache-view="false" view-title="My Title!">
  ....
</ion-view>

这样的话,我们就可以很简单的实现这个功能了。但是问题来了,当我们后退的时候页面就会特定慢——因为没有缓存。

这时试着寻找了别的方法,如:

$state.go($state.current, {}, {reload: true});

又或者是:

$window.location.reload(true)

但是不能像预期一样工作。。

Ionic进入时不缓存,后退时缓存

于是便想了个方法,就是判断是不是后退。如果不是的话,调用数据:

 $scope.$on("$ionicView.beforeEnter", function() {
      function clearCacheForDetailPage() {
        var history = $ionicHistory.forwardView();
        var isLastViewCommentPages = history && history.stateName && (history.stateName === 'CommentView');
        if (!isLastViewCommentPages) {
          init();
        }
      }
      clearCacheForDetailPage();
    })

即,在这个时间调用init()方法,随后在首页清除数据:

  $scope.$on("$ionicView.beforeEnter", function() {
    var clearHistoryForIndexPage = function() {
      var history = $ionicHistory.forwardView();
      if(history && history.stateName) {
        $ionicHistory.clearHistory();
      }
    };
    clearHistoryForIndexPage();
  });

清除Angular Directive缓存

随后又遇到了一个有意思的问题,就是Directive是有缓存的,这时候又要逐一修改这些Directvie:

做法大致如下:

link: function(scope, element, attrs) {
    function render (value) {
        //
    );
    render($scope.value);
    scope.$watch("value",function(value) {
       render(value);
    });
 }

关于我

Github: @phodal     微博:@phodal     知乎:@phodal    

微信公众号(Phodal)

围观我的Github Idea墙, 也许,你会遇到心仪的项目

QQ技术交流群: 321689806

新书《前端架构:从入门到微前端》

《前端架构:从入门到微前端》是一本围绕前端架构的实施手册,从基础的架构规范,到如何设计前端架构,再到采用微前端架构拆分复杂的前端应用。本书通过系统地介绍前端架构世界的方方面面,来帮助前端工程师更好地进行系统设计。

前端架构包含以下五部分内容:

  • 设计:讲述了架构设计的模式,以及设计和制定前端工作流。
  • 基础:通过深入构建系统、单页面应用原理、前端知识体系等,来构建出完整的前端应用架构体系。
  • 实施:通过与代码结构的方式,介绍如何在企业级应用中实施组件化架构、设计系统和前后端分离架构。
  • 微前端:引入6种微前端的概念,以及如何划分、设计微前端应用,并展示了如何实现这6种微前端架构。
  • 演进:提出更新、迁移、重构、重写、重新架构等架构演进方式,来帮助开发人员更好地设计演进式架构。
comment

Feeds

RSS / Atom

最近文章

关于作者

Phodal Huang

Developer, Consultant, Writer, Designer

ThoughtWorks 高级咨询师

工程师 / 咨询师 / 作家 / 设计学徒

开源深度爱好者

出版有《前端架构:从入门到微前端》、《自己动手设计物联网》、《全栈应用开发:精益实践》

联系我: h@phodal.com

微信公众号: 与我沟通

标签