公告:由于博客https升级,原博客引用http链接失效,预览及部分图片效果请查看源代码!

Page Visibility API及Page Lifecycle API的介绍及应用

前言

今天主要介绍2个api,一个是Page Visibility API,一个是Page Lifecycle API,这两个api你可能用的不多,关于Page Visibility API,目前大部分主流浏览器已经支持。

Page Visibility API主要是监听网页是否隐藏,是否可见。Page Lifecycle API可以让我们对整个网页的生命周期有了更好的把控能力。

Page Visibility API

首先,我介绍一下Page Visibility API的应用场景

用户对我们的h5页面进行如下操作

1、用户点击了一条系统通知,切换到另一个 App。

2、用户进入任务切换窗口,切换到另一个 App。

3、用户点击了 Home 按钮,切换回主屏幕。

4、操作系统自动切换到另一个 App(比如,收到一个电话)

rollup打包js的注意点

前言

rollup比较适合打包js的sdk或者封装的框架等,例如,vue源码就是rollup打包的。webpack比较适合打包一些应用,例如SPA或者同构项目等等。最近我们对rollup小试牛刀了一下。简单分享一些注意事项吧。

rollup基础

rollup基础知识及插件的一些使用,网上有不少资料,可以去查阅。

blob对象介绍及相关应用

前言

后面有时间总结一下react相关知识和性能优化的东西,这些东西总结起来要花些时间。一直没有时间总结。今天的这个问题也是项目中用到的,之前没有写过,写在博客中,有需要的自取。主要是js流文件blob介绍及相关应用。

Blob对象

var blob = new Blob(dataArr:Array<any>, opt:{type:string});

dataArray:数组,包含了要添加到Blob对象中的数据,数据可以是任意多个ArrayBuffer,ArrayBufferView, Blob,或者 DOMString对象。

opt:对象,用于设置Blob对象的属性(如:MIME类型)

封装一个js获取window系统或者手机系统版本的方法

前言

今天1024程序员的节日,祝广大程序猿朋友节日快乐!最近比较忙,疏于总结。博客很久没有详细好好的写文章了。今天这篇文章也是平时用到的。就是一个积累函数吧。后面有时间好好总结一下。

通过navigator

navigator可以获取很多信息,我前面也有文章提及过,https://www.haorooms.com/post/js_navigator_bb

获取系统版本函数

单页应用中更优雅的操作dom

前言

以前的项目是jquery独行天下,但是随着单页应用的流行,很多公司放弃了jquery的使用,主要因为项目中dom操作较少,一般都是数据改变dom,但是假如项目中难免的操作一些dom的时候,我们可以完全用js的一些写法,完全没有必要小小的操作来引进一个那么庞大的jquery。 关于js替代jquery的一些函数我之前也有整理过,请看文章jquery属性的相关js实现方法

但是话说回来了,jquery用习惯了,$(),这种选择器已经深入人心。 虽然谷歌浏览器已经支持$$("body")的写法

$$('a') 等价于 document.querySelectorAll(“a”)

$$ 目前用的人毕竟很少,后期维护等也不是很方便。