vicvinc

vicvinc 查看完整档案

西安编辑  |  填写毕业院校XOR  |  FE Full-Stack 编辑 vicvinc.giithub.io 编辑
编辑

2234

个人动态

vicvinc 赞了回答 · 2018-11-06

解决leetcode关于3Sum问题javascript的解决方案

楼上的大佬已经回复了,还是弱弱地自荐一下我的 repo... https://github.com/hanzichi/l...

关注 4 回答 2

vicvinc 赞了文章 · 2018-09-14

Ios中微信页面返回上一页去除缓存几种常见思路

前言

这篇文章主要讲解决思路,不对各种概念进行过多讲解。

问题描述

开发微信H5页面的时候,在Ios微信内置浏览器中点击返回按钮返回上一页时,上一页面不会被刷新。
在浏览器缓存机制中,在返回上一页的操作中, html/js/css/接口等动静态资源不会重新请求,但是js会重新加载。但在Ios微信页面中js也会保存上一页面最后执行的状态,不会重新执行js。
使用这种模式缓存机制可以加快渲染速度,但是部分数据需要经常展示和编辑的情况下回导致不同步。比如“详情页”跳转到“编辑页”,在“编辑页”中修改数据后返回到详情页中,“详情页”数据展示并未进行同步修改。

产生原因

这里提到一个概念,浏览器前进/后退缓存,(Backward/Forward Cache,BF Cache),当然也有人叫disk Cache。
BF Cache 是一种浏览器优化,HTML标准并未指定其如何进行缓存,因此缓存行为是各浏览器实现不尽相同。
由于不是Http缓存,所以通过头文件缓存设置no-cache是无效的。当然也不能以Http缓存机制来理解BF Cache。

解决思路

从网上看了几种比较常见的解决思路,下面简单讲解。

设置浏览历史当前记录

history.replaceState方法的参数与pushState方法一模一样,区别是它修改浏览历史中当前纪录。

var href = location.href;
var time = new Date().getTime();
href += href.indexOf('?') > -1 ? ('&time='+time) : ('?time=' + time);

history.replaceState({}, "title", href);
// 比如当前页面地址为http://www.a.com; 通过history.replaceState修改后当前地址会变为http://www.a.com?time=xxx

网上这种解决思路比较多,实际情况中并不可行。
原因:Ios微信中调整到下一页面后并未将上一页面修改的url保持在历史记录中,以代码为例,返回上一页并未返回到http://www.a.com?time=xxx
而是返回到http://www.a.com中。

通过时间差来判断是否需要重置

var prev = parseInt(new Date().getTime() / 1000);
var now = prev;

window.setInterval(function() {
    now = parseInt(new Date().getTime() / 1000);
    
    // 当前步骤与上一步骤时间差超过1秒,表示页面已经跳转过
    // 时间差需要与间隔时间相对应
    if (now - prev > 1) {
        location.reload();
    } else {
        prev = now;
    }
// 间隔时间设置为1秒
}, 1000);

原理:通过判断当前步骤与上一步骤的时间差来判断是否需要更新
缺点:

间隔轮询时间差长度设置为多久比较好,不好掌控;
通过setInterval设置的间隔时间差并不是很精确;
并且两个页面之间的反复切换速度非常迅速的情况下也许会出现监测不到的现象。

通过localStorage控制是否需要刷新

localStorage.setItem("need-refresh", true);
$(function () {
    var needRefresh = localStorage.getItem("need-refresh");
    if(needRefresh) {
        localStorage.removeItem("need-refresh");
        location.reload();
    }
});

原理:通过获取浏览器保存的key来决定页面是否需要刷新
缺点:当页面关闭再重新打开时,key(也就是代码中的need-refresh)key值为true,会导致页面加载两次,造成重复渲染

通过pageshow事件决定是否需要刷新页面

window.addEventListener('pageshow', function(e) {
    // 通过persisted属性判断是否存在 BF Cache
    if (e.persisted) {
        location.reload();
    }
});

原理:pageShow事件在页面显示即会触发,无论页面是否来自BF Cache。通过检测persisted属性即可判断是否存在 BF Cache 行为。
优点:大部分浏览器都支持pageShow方法与persisted属性,并且需要的代码量只需要短短4行即可。
缺点:每种浏览器中BF Cache的机制是不同的,部分浏览器中的Bf Cache还是会重新执行js代码,会造成重复渲染效果。当然这篇文章中我们只考虑Ios中的微信页面, 所以是不存在问题。

参考资料

关于浏览器缓存
浏览器前进/后退缓存(BF Cache)
浏览器页面进入、离开事件:pageshow/pagehide

查看原文

赞 20 收藏 29 评论 11

vicvinc 赞了回答 · 2018-08-13

解决Vue报错:Uncaught RangeError: Maximum call stack size exceeded

https://segmentfault.com/q/10...

看看这个问题里我的答案

检查一下你起webpack-dev-server的方式和你的webpack.config.js

关注 4 回答 4

vicvinc 赞了回答 · 2018-08-13

解决关于使用react时页面提示的错误

应该是webpack热修复的问题,我也有遇到过。

这里注意如果利用webpack-dev-server cli 并且加了--hot 这个选项,就不要在这里加入new webpack.HotModuleReplacementPlugin()这个插件了,否则会报Maximum call stack size exceeded错误。

from:http://www.jianshu.com/p/976c...

关注 5 回答 3

vicvinc 赞了回答 · 2017-07-25

解决js如何用正则匹配简单的类似XML标间之间的内容?

供参考

var content = (/<([^>]+)>([^<>]+)<\/\1>/m.exec(str) || [,,''])[2].trim()

关注 5 回答 3

vicvinc 提出了问题 · 2017-07-25

解决js如何用正则匹配简单的类似XML标间之间的内容?

要匹配的文本字符如:

<A>content</A>

content可能是另一个节点,也可能不是,比如:

<A>
    <B>
        contnet
    </B>
</A>

如何将中间的content匹配出来?

如果每次匹配最外层的tag,那么只要递归一下就可以找到content

想了好久,找不到匹配闭合尾tag的表达式,求帮忙~

下面是我写的

/^<([A-Z]{1,9})>(.*)<\/\1>$/

关注 5 回答 3

vicvinc 回答了问题 · 2017-07-13

vue中如何获取url传递的参数

用vue router的时候可以直接从this.$route.query或者this.$route.params里面取

关注 5 回答 3

vicvinc 回答了问题 · 2017-07-13

解决最近学习react事件处理中的bind,有一句读不懂求解答

为了让函数执行的this总是指向当前组件吧,比如你要把父组件的函数给子组件当回调使用的时候

关注 5 回答 4

vicvinc 赞了回答 · 2017-03-30

解决async/await怎么获取fetch的结果?

只要函数使用async/await,所有包含该函数的嵌套函数都得使用async/await.
下次代码也复制过来,贴图不好回复代码。

export const login = async() => {
    let result = await fetchAsync();
}

soonfy

关注 5 回答 4

vicvinc 赞了回答 · 2017-03-30

解决async/await怎么获取fetch的结果?

async函数的返回值一定是Promise。

你可以像其他的Promise一样使用它: Promise.then()或await

关注 5 回答 4

认证与成就

  • 获得 10 次点赞
  • 获得 59 枚徽章 获得 4 枚金徽章, 获得 21 枚银徽章, 获得 34 枚铜徽章

擅长技能
编辑

开源项目 & 著作
编辑

(゚∀゚ )
暂时没有

注册于 2013-04-14
个人主页被 712 人浏览