H5新方法总结

聚散飘渺

已于 2023-06-30 17:38:55 修改

阅读量362

点赞数

分类专栏： H5 文章标签：前端 html5

于 2019-03-28 16:05:45 首次发布

本文链接：https://blog.csdn.net/qq_36379070/article/details/88664735

版权

H5 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1、通过blol对象来下载文件

2、新增classList来管理类名

3、新增dataset来管理标签的自定义属性

1、通过blol对象来下载文件

 const blob = new Blob([oFile])
 const url = window.URL.createObjectURL(blob)
//接着便可以把url赋值给img标签实现图片预览或者a标签自动下载文件

2、新增classList来管理类名

element.classList.add("class1") //添加类名
element.classList.remove("class1") //移除类名
element.classList.toggle("class1") //有则删无则加
element.classList.contains("class1") //判断是否有class1这个类名
element.classList.replace('class1','class2') //替换类名

3、新增dataset来管理标签的自定义属性

<div id="box" data-a='123'></div>
<script>
const box = document.querySelector("#box");
box.dataset.a  //获取
box.dataset.a  = 234  //设置

3、编码成base64位和解码

btoa('hello')
"aGVsbG8="
atob('aGVsbG8=')
"hello"

注意：中文需要先进行URI编码 encodeURI(str)

4、本地存储

cookie、localStorage、sessionStorage三者的区别具体可以看这里https://mp.csdn.net/postedit/82501985

      window.localStorage.setItem('key','value') //设置
      window.localStorage.getItem('key') //获取
      window.localStorage.removeItem('key') //通过'key'来删除'value'
      window.localStorage.clear() //删除所有
    
      window.sessionStorage.setItem('key','value') //设置
      window.sessionStorage.getItem('key') //获取
      window.sessionStorage.removeItem('key') //通过'key'来删除'value'
      window.sessionStorage.clear() //删除所有

5、worker多线程

用法：

创建多线程对象
发送数据
把比较复杂的运算放在多线程里，然后把计算完的结果返回给前端

    //前端
    var w = new Worker('./worker.js'); //创建多线程对象
    w.postMessage(50000); //发送数据
    w.onmessage = function (e) { //监听多线程返回的数据
      console.log(e.data) //处理完成
    }

//多线程
self.onmessage = function (e) { //监听前端发送过来的数据 50000
    for (var i = 0; i < e.data; i++) { 
    }
    self.postMessage('处理完成') //返回给前端
}

6、离线存储

在地铁、飞机上、电梯等一些场合下手机信息弱，没有网络，这个时候可以离线应用

原理：

在有网络的时候，客户端第一次访问服务器，服务器收到请求后，会把所有的信息返回给客户，并且同时，也会发送到寄存器里面存储着，当突然没网络的时候，这时客户端请求不到服务器，就回去寄存器里面去找所需要的信息。

首先来讲解下离线存储的使用方法，说起来也很简单。只要在你的页面头部像下面一样加入一个manifest的属性就可以了。

<html lang="en" manifest="cache">

manifest文件:

CACHE MANIFEST
#v0.11

CACHE:
/public/1.gif

NETWORK:
resourse/logo.png

FALLBACK:
/ /offline.html

离线存储的manifest一般由三个部分组成:

1.CACHE:表示需要离线存储的资源列表，由于包含manifest文件的页面将被自动离线存储，所以不需要把页面自身也列出来。
2.NETWORK:表示在它下面列出来的资源只有在在线的情况下才能访问，他们不会被离线存储，所以在离线情况下无法使用这些资源。不过，如果在CACHE和NETWORK中有一个相同的资源，那么这个资源还是会被离线存储，也就是说CACHE的优先级更高。
3.FALLBACK:表示如果访问第一个资源失败，那么就使用第二个资源来替换他，比如上面这个文件表示的就是如果访问根目录下任何一个资源失败了，那么就去访问offline.html。

如果需要看到离线存储的效果，那么你需要把你的网页部署到服务器上，不管是本地还是生产环境服务器中，通过本地文件打开网页是无法体验到离线存储的。我在我的电脑上跑了一个本地node服务器，通过localhost访问.

可以看到这些都被缓存了下来，但需要注意的是：如果资源更新了，那么必须去更新manifest文件，比如把版本号改一下，不然一直使用的是之前的缓存。

7、网络状态、网页状态

    window.addEventListener('online',()=>{
      alert('有网')
    })

    window.addEventListener('offline',()=>{
      alert('没网')
    })

HTML5新提供的一个api，作用是记录当前标签页在浏览器中的激活状态。所谓“激活状态”指当前标签是否正在被用户浏览。

    事件：document.addEventListener( "visibilitychange" , function(){}) //页面切换触发的事件

    属性：document.visibilityState   // hidden表示当前页面未被浏览  visible表示正在浏览当前页面

8、手机电量、手机震动（仅限安卓）

    window.navigator.getBattery().then(data => {
        data.charging // 是否正在充电
        data.level // 剩余电量的百分比
        data.chargingTime //充满电所需时间
        data.dischargingTime //电量可使用时间
    })

    //为防止恶意震动所以需要在点击事件里触发
    btn.onclick = function () {
      window.navigator.vibrate(1000) //震动时间 ms
    }

9、执行命令 execCommand

当一个HTML文档切换到设计模式(document.designMode = 'on')时，document暴露 execCommand 方法，该方法允许运行命令来操纵可编辑内容区域的元素。

//相当于单击文件中的打开按钮
document.execCommand(”Open”);

//将当前页面另存为
document.execCommand(”SaveAs”);

//剪贴选中的文字到剪贴板;
document.execCommand(”Cut”,”false”,null);

//删除选中的文字;
document.execCommand(”Delete”,”false”,null);

//改变选中区域的字体;
document.execCommand(”FontName”,”false”,sFontName);

//改变选中区域的字体大小;
document.execCommand(”FontSize”,”false”,sSize|iSize);

//设置前景颜色;
document.execCommand(”ForeColor”,”false”,sColor);

其他命令请查看MDNdocument.execCommand - Web API 接口参考 | MDN

10、调用设备视频（仅限安卓）

  <video id="v"></video>

  <script>

      //旧方式
      //参数1：调用摄像头还是音频
      //参数2：调用成功的回调
      //参数3：调用失败的回调
      //注意：只能在localhost或者https下才能使用
      window.navigator.getUserMedia({ video: true, audio: true }, stream => {
        v.srcObject = stream;
        v.play();
      }, () => {
        startVideo();
      })

    //新方式 ES6
    window.navigator.mediaDevices.getUserMedia({
      video: {
        facingMode: 'user', // user表示前置（默认），environment代表后置
        width : 1280,
        height: 720,
        frameRate:{  //设置帧率
          ideal : 60, //最小
          max : 61   //最大
        }
      }
    })
      .then(stream => {
        v.srcObject = stream;
        v.play();
      })
      .catch(() => {

      })

11、前端路由

hash

早期的前端路由的实现就是hash来实现的，通过hashchange事件来监听hash值变化渲染不同的结构.

此外，hash也存在下面几个特性：

URL中hash值只是客户端的一种状态，也就是说当向服务器端发出请求时，hash部分不会被发送。
hash值的改变，都会在浏览器的访问历史中增加一个记录。因此我们能通过浏览器的回退、前进按钮控制hash的切换。
我们可以使用hashchange事件来监听hash的变化。

有两种方式来改变hash值，第一是a标签第二是js

   <!-- 方式1 -->
  <a href="#abc">1111111</a>
  <script>
      //方式2 
      location.hash = '#abc'    
  </script>

History API

如果不想要很丑的 hash，我们可以用路由的 history 模式
—— 引用自 vueRouter文档

  <script>
    window.history.pushState(state, title, url)
    // state：需要保存的数据，这个数据在触发popstate事件时，可以在event.state里获取
    // title：标题，基本没用，一般传 null
    // url：设定新的历史记录的 url。新的 url 与当前 url 的 origin 必须是一樣的，否则会抛出错误。url可以是绝对路径，也可以是相对路径。
    //如 当前url是 https://www.baidu.com/a/,执行history.pushState(null, null, './qq/')，则变成 https://www.baidu.com/a/qq/，
    //执行history.pushState(null, null, '/qq/')，则变成 https://www.baidu.com/qq/

    window.history.replaceState(state, title, url)
    // 与 pushState 基本相同，但她是修改当前历史记录，而 pushState 是创建新的历史记录

    window.addEventListener("popstate", function () {
      // 监听浏览器前进后退事件，pushState 与 replaceState 方法不会触发              
    });

    window.history.back() // 后退
    window.history.forward() // 前进
    window.history.go(1) // 前进一步，-2为后退两步，window.history.lengthk可以查看当前历史堆栈中页面的数量

  </script>

聚散飘渺

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
H5新方法总结

目录1、通过blol对象来下载文件2、新增classList来管理类名3、新增dataset来管理标签的自定义属性3、编码成base64位和解码4、本地存储5、worker多线程6、离线存储7、网络状态、网页状态8、手机电量、手机震动（仅限安卓）9、执行命令execCommand10、调用设备视频（仅限安卓）11、前端路由hashHisto...
复制链接

扫一扫