کار با MarkoJS

یک چارچوب ساده، منعطف و سریع تمام پشته با بصری ترین سیستم اجزایی که هنوز ابداع شده است، مارکو شایسته نگاهی دقیق است.

نوآوری در چارچوب های جاوا اسکریپت رندر فول پشته و سمت سرور به سرعت ادامه دارد. Marko تحت نظارت eBay توسعه یافته است که از آن در سایت تجارت الکترونیک خود استفاده می کند. Marko در نظر گرفته شده است که یک چارچوب آسان برای یادگیری و با کارایی بالا باشد.

رایان کارنیاتو، خالق SolidJS، در توسعه مارکو. او توصیف می کند به عنوان “به طور خاص برای رسیدگی به نیازهای عملکرد بالای پلت فرم eBay ساخته شده است.” با در نظر گرفتن قرعه کشی های eBay ۳۰۷ میلیون کاربر ماهانه، مارکو تقریباً به طور قطع می تواند مورد استفاده شما را مدیریت کند. .

اجزای مارکو

بیایید کاوش خود را در مورد مارکو با سیستم اجزای آن آغاز کنیم. مارکو یکی از ساده‌ترین سیستم‌های تعریف و کشف اجزا را دارد که تاکنون ابداع شده است. می‌توانید یک تعریف مؤلفه ساده را اینجا ببینید، یک انتخابگر رنگ. توجه داشته باشید که در فایل اصلی index.marko، یک عنصر HTML به نام به همراه ویژگی حاوی آرایه ای از رنگ های هگزیدسیمال وجود دارد. مارکو چگونه مؤلفه color-picker را پیدا می کند؟

پاسخ این است که مارکو از دایرکتوری شروع می شود که در آن استفاده از کامپوننت یافت می شود، سپس، با شروع از دایرکتوری های خواهر و برادر، به دنبال یک دایرکتوری /component حاوی تعریف جزء مورد نیاز است. اگر چنین مؤلفه‌ای در کد برنامه یافت نشد، Marko به وابستگی‌های نصب شده روی می‌آورد و آنها را نیز اسکن می‌کند.

توجه داشته باشید که مارکو بالا را جستجو می کند، به طوری که دایرکتوری ها در شاخه های جداگانه از یکدیگر مطلع نیستند. این یک نوع محدوده برای مؤلفه ها فراهم می کند.

در مورد ما، مارکو نیازی به جستجوی دور ندارد، زیرا یک فایل /components/color-picker/index.marko وجود دارد. (Marko همچنین کامپوننت هایی را از یک فایل با نام مؤلفه در پوشه مؤلفه ها یا فایلی در داخل پوشه مؤلفه با نام مؤلفه به عنوان پوشه و فایل بارگیری می کند.)

اگر به فایل /components/color-picker/index.marko نگاه کنید، تعریف جزء انتخابگر رنگ را در فهرست ۱ خواهید دید.

فهرست ۱. color-picker.marko

import getDefaultColors from '../../util/getDefaultColors.js'

class {
  onInput(input) {
    var colors = input.colors || getDefaultColors();

    this.state = {
      selectedColor: colors[0],
      colors
    };
  }

  handleColorSelected(color) {
    this.state.selectedColor = color;
  }
}

<div>
  <color-picker-header color=state.selectedColor/>
  <color-picker-footer colors=state.colors on-color-selected("handleColorSelected")/>
</div>

فهرست ۱ حاوی عناصر اصلی یک جزء است. با وارد کردن یک فایل JS دیگر با یک دستور import (یک تابع ساده جاوا اسکریپت که اگر رنگی در آن ارسال نشود از آن استفاده می کند) شروع می شود. در مرحله بعد، ساختارهای جاوا اسکریپتی را که نیاز دارد تعریف می کند. در این مورد، یک کلاس و یک تابع. آخرین علامت گذاری الگوی واقعی است که در درجه اول شامل دو جزء دیگر، سرصفحه و پاورقی است.

بیایید نگاهی دقیق‌تر به تعریف کلاس بیندازیم. دو روش را تعریف می کند.

ورودی ویژگی

روش اول onInput() است. این یک روش چرخه حیات است که آرگومان ورودی را دریافت می‌کند و امکان تغییر آن را فراهم می‌کند. وضعیت جزء (اطلاعات بیشتر در مورد وضعیت زیر).

به متغیر ورودی توجه کنید. این یک شناسه رزرو شده در Marko است که به ویژگی های ارسال شده از والد بالا حل می شود. به یاد داشته باشید که مولفه اصلی حاوی ویژگی روی عنصر colors است که به لیست کدگذاری شده سختی از رنگ های هگزیدسیمال اشاره می کند. آنها اکنون توسط مؤلفه فرزند از طریق ویژگی input.colors قابل دسترسی هستند. ویژگی‌ها کاملاً واکنش‌پذیر هستند، به این معنی که سیستم اطمینان حاصل می‌کند که همه چیز وابسته به لوازم به‌روزرسانی می‌شود.

مدیریت رویداد

روش دوم در کلاس handleColorSelected است که یک کنترل کننده رویداد سفارشی است. می‌توانید آن کنترل‌کننده را در فهرست ۱ ببینید که پاورقی در آن قرار دارد:

<color-picker-footer colors=state.colors on-color-selected("handleColorSelected")/>

ترجمه: هنگامی که رویداد on-color-selected فعال می‌شود، روش handleColorSelected را فراخوانی کنید و هر آرگومان موجود را ارسال کنید.

ایالت در مارکو

State در Marko شبیه React است زیرا انتظار می‌رود غیرقابل تغییر باشد، به این معنی که برای به‌روزرسانی یک ویژگی باید یک حالت جدید اختصاص داد. مارکو راهی برای به‌روزرسانی وضعیت به اجبار راه‌اندازی می‌کند:

this.setStateDirty(property);

مانند سایر فریم ورک‌های واکنشی، در مارکو حالت داخلی مؤلفه را مدل‌سازی کنید. سیستم واکنشی مسئول به‌روزرسانی رابط کاربری و سایر مقادیر وابسته به آن حالت است.

تکرار و افزایش رویدادها در مارکو

اکنون بیایید نگاهی به نحوه انجام مؤلفه پاورقی دو کار بیندازیم: روی عناصر رنگی تکرار می شود و رویداد روی رنگ انتخاب شده آن را فعال می کند.

کد رنگ -picker-footer/index.marko در فهرست ۲ نشان داده شده است.

فهرست ۲. color-picker-footer

  <div.color-picker-footer>
  <div.color-picker-selection-container>
    <for|color| of=input.colors>
      <div>
        <color-picker-selection
          color=color
          on-color-selected("handleColorSelected", color)/>
      </div>
    </for>
    <input key="hexInput" placeholder="Hex value" on-input("handleHexInput")/>
  </div>
</div>

می توانید ببینید که کار تکرار با تگ انجام شده است. تگ می تواند متغیر تکرار کننده خود را با نام درون نمادهای | مشخص کند. در این حالت به تکرار کننده نام color داده می شود. مجموعه‌ای که باید تکرار شود با ویژگی of شناسایی می‌شود، در این مورد به input.colors که از والدین ارسال شده است اشاره می‌کند.

هر عضو متغیر input.colors به صورت div با دسترسی به متغیر color خروجی خواهد شد. این از نظر نحوی مشابه چارچوب‌های دیگر مانند React است.

انتشار رویدادها در Marko

بیشتر کار انتخاب رنگ از طریق کلیک توسط مؤلفه color-picker-selection انجام می شود که در داخل تکرار کننده for به همراه خروجی می شود. ویژگی code>color و کنترل کننده on-color-sected.

فهرست ۳ را نشان می دهد جزء color-picker-selection.

فهرست ۳. مولفه color-picker-selection

class {
  handleColorSelected() {
    this.emit("color-selected");
  }
}

style {
  .color-picker-selection {
    width: 25px;
    height: 25px;
    border-radius: 5px 5px 5px 5px;
    display: flex;
    flex-direction: column;
    margin: 5px 0px 0px 5px;
    float: left;
  }
}

<div.color-picker-selection
  on-click("handleColorSelected")
  on-touchstart("handleColorSelected")
  style={
    backgroundColor: input.color
  }/>

بیشتر color-picker-selection به تعریف طرح‌بندی اختصاص دارد (یعنی مربع‌های کوچک رنگی که امکان کلیک کردن روی یک رنگ را فراهم می‌کنند). در اینجا CSS را به عنوان بخشی از ساختار یک جزء، در بلوک سبک، که مربع گرد کوچک را تعریف می کند، می بینید. توجه داشته باشید که می توانید CSS را در یک فایل .css جداگانه با نام style.css تعریف کنید. شما می توانید این رویکرد اخیر را در فهرست /color-picker-selection مشاهده کنید.

در نشانه‌گذاری الگو، به سبک درون خطی توجه کنید که برای تنظیم رنگ پس‌زمینه به رنگ هگزادسیمال در input.color استفاده می‌شود.

همچنین مشاهده کنید که چگونه از رویدادهای on-click و on-touchstart برای ثبت تعامل کاربر با مربع رنگ استفاده می شود. رویداد به handleColorSelected ارسال می شود که در سر فایل تعریف شده است. از this.emit("color-selected") برای اجرای یک رویداد color-sected custom استفاده می کند.

به یاد بیاورید که color-picker-footer رویدادهای سفارشی را با on-color-selected("handleColorSelected"، color) تماشا می کند. توجه داشته باشید که کنترل کننده در حال فراخوانی handleColorSelected است و متغیر color را پاس می کند. اما این تابع کجا تعریف شده است؟

انعطاف پذیری تعریف مؤلفه

پاسخ این است که در فایل جداگانه component.js در همان فهرست، مشابه فایل style.css جداگانه ای که قبلاً دیدید، تعریف شده است. توانایی قرار دادن بخش‌های مجزای مؤلفه در یک فایل یا در فایل‌های جداگانه (یا ترکیبی از هر دو) به انعطاف‌پذیری خوبی در نحوه تعریف مؤلفه‌ها که از ساده به پیچیده تبدیل می‌شوند، اجازه می‌دهد.

برچسب انتظار در مارکو

مارکو همچنین دارای یک برچسب است برای مدیریت رندر ناهمزمان تگ به شما این امکان را می دهد که یک قول را پاس کنید و فریم ورک با انتظار برای نتیجه آن سروکار دارد و تنها زمانی آن را نمایش می دهد که در دسترس باشد. (این شبیه به مؤلفه ای است که به همین نام در Svelte نامگذاری شده است.)

برچسب برخورد با خروجی ناهمزمان را ساده می‌کند.

یک چارچوب ساده و بدون غافلگیری

مارکو به قول خود برای یادگیری ساده عمل می کند. برای یک چیز، فقط تعداد کمی از برچسب های اصلی ضروری را برای یادگیری به کار می برد. برای دیگری، این برچسب‌ها نسبتاً ساده هستند و با اصل کم‌ترین شگفتی هماهنگ هستند. و Marko یک چارچوب تمام پشته است، بنابراین شما همچنین رندر سمت سرور را به صورت خارج از جعبه دریافت می کنید، با ادغام برای سرورهایی مانند اکسپرس.

در ترکیب با سیستم تعریف بصری مؤلفه، بسته‌کننده‌های Webpack و Rollup، و عملکرد در قفسه بالایی، مارکو یک مورد قوی برای چارچوب بعدی جاوا اسکریپت شما ایجاد می‌کند.