使用Tornis响应浏览器状态更改

2020年12月30日11:19:30 发表评论 31 次浏览

本文概述

浏览器状态跟踪是一种常见的做法-我们始终需要了解用户与我们的网站进行交互的方式和配置。

这很重要, 因为它可以帮助我们定制组件以适合这些配置。

如今, 有许多应用程序可以帮助我们进行这种跟踪, 包括视差, 媒体查询和光标跟踪。

Tornis是一个JavaScript库, 可帮助你从最终用户的浏览器中无缝且轻松地跟踪各种状态变化。

Tornis自我介绍如下:

Tornis的名称来自拉脱维亚的森林watch望塔, 它是一个最小的JavaScript库, 可监视浏览器视口的状态, 使你可以在发生任何更改时做出响应。将Tornis视为你视口的商店。

为什么选择托尼斯

你可以使用JavaScript事件处理程序手动跟踪Tornis商店中所有可跟踪的内容。

但是, 与本机JS事件处理程序相比, Tornis具有显着的优势, 在性能和编码体验方面具有优势。

Tornis简化了不同事件跟踪的组合以实现目标。

通过使用Tornis, 将复杂的事件处理程序结合使用起来要容易得多。

我们为制作了一个自定义演示.
不完全是。点击这里查看.

使用Tornis响应浏览器状态更改1

如其网站上所述, Tornis采取了递延的方法。

Tornis不会直接绑定到本地事件, 而是会限制它们并仅捕获最低限度的值-更新后的值。

这仅表示你的代码仅在商店中有更改并且浏览器已准备好呈现时才运行。

看看Tornis网站上的简单视差和滚动跟踪示例.

安装Tornis

初始化前端项目后, 只需在项目根目录内运行以下命令:

npm install tornis --save

Tornis是使用现代JavaScript和ES6编写的, 因此, 如果要支持旧版浏览器, 则需要使用babel进行翻译。

了解状态跟踪

Tornis当前跟踪以下状态:

  • 滑鼠位置
  • 鼠标光标速度
  • 视口大小
  • 滚动位置
  • 滚动速度
  • 浏览器相对于屏幕的位置
  • 浏览器相对于屏幕的速度
  • 设备方向
  • 设备像素比

你可以订阅商店更新, 并结合这些值来创建各种效果。

Tornis在行动

浏览器跟踪的最常见用例之一是创建视差效果。

但是, 对于这篇文章, 我决定将Tornis的功能用于另一个也非常有价值的目的-光标速度。

我们将创建一个简单的组件来跟踪鼠标光标的速度, 以了解Tornis的强大功能和简单性。

每当光标以极高的速度移动时, 我们的组件就可以渲染出令人头晕的表情符号。

同样, 当表情符号从正常变为头晕时, 将立即捕获该速度。非常简单的要求。

gif,表示表情符号随着鼠标速度的增加而变得头昏眼花。

设定

如上所述, 在安装Tornis之前, 我们应确保正在处理启用Babel的项目。 Tornis是用ES6编写的, 因此必须进行编译才能支持旧版浏览器。

我选择与Vue.js, 因为它很容易设置快速支架。

如果你想使用Vue, 请遵循这些步骤进行设置。

设置Vue项目后, 你可以删除未使用的脚手架组件和样式, 以帮助你从干净的组件开始。

现在, 我们开始使用包管理器安装Tornis(上面的命令)。

安装后, 我们将Tornis包导入到我们的项目中:

import {watchViewport} from "tornis";

watchViewport使我们能够绑定将在每个状态更新上运行的监视功能。

基本上, 这有助于我们观察(跟踪)和更新元素的状态。

Tornis所要做的不只是watchViewport.

它也有取消观看视口, getViewportState和重新校准方向.

得到更多信息在这里.

现在我们已经从Tornis导入了必要的功能, 我们可以开始跟踪状态了。

追踪状态

为了跟踪Tornis中的状态, 我们传递了一组值, 该值将在每次触发跟踪事件时被更新。

这是托尼斯的心。此功能使我们可以观察更改并采取相应的措施。

一旦安装了组件, 我们就需要开始跟踪更改。

在Vue的生命周期计划中, 适当的时刻在已安装()功能。

对于我们需要实现的目标, 我们必须跟踪鼠标速度, 该速度由鼠属性在Tornis的状态对象中。

//...
mounted: function() {
    const updateValues = ({
      size, // tracks viewport size
      scroll, // tracks scroll events
      mouse, // tracks mouse events (position & velocity)
      position, // tracks mouse position
      orientation, // tracks device orientation
      devicePixelRatio // tracks pixel ration
    }) => {
      if (size.changed) {
        // do something related to size
      }

        if (scroll.changed) {
        // do something related to scroll position or velocity
      }

      if (mouse.changed) {
        // do something related to mouse position or velocity
      }

      if (position.changed) {
        // do something related to browser window position or velocity
      }

      if (orientation.changed) {
        // do something related to device orientation
      }

      if (devicePixelRatio.changed) {
        // do something related to pixel ratio
      }
    };

    // bind the watch function
    // By default this will run the function as it is added to the watch list
    watchViewport(updateValues);
  }
//...

通过此代码, 我们已经在跟踪所有浏览器状态。

但是, 我们只需要从鼠事件。

Tornis的优点在于它以延迟的方式获取数据。

它限制这些值并仅捕获最终更新。这是运行时性能的一大收获。

的watchViewport()函数使我们能够在观察值的同时运行该函数。

你可能已经注意到, 上面的代码对我们来说仍然太麻烦了, 因为我们只需要鼠相关事件。

让我们清除这种混乱情况。

//...
mounted: function() {
    const updateValues = ({mouse}) => {
      if (mouse.changed) {
        // do something related to mouse position or velocity
      }
    };

    // bind the watch function
    // By default this will run the function as it is added to the watch list
    watchViewport(updateValues);
  }
//...

现在我们需要在更新的值和表情符号之间创建交互。我们将利用Vue的反应性来创建此链接。

<template>
  <div id="app">
    <p>{{emoji}}</p>
    <p>{{trackedVelocity}}</p>
    <small>maxVelocity: {{maxVelocity}}</small>
  </div>
</template>

<script>
// import the Tornis store functions
import { watchViewport } from "tornis";

export default {
  name: "App", data: function() {
    return {
      emoji: "😀", trackedVelocity: 0, maxVelocity: 0
    };
  }, mounted: function() {
    /* const updateValues = ({
    ....  
    */
  }
};
</script>

<style>
/*styling*/
</style>

现在, 我们的单个文件组件已创建。让我们添加逻辑, 以使表情符号的状态根据我们的更新而更改。

我们的目标是一旦鼠标过快使表情符号感到头晕, 并记录上一次捕获的速度。这将在我们的updateValues功能。

你的完整应用程序应该看起来像这样:

<template>
  <div id="app">
    <p>{{emoji}}</p>
    <p>{{trackedVelocity}}</p>
    <small>maxVelocity: {{maxVelocity}}</small>
  </div>
</template>

<script>
// import the Tornis store functions
import { watchViewport } from "tornis";

export default {
  name: "App", components: {}, data: function() {
    return {
      emoji: "😀", trackedVelocity: 0, maxVelocity: 0
    };
  }, mounted: function() {
    const updateValues = ({
      size, // tracks viewport size
      scroll, // tracks scroll events
      mouse, // tracks mouse events (position & velocity)
      position, // tracks mouse position
      orientation, // tracks device orientation
      devicePixelRatio // tracks pixel ration
    }) => {
      if (mouse.changed) {
        // do something related to mouse position or velocity
        this.trackedVelocity = mouse.velocity.x;
        if (
          (mouse.velocity.x > 50 && mouse.velocity.x < 100) ||
          (mouse.velocity.x < -50 && mouse.velocity.x > -100)
        ) {
          this.emoji = "🙄";
          this.maxVelocity = mouse.velocity.x;
        }
        if (
          (mouse.velocity.x > 100 && mouse.velocity.x < 200) ||
          (mouse.velocity.x < -100 && mouse.velocity.x > -200)
        ) {
          this.emoji = "🤢";
          this.maxVelocity = mouse.velocity.x;
        }
        if (mouse.velocity.x > 200 || mouse.velocity.x < -200) {
          this.emoji = "🤮";
          this.maxVelocity = mouse.velocity.x;
        }
      }
    };

    // bind the watch function
    // By default this will run the function as it is added to the watch list
    watchViewport(updateValues);
  }
};
</script>

<style>
#app {
  text-align: center;
  margin-top: 4rem;
}

p {
  font-size: 4rem;
}
</style>

我们的演示已经准备就绪:

tornis-emoji-mouse-tracker用@ vue / cli-plugin-babel, tornis, vue的blurdylan创建的tornis-emoji-mouse-tracker

更多

因为所有内容都有React Hooks, 所以也有托尼斯钩.

总结

Tornis会以较低的性能成本和出色的延展性(或组合不同事件的能力)来跟踪浏览器的视口状态, 并且状态非常好。

让我知道你对Tornis的体验如何。

准确体验用户的Vue应用程序

调试Vue.js应用程序可能会很困难, 尤其是在用户会话中有数十种甚至数百种变体的情况下。如果你有兴趣监视和跟踪生产中所有用户的Vue突变,

尝试notlogy

.

LogRocket仪表板免费试用横幅

https://notlogy.com/signup/

日志火箭就像Web应用程序的DVR一样, 实际上记录了Vue应用程序中发生的所有事情, 包括网络请求, JavaScript错误, 性能问题等等。你可以汇总并报告问题发生时应用程序所处的状态, 而不用猜测为什么会发生问题。

notlogy Vuex插件将Vuex突变记录到notlogy控制台, 为你提供导致错误的原因以及发生问题时应用程序处于何种状态的上下文。

现代化调试Vue应用程序的方式-免费开始监控.

一盏木

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: