Vue.js - الارتقاء من المكونات عديمة التصيير إلى الدوال التركيبية

مقدمة

تتناول هذه المقالة مفهوم المكونات عديمة التصيير وتقدم دليل شامل لبنائها في Vue.js. إنها لا تستكشف فقط فوائد استخدام المكونات عديمة التصيير ولكنها توضح أيضًا كيفية تمكين إنشاء مكونات قابلة للتخصيص بشكل كبير يمكن استخدامها بشكل فعال في مختلف الحالات في جميع أنحاء التطبيق. بالإضافة إلى ذلك ، تعرض المقالة عملية تحويل مكون عديم التصيير إلى دالة قابلة للتركيب باستخدام واجهة التركيب ، مما يبرز كيف يمكن أن يبسط هذا النهج تعقيد المكون بشكل كبير.

ما هو المكون عديم التصيير؟

المكون عديم التصيير هو عنصر أساسي في تطوير الويب يعمل دون تصيير عناصر HTML محددة. الغرض الرئيسي منه هو توفير الشيفرة والبيانات حصريًا للمكونات التي تستخدمه. في الأساس ، يعمل كمكون يقبل الخاصيات والأحداث ويكشف عن منافذ للمكون الأصلي. تتيح هذه السمة الفريدة للمطورين إنشاء مكونات قابلة للتخصيص بشكل كبير يمكن استخدامها بطرق متنوعة ، اعتمادًا على المتطلبات المحددة للتطبيق.

ما فائدة استخدام المكون عديم التصيير؟

توفر المكونات عديمة التصيير مزايا قيمة في تطوير الويب ، حيث تعمل كوسيلة لإنشاء مكونات قابلة لإعادة الاستخدام يمكن استخدامها في عدة حالات عبر التطبيق. علاوة على ذلك ، فهي تثبت فائدتها في بناء مكونات قابلة للتخصيص بشكل كبير يمكن أن تتكيف مع سيناريوهات ومتطلبات مختلفة. لتوضيح ذلك ، يمكن استخدام مكون عديم التصيير لصنع حقل إدخال يسهل إنشاء تصيير مخصص للحقل وعملية المصادقة عليه من خلال كشف خاصيات المنفذ اللازمة للمكون الأصلي. لمزيد من المعلومات حول هذا المثال ، يمكنك قراءة هذه المقالة Renderless components pattern in Vue 3.

كيف تنشئ مكون عديم التصيير في Vue.js؟

لتوضيح عملية بناء مكون عديم التصيير في Vue.js ، سننشئ مكون تكملة تلقائية Autocomplete يمكن استخدامه للبحث عن عنصر محدد في قائمة من العناصر. سيقبل المكون قائمة من العناصر، استعلام البحث ودالة رد نداء كخاصيات. كما سيكشف عن منفذ يستخدم لتصيير قائمة العناصر. سيقوم المكون بعد ذلك بتصفية قائمة العناصر بناءً على استعلام البحث وإرسال القائمة المصفاة إلى المنفذ. يمكن أن تستخدم دالة رد النداء لتمرير العنصر المحدد إلى المكون الأصلي من أجل تخصيص طريقة البحث.

يوفر مكون Autocomplete شيفرة تنقيذية أساسية حيث يكشف عن مجموعة محدودة من الخاصيات والدوال وهذا يتيح للمطورين التحكم في واجهة المستخدم وتخصيصها وفقًا لمظهر وسلوك مرئي مطلوب.

مثال بسيط

const AutoComplete = defineComponent({
    props: {
        items: {
            type: Array,
            required: true
        },
        searchFn: {
            type: Function,
            required: true
        }
    },
    emits: ['select'],
    setup(props, { emit, slots }) {
        const searchQuery = ref('') // تمثل قيمة استعلام البحث المدخل من طرف المستخدم
        const results = ref([]) //  يخزن نتائج البحث بناءً على استعلام البحث
        const onSearch = () => {
            // تنفيذ وظيفة البحث
        }
        const onSearchQueryChange = (val) => {
            // تحديث قيمة استعلام البحث
        }
        const select = (result) => {
            // تعامل مع عملية اختيار عنصر من النتيجة
        }
        return () =>
            slots.default?.({
                searchQuery: searchQuery.value,
                results: results.value,
                onSearchQueryChange
            })
    }
})

هنا سنستخدم المكون لتصيير مدخل يوفر استعلام البحث ثم تصيير العناصر المصفاة كقائمة غير مرتبة.

مثال متقدم

لنفترض أن لدينا قائمة من إطارات العمل مع شعاراتها، وهدفنا هو عرضها كشبكة من البطاقات. نظرًا لأن العناصر في القائمة هي كائنات، فسنحتاج إلى توفير دالة بحث مخصصة لمكون AutoComplete التي تبحث بناءً على اسم الإطار.

حتى الآن، قمنا بإنشاء مكون عديم التصيير أساسي وخصصناه بحيث يقوم بتصيير قائمة من العناصر بناءً على استعلام البحث. ومع ذلك، يمكننا تعزيز المكون بشكل أكبر عن طريق إضافة المزيد من الميزات إليه. على سبيل المثال، يمكننا إضافة القدرة على تحديد عنصر من القائمة وإرسال حدث إلى المكون الأصلي. يمكننا أيضًا إضافة القدرة على مسح استعلام البحث وإعادة تعيين قائمة النتائج.

الآن، سنقوم بتنفيذ نفس المفهوم باستخدام دالة تركيبية. نظرًا لأن المكون عديم التصيير يركز فقط على معالجة الشيفرة المنطقية دون عرض أي واجهة مستخدم، فهو مناسب تمامًا لتنفيذه كدالة قابلة تركيبية.

ماهي الدالة التركيبية؟

الدالة التركيبية هي دالة تحتوي على شيفرة منطقية ذات حالة باستخدام الواجهة البرمجية التفاعلية، دوال دورة حياة المكونات، وحقن التبعية. تسمح هذه الشيفرة باستخدامها عبر عدة مكونات.

مثال بسيط

لنبدأ بإنشاء دالة تركيبية تتعامل مع شيفرة منطقية للبحث عن عنصر معين في قائمة من العناصر. ستقبل الدالة التركيبية قائمة من العناصر واستعلام البحث كوسيطين. ثم ستقوم بتصفية قائمة العناصر بناءً على استعلام البحث وإرجاع القائمة المصفاة.

import { computed, ref } from 'vue'
export default function useAutocomplete<T = string>(items: T[], searchFn?: (query: string) => T[]) {
    const searchQuery = ref('') // تمثل استعلام البحث
    const results = computed(() => {
        // يخزن نتائج البحث بناءً على استعلام البحث
        return searchFn
            ? searchFn(searchQuery.value)
            : (items as string[]).filter((item) => searchQuery.value && item.includes(searchQuery.value))
    })
    return {
        searchQuery,
        results
    }
}

الآن، يمكننا استخدام الدالة التركيبية لتصيير مدخل يوفر استعلام البحث ثم تصيير العناصر المصفاة كقائمة غير مرتبة.

أتاحت لنا الطريقة التركيبية تقليل كمية الشيفرة المطلوبة لتنفيذ نفس الوظيفة.

مثال متقدم

لنقم الآن بإنشاء دالة تركيبية تأخذ دالة بحث كمعامل وتصيير النتائج كشبكة من البطاقات. سيتم استخدام دالة البحث لتصفية قائمة العناصر بناءً على استعلام البحث.

الخاتمة

طوال هذه المقالة، اكتسبنا نظرة على عملية بناء مكون عديم ودالة تركيبية. بالإضافة إلى ذلك، استكشفنا تطبيقاتهما العملية وشهدنا كيف يمكن استخدام كلا النهجين لتحقيق وظيفة متطابقة. لا سيما، لاحظنا طبيعة النهج التركيبي المفيدة، التي يمكننا من خلالها تقليل الشيفرة المطلوبة بشكل كبير لتنفيذ الوظيفة المطلوبة.

فهرس المصطلحات