【转】iPhone/iPad/Safari后退事件触发后刷新原来页面

以下内容转自赵昊鹏的博客,如有侵权,请联系我,我会立即删除
写在前面:此文很早之前就写好了,但是因为篇幅较短,一直安静地躺在草稿箱里。。。今天把它发出来吧
这几天在调微信 WKWebview 内核的问题,真的是好蛋疼啊。 发现一个问题,当我点击左上角的返回按钮,或者安卓上点击后退的时候,发生了两个不可思议的事情:
  1. 页面没有刷新,而是直接读取的缓存。
  2. 页面上绑定在window上的事件莫名其妙的消失了(例如onscroll)
这个时候,肯定就很自然的联想到了可能是微信内核引起的,二微信此次换内核,更换成的是苹果的 WKWebview 内核。Safari很早之前就使用了这个内核,而且微信官方明确表示,更换后,将和Safari 表现出高度的相似性。 所以这个问题就被我当成了 Safari的bug去搜,果然,最终解决办法如下:
var browserRule = /^.*((iPhone)|(iPad)|(Safari))+.*$/;
    if (browserRule.test(navigator.userAgent)) {
        window.onpageshow = function(event) {
            if (event.persisted) {
                window.location.reload()
            }
        };
    }
首先,我们需要判定它是 iPhone、iPad或者Safari 的一种,然后针对他们进行特殊处理。 window.onpageshow 是会在页面加载显示后触发,onpageshow 事件类似于 onload 事件,onload 事件在页面第一次加载时触发, onpageshow 事件在每次加载页面时触发,即 onload 事件在页面从浏览器缓存中读取时不触发。 为了查看页面是直接从服务器上载入还是从缓存中读取,你可以使用 PageTransitionEvent 对象的 persisted 属性来判断。 如果页面从浏览器的缓存中读取该属性返回 ture,否则返回 false。如上代码所示,如果是从缓存加载的,就刷新页面。 之前,reload方法被微信无情的枪毙掉了,但是换了内核之后,这个方法是好用的。 支持情况:
事件 Chrome IE  Firefox  Safari  Opera
onpageshow Yes 11.0 Yes 5.0 Yes
... 点开看看

create-react-app项目打的包如何修改资源根目录

2018-10-23更新 最完美的解决办法是在package.json最后添一个"homepage":"./" 下面的是常规方法

痛点

create-react-app创建的项目使用npm build打的包,必须通过形如http://localhost:3000这样的端口或者域名作为根目录。 否则如果直接在资源管理器中通过双击打开,页面空白。

问题所在

为了解决这种情况,通过f12查看了Elements,发现加载的script标签全都是scripts/开头的,而按我们需要的应该是形如./scripts/的相对路径。

解决办法

  1. npm eject: 将封装在 create-react-app 中的配置全部反编译到当前项目,以取得 webpack 文件的控制权
  2. 修改新出现的config/目录下的配置文件paths.js第37行(getServedPath函数)
/**
 * 原函数
 */
function getServedPath(appPackageJson) {
  const publicUrl = getPublicUrl(appPackageJson);
  const servedUrl =
    envPublicUrl || (publicUrl ? url.parse(publicUrl).pathname : '/';);
  // 修改上面最后的'/';
  return ensureSlash(servedUrl, true);
}
/**
 * 新函数
 */
function getServedPath(appPackageJson) {
  const publicUrl = getPublicUrl(appPackageJson);
  const servedUrl =
    envPublicUrl || (publicUrl ? url.parse(publicUrl).pathname : './';);
  // 改绝对路径'/';为相对路径'./';
  return ensureSlash(servedUrl, true);
}
... 点开看看

React VS Vue2

为什么选择react,而不是vue2

vue2的优点

vue1没有加入虚拟DOM,做服务端渲染很难,所以vue2引入了虚拟DOM的机制,而且由于vue2的响应式原理,所以天然的就比react的性能好,react的更新是通过顶层组件的state变化触发整个组件的重新渲染,而vue2由于其是通过getter/setter来进行数据管理,所以可以准确的定位到需要重新渲染的节点,避免了无效的re-render... 点开看看

ES6中的=>(箭头函数)与this


地球变暖和你们作死的添加JavaScript有莫大的关系。
每个人的浏览器多执行两个函数,CPU使用就要往上蹿一点,能耗就会增加,气温就会升高。一个网页被访问的人越多,地球的生态就会越发危险。
比起空调,JavaScript 才是罪魁祸首。你看到的每一个爆款页面,后面都是北极熊和企鹅的血泪。
从我做起,克制JavaScript的使用,让网页回到没有交互没有特效几乎啥也干不了的年代。否则,我们的子孙后代的家园会毁在你们今天每一个function里。 ... 点开看看