ثبت محلی Directiveها + قدمی پیشرفته‌تر

Local Registration of Directives

تا این قسمت با جزئیات directive ها آشنا شده ایم و می توانیم Directive های خودمان را تعریف کنیم. حتی در جلسه قبل یک modifier را نیز برای خودمان تعریف کرده و از آن روی directive خودمان استفاده کردیم اما هنوز تعدادی از مباحث باقی مانده است. اولین مبحث، ثبت کردن directive ها به صورت محلی است.

برای ثبت محلی directive ها می توانیم دقیقا مانند ثبت محلی کامپوننت ها عمل کنیم. برای مثال به فایل App.vue رفته و تگ های script را برایش تعریف کنید. سپس directive خود را ثبت کنید:

<script>
export default {
  directives: {
    "local-highlight": {
      bind(el, binding, vnode) {
          
      }
    }
  }
};
</script>

همانطور که می بینید من directive ای به نام local-highlight را در اینجا تعریف کرده ام اما به جای اینکه آن را از فایل دیگری import کرده و سپس به آن بدهم، آن را همینجا تعریف خواهم کرد. در ضمن ما می توانیم شبیه این کار را با کامپوننت ها نیز انجام بدهیم اما کمی دردسر دارد بنابراین پیشنهاد نمی شود.

در مرحله بعد کدهای موجود در main.js را کپی کرده و درون این قسمت قرار می دهم:

<script>
export default {
  directives: {
    "local-highlight": {
      bind(el, binding, vnode) {
        var delay = 0;
        if (binding.modifiers["delayed"]) {
          delay = 3000;
        }
        setTimeout(() => {
          if (binding.arg == "background") {
            el.style.backgroundColor = binding.value;
          } else {
            el.style.color = binding.value;
          }
        }, delay);
      }
    }
  }
};
</script>

سپس یک پاراگراف دیگر را به Template اضافه می کنیم که با این Directive کار کند:

<div class="row">
    <div class="col-xs-12 col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3">
    <h1>Custom Directives</h1>
    <p v-highlight:background.delayed="'red'">Color this</p>
    <p v-local-highlight:background.delayed="'red'">Color this</p>
    </div>
</div>

حالا هر دو پاراگراف ما بعد از 3 ثانیه به رنگ قرمز در می آیند. اگر این اتفاق برای شما نیفتاد یک بار صفحه را refresh کنید. اگر باز هم اتفاقی نیفتاد یعنی قسمتی از کدها را اشتباه نوشته اید. همانطور که قول داده بودم در این directive جدید روی دو مسئله تمرکز خواهیم کرد:

پاس دادن چندین modifier
استفاده از مقادیر پیشرفته تر از یک رشته مانند red

برای حالت اول می خواهم کاری کنم که علاوه بر قرمز شدن، پاراگراف ها به حالت چشمک زن نیز در بیایند. اینجاست که باید modifier دوم خود به نام blink را تعریف کنم بنابراین در همان فایل App.vue می گویم:

<div class="col-xs-12 col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3">
<h1>Custom Directives</h1>
<p v-highlight:background.delayed="'red'">Color this</p>
<p v-local-highlight:background.delayed.blink="'red'">Color this</p>
</div>

سپس در قسمت Script وجودِ این modifier را بررسی می کنم:

<script>
export default {
  directives: {
    "local-highlight": {
      bind(el, binding, vnode) {
        var delay = 0;
        if (binding.modifiers["delayed"]) {
          delay = 3000;
        }
        if (binding.modifiers["blink"]) {
          let mainColor = binding.value;
          let secondColor = "blue";
          let currentColor = mainColor;
          setTimeout(() => {
            setInterval(() => {
              currentColor == secondColor
                ? )currentColor == mainColor(
                : )currentColor == secondColor(;
              if (binding.arg == "background") {
                el.style.backgroundColor = currentColor;
              } else {
                el.style.color = currentColor;
              }
            }, 1000);
          }, delay);
        } else {
          setTimeout(() => {
            if (binding.arg == "background") {
              el.style.backgroundColor = binding.value;
            } else {
              el.style.color = binding.value;
            }
          }, delay);
        }
      }
    }
  }
};
</script>

توضیحات این کد:

در ابتدا با یک شرط ساده if وجود blink را بررسی کرده ام. در صورتی که blink وجود نداشته باشد به قسمت else در این شرط وارد می شویم که همان کدهای قبلی است و من آن ها را درون else قرار داده ام. در صورتی که blink وجود داشته باشد سه خصوصیت تعریف می کنیم:

mainColor که رنگ اول ما خواهد بود و از سمت کاربر دریافت می شود.
secondColor که رنگ دوم ماست و به صورت دستی روی آبی تنظیم شده است.
currentColor که رنگ فعلی ما است و در ابتدا به صورت پیش فرض روی mainColor تنظیم شده است.

قرار است کاری کنیم که پاراگراف بین این دو رنگ چشمک بزند. حالا یک تابع setTimeout را تعریف کرده ایم که دقیقا همان کار قبلی را می کند (آن را از قسمت Else کپی کرده ام). تنها تفاوت اینجاست که یک interval را داریم که هر یک ثانیه اجرا می شود. این interval رنگ ها را در هر ثانیه برعکس می کند، یعنی اگر currentColor برابر mainColor بود آن را روی secondColor و اگر روی secondColor بود آن را روی mainColor می گذارد. با این کار رنگ ها هر یک ثانیه تغییر می کنند!

حالا بهتر است بتوانیم خودمان رنگ ها و زمان چشمک زدن را انتخاب کنیم. به طور مثال:

<div class="row">
    <div class="col-xs-12 col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3">
    <h1>Custom Directives</h1>
    <p v-highlight:background.delayed="'red'">Color this</p>
    <p
        v-local-highlight:background.delayed.blink="{mainColor: 'red', secondColor: 'green', delay: 500}"
    >Color this, too</p>
    </div>
</div>

یعنی مقادیر mainColor و secondColor و بازه زمانی چشمک زدن (Delay) را به صورت یک شیء به این directive پاس داده ایم. حالا می توانیم کد script خود را نیز به روز رسانی کنیم. در ابتدا برای رنگ ها:

if (binding.modifiers["blink"]) {
    let mainColor = binding.value.mainColor;
    let secondColor = binding.value.secondColor;
    let currentColor = mainColor;
// بقیه کدها //

و سپس برای مدت interval می گوییم:

setTimeout(() => {
setInterval(() => {
    currentColor == secondColor
    ? )currentColor == mainColor(
    : )currentColor == secondColor(;
    if (binding.arg == "background") {
    el.style.backgroundColor = currentColor;
    } else {
    el.style.color = currentColor;
    }
}, binding.value.delay);
}, delay);

یعنی به جای عدد 1000 مقدار binding.value.delay را قرار داده ایم. در نهایت باید قسمت else را نیز به روز رسانی کنیم:

// بقیه کدها //
        }
    }, binding.value.delay);
    }, delay);
} else {
    setTimeout(() => {
    if (binding.arg == "background") {
        el.style.backgroundColor = binding.value.mainColor;
    } else {
        el.style.color = binding.value.mainColor;
    }
    }, delay);
// بقیه کدها //

حالا برنامه ما بدون مشکل در مرورگر چشمک می زند. دانلود سورس کد کل این فصل.