Visitar URL original
ساعت تعمیم داده شده

ما قصد داریم این پروژهٔ متن‌باز را در دسترس همهٔ مردم در سرتاسر دنیا قرار دهیم.

به ترجمهٔ محتوای این آموزش به زبان خودتان کمک کنید/a>.

بازگشت به درس

ساعت تعمیم داده شده

اهمیت: 5

ما یک کلاس Clock(ساعت) داریم. هم اکنون، هر ثانیه را نمایش می‌دهد.

class Clock {
  constructor({ template }) {
    this.template = template;
  }

  render() {
    let date = new Date();

    let hours = date.getHours();
    if (hours < 10) hours = '0' + hours;

    let mins = date.getMinutes();
    if (mins < 10) mins = '0' + mins;

    let secs = date.getSeconds();
    if (secs < 10) secs = '0' + secs;

    let output = this.template
      .replace('h', hours)
      .replace('m', mins)
      .replace('s', secs);

    console.log(output);
  }

  stop() {
    clearInterval(this.timer);
  }

  start() {
    this.render();
    this.timer = setInterval(() => this.render(), 1000);
  }
}

یک کلاس جدید ExtendedClock بسازید که از Clock ارث‌بری می‌کند و پارامتر precision – تعداد ms بین هر «تیک تاک» – را اضافه می‌کند. به طور پیش‌فرض باید 1000 (یک ثانیه) باشد.

  • کد شما باید در فایل extended-clock.js باشد.
  • فایل اصلی clock.js را تغییر ندهید. آن را گسترش دهید.

باز کردن یک sandbox برای تمرین.

class ExtendedClock extends Clock {
  constructor(options) {
    super(options);
    let { precision = 1000 } = options;
    this.precision = precision;
  }

  start() {
    this.render();
    this.timer = setInterval(() => this.render(), this.precision);
  }
};

باز کردن راه‌حل درون sandbox.