需求在开发vue的项目中有遇到了这样一个需求：一个视频列表页面，展示视频名称和是否收藏，点击进去某一项观看，可以收藏或者取消收藏，返回的时候需要记住列表页面的页码等状态，同时这条视频的收藏状态也需要更新, 但是从其他页面进来视频列表页面的时候不缓存这个页面，也就是进入的时候是视频列表页面的第一页一句话总结一下： pageAList->pageADetail->pageAList, 缓存pageAList, 同时该视频的收藏状态如果发生变化需要更新，...
单页面应用中的路由缓存问题通常我们在进行页面前后退时，浏览器通常会帮我们记录下之前滚动的位置，这使得我们不会在每次后退的时候都丢失之前的浏览器记录定位。但是在现在愈发流行的SPA(single page application 单页面应用)中，当我们从父级页面打开子级页面，或者从列表页面进入详情页面，此时如果回退页面，会发现之前我们浏览的滚动记录没有了，页面被置顶到了最顶部，仿佛是第一次进入这个页面一样。这是因为在spa页面中的...
feb-alive github地址 体验链接 使用理由 开发者无需因为动态路由或者普通路由的差异而将数据初始化逻辑写在不同的钩子里beforeRouteUpdate或者activated开发者无需手动缓存页面状态，例如通过localStorage或者sessionStorage缓存当前页面的数据feb-alive会帮你处理路由meta信息的存储与恢复为什么开发feb-laive？当我们通过Vue开发项目时候，是否会有以下场景需求？ /a跳转到/b后退到/a时候，希望从缓存中恢复页面再次跳转到/b时，...
feb-alive github地址 体验链接 Vue页面级缓存解决方案feb-alive (上) 在剖析feb-alive实现之前，希望大家对以下基本知识有一定的了解。 keep-alive实现原理history apivue渲染原理vue虚拟dom原理feb-alive与keep-alive差异性1. 针对activated钩子差异性keep-alive配合vue-router在动态路由切换的情况下不会触发activated钩子，因为切换的时候组件没有变化，所以只能通过beforeRouteUpdate钩子或者监听$route来实现数据更新，而fe...
缓存对于前端页面来说，是加速页面加载的利器之一，但也同时带来了很多问题，比如新版本发布之后，怎么替换客户端上的缓存文件呢？大家一般的的解决方案主要有以下几种形式， 一般情况1、添加版本号，在静态资源文件的引用链接后面添加版本号，这样每次发布的时候更新版本号，就能让叫客户端加载新的资源文件，避免再次使用缓存的老文件，如 <script src="//m.test.com/build/activity/js/commons.js?v=20170608"></script>2、文件...
1.css同名覆盖,解决方法：父组件加上scoped <style lang="scss" scoped>@import ./unbind.scss </style>子组件同名样式加上deep/deep/ .tabs-row {.items-wrp{padding-left: .34rem;}.item {margin:0 .12rem .16rem 0;}}2.事件全局绑定 绑在window或document或body上的事件，切换到下一个页面同样会被触发，需要销毁，也防止内存泄漏,全局绑定的事件如果是公用组件慎用off().on(),因为可能引用的其他的组件全局绑定的事件被移除des...
实现全站的页面缓存，前进刷新，返回走缓存，并且能记住上一页的滚动位置，参考了很多技术实现，github上的导航组件实现的原理要么使用的keep-alive，要么参考了keep-alive的源码，但是只用keep-alive没法实现相同path，不同参数展示不同view，这就有点坑了，所以需要结合自己要实现的功能，适当改造keep-alive，为了实现每次前进都能刷新，返回走缓存还能自动定位的功能，文章陆续从以下几个方面展开讲：两套技术方案可选，最后定...
相信每一个开发者都知道缓存的重要性。从头至尾有缓存的后台(memcached,xcache等。) 来减轻db的压力。对内容分发网络（CDN）缓存中希望你的浏览器缓存那些不止一次的加载资源。当然, 有客户端缓存,所以你不要重复昂贵的操作(即使是算法或大量的运算)。 这是介绍的是一个不错的javascript的方面的客户端解决方案,可选配支持HTML5本地存储器. Starting Simple 代码如下: function CacheProvider() { // values will be stored here ...
解决方法一：IE6 Hack脚本 代码如下: if(navigator.appName == "Microsoft Internet Explorer"){ var b_version=navigator.appVersion; var version=b_version.split(";"); var trim_Version=version[1].replace(/[ ]/g,""); if(trim_Version=="MSIE6.0"){ ;//alert("IE 6.0"); try { document.execCommand("BackgroundImageCache", false, fix); }catch(err){ } } } 解决方法二：IE6 Hack注释 代码如下: document.execComma...
细节决定成败！浏览器缓存的意义在于提高了执行效率，但是也随之而来带来了一些问题，导致服务端修改了js、css，客户端不能更新 方法一 生成随机数字 代码如下: 缺点，浏览器缓存失去意义，每次都动态加载。 方法二 版本号控制,设置全局变量，每次发布前版本号加1 代码如下: “> 推荐这种做法，这种做法比较简单。缺点是HTML页面不能使用，但是这种页面应该不太多 更多方法：采用读取文件大小、文件修改时间生成MD5的方式自动...
作用：在html中，给引用的js文件动态添加版本号，可以去掉js缓存，保证使用的js始终是最新的js 。这次方案是使用自定义标签完成。 不让页面缓存这些文件方法其实很多，但我们经常用的就这几样，这里我用到的是在资源后面加版本号来实现资源不缓存的功能，具体代码如下 package com.nglee.house.config.custom;import org.springframework.stereotype.Component; import org.thymeleaf.dialect.AbstractProcessorDialect; import or...
缘起最近实验课上需要重构以前写过的一个项目（垃圾堆），需要添加发生邮件提醒的功能，记得以前写过一个PHP版的实现，所以想把PHP写的功能整理成一个服务，然后在前端调用。但是这个项目是JavaWeb，也就是说我需要面对跨域的问题。不过本篇文章，讲的并不是如何解决这样的跨域问题，而是我在找如何解决这个问题的路上遇到的坑。其实，在前端工程化大行其道的现在，前后端已经分离开来，前端为了提高工作流效率往往自己开一个小型的...
用php提取IP作为JAVASCRIPT变量用提示"缺少';'"如果不用var frip=;是正常的否则提示function GetIP(){ if(!empty($_SERVER["HTTP_CLIENT_IP"])){缺少“；”------解决方案-------------------- var frip="";
今天在写一个js延时事件的时候发现在setTimeout这个方法里面使用jquery的$(this)竟然不起作用，各种测试，最后得出结论是setTimeout内不支持jquery的选择器。于是请教了一下QQ上做jquery开发的高手，马上就把这问题解决了，在这里记录一下。 下面是作者做延时处理时的js代码：$(.dl_select dt).hover( function(){ clearTimeout(t3); $(this).siblings(dd).css({display:block,cursor:pointer}); }, function(){ t2=setTimeout(fun...
前言 “那要怎么改？”，“那得改到什么时候？”，“什么时候才能支持这些功能？”。 再一次听到了这样的话，我沉默了。到底要怎样改，这也是我所思考的，最近一直忙于其他，已经有一段时间没有处理 issue 了，趁着调休，我也要好好思考下。 半年前，接触了 el-form-renderer ，瞬间感觉减轻了大部分表单编写的工作，一个简单的JSON配置，立刻展现出一个功能完好的表单页面。然而，随着使用的频率增加，却慢慢开始暴露各种不足，该...