从香草JavaScript移动到可重复使用的Vue组件

本文展示了将香草JavaScript倒数计时器重构为可重复使用的VUE组件。原始计时器在上一篇文章中详细介绍，缺乏可重复性和有效的UI同步。这种转换解决了这些缺点。

为什么要使用vue？主要是有两个原因：

• 同步UI和计时器状态：原始javaScript代码在timerInterval函数中托管状态，直接操纵DOM元素。 Vue的模板语法声明将DOM绑定到组件的数据，简化了UI更新。
• 可重用性：原始计时器依赖于元素ID，从而限制了其可重复使用性。 VUE组件封装了其逻辑，从而在单个页面上启用了多个独立的计时器实例。

这是VUE实施：

模板和样式

VUE使用基于HTML的模板系统。我们将创建一个带有以下结构的BaseTimer.vue文件：

<code><template>
  
</template>

<script>
  // ...
</script>

<style scoped>
  /* ... */
</style></code>

这<template></template>部分包含计时器的标记（主要是上一篇文章中的SVG），

<template>
  <div class="base-timer">
    <svg viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
      <g>
        <circle cx="50" cy="50" r="45"></circle>
        <path :class="remainingPathColor" :stroke-dasharray="circleDasharray" d="
            M 50, 50
            m -45, 0
            a 45,45 0 1,0 90,0
            a 45,45 0 1,0 -90,0
          "></path>
      </g>
    </svg>
    {{ formattedTimeLeft }}
  </div>
</template>

<style scoped>
.base-timer {
  position: relative;
  width: 100px;
  height: 100px;
}
</style>计时器的关键方面是通过数据绑定来控制的： <code>stroke-dasharray</code> ， <code>remainingPathColor</code>和<code>formatTime(timeLeft)</code> 。<h3 id="常数和变量">常数和变量</h3><p>这<script> section defines constants and variables.  Constants, such as <code>FULL_DASH_ARRAY, <code>WARNING_THRESHOLD, <code>ALERT_THRESHOLD, and <code>COLOR_CODES, are defined directly.</script></p>
<p>Variables are categorized: those directly re-assigned in methods (<code>timerInterval</code>, <code>timePassed</code>) and those dependent on other variables (<code>timeLeft</code>, <code>remainingPathColor</code>).</p>
<h4 id="Reactive-Variables">Reactive Variables</h4>
<p>Variables directly modified in methods are declared within the <code>data()</code> method to leverage Vue's reactivity system:</p>
<pre class="brush:php;toolbar:false">data() {
  return {
    timePassed: 0,
    timerInterval: null
  };
},

Computed Properties

Variables dependent on other variables are implemented as computed properties:

computed: {
  timeLeft() {
    return TIME_LIMIT - this.timePassed;
  },
  circleDasharray() {
    return `${(this.timeFraction * FULL_DASH_ARRAY).toFixed(0)} 283`;
  },
  formattedTimeLeft() {
    // ... (time formatting logic) ...
  },
  timeFraction() {
    // ... (time fraction calculation) ...
  },
  remainingPathColor() {
    // ... (color calculation based on timeLeft) ...
  }
},

Computed properties are pure functions, cached for efficiency.

Using Data and Computed Properties in the Template

The template utilizes text interpolation ({{ ... }}) and v-bind (or its shorthand :) directives to dynamically bind data and computed properties to the DOM.

Methods and Lifecycle Hooks

The startTimer method, simplified due to the use of computed properties, is called within the mounted() lifecycle hook:

methods: {
  startTimer() {
    this.timerInterval = setInterval(() => (this.timePassed  = 1), 1000);
  }
},
mounted() {
  this.startTimer();
},

Component Usage

To use the BaseTimer component in another component (e.g., App.vue):

1. Import: import BaseTimer from "./components/BaseTimer";
2. Register: components: { BaseTimer }
3. Instantiate: <basetimer></basetimer> in the template.

This refactoring demonstrates the benefits of using Vue components for improved code organization, reusability, and efficient state management. The resulting component is self-contained and easily integrated into larger applications.

以上是从香草JavaScript移动到可重复使用的Vue组件的详细内容。更多信息请关注PHP中文网其他相关文章！