مقدمة

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

ليست هناك حاجة لإعادة اختراع العجلة!

ينظر منشئو ومستخدمو المكتبات ذات الوظائف القابلة لإعادة الاستخدام لأطر عمل مختلفة (React، vue وما إلى ذلك) إلى هذا النهج بمثل هذا التفاعل.

بالنسبة لـ Vue - فهو، على سبيل المثال، vueuse. (وظائف الأداة المساعدة)

بالنسبة إلى React، الأفضل اليوم هو استخدام التفاعل الجديد والمدعوم بشكل نشط (لخطافات التفاعل)

ما هي المشكلة التي تحلها هذه المكتبات؟

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

1. استخدام مقابس الويب
2. إجراء الاستعلامات
3. الكشف عن الموقع الجغرافي للمستخدم
4. استخدام التخزين المحلي
5. إنشاء نوافذ مشروطة بسهولة

وهذا مجرد جزء صغير من جميع الحالات المحتملة.

لماذا يعد VueUse رائعًا؟

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

أفضل بديل لرد الفعل

بينما نشيد بـ vueuse باعتباره أفضل طريقة لتحقيق فكرة رائعة بشكل مثالي، يجب ألا ننسى أفضل مكتبة/إطار عمل js - React. وهنا كان الوضع غير سار أكثر. بعد كل شيء، لا توجد مكتبة راسخة وموثوقة وواسعة النطاق والوحيدة لـ React. كانت هناك بعض المحاولات من مطورين مختلفين، ولكن في أحدهم يوجد عدد قليل جدًا من الخطافات (في React هي خطافات، نعم)، في مكان ما توجد خطافات تم إنشاؤها باستخدام واجهة برمجة تطبيقات غير معالجة.

لتحسين الوضع، وكبديل لـ vueuse، ولكن في رد الفعل، جاء رد الفعل.

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

import { useList } from "@siberiacancode/reactuse";

function App() {
  const { value, set, push, removeAt, insertAt, updateAt, clear, reset } =
    useList(["Pink Floyd", "Led Zeppelin"]);
}
export default App;

نحصل على القيمة (قيمة المصفوفة)، set (وظيفة لتعيين قيمة مصفوفة أخرى)، Push (وظيفة لإضافة قيم إلى المصفوفة)، RemoveAt (حذف حسب الفهرس)، UpdateAt (تغيير القيمة حسب الفهرس)، واضح (مسح) المصفوفة)، إعادة التعيين (إعادة التعيين إلى القيمة الافتراضية)
الآن الكود للحصول على كل هذه الحالات والوظائف على رد فعل الفانيليا:

const [value, setValue] = useState(["Pink Floyd", "Led Zeppelin"]);
  const [initialValue] = useState(["Pink Floyd", "Led Zeppelin"]);
  const set = (newValue: string[]) => {
    setValue(newValue);
  };
  const push = (valueToPush: string) => {
    setValue((prevArray) => [...prevArray, valueToPush]);
  };
  const removeAt = (index: number) => {
    setValue((prevArray) => [
      ...prevArray.slice(0, index),
      ...prevArray.slice(index   1),
    ]);
  };
  const insertAt = (index: number, item: "string") =>
    setValue((l) => [...l.slice(0, index), item, ...l.slice(index)]);

  const updateAt = (index: number, newValue: string) => {
    setValue((prevList) =>
      prevList.map((element, index) => (index === index ? newValue : element))
    );
  };

  const clear = () => setValue([]);
  const reset = () => setValue(initialValue);

ونحصلنا على نفس الأساليب والحالة تمامًا. والكود أصغر وأبسط بكثير

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

• usePaint - لإنشاء لوحة قماشية للرسم عليها. تقوم بتعيين اللوحة القماشية، ويتيح لك الخطاف الرسم عليها، وضبط حجم الفرشاة واللون والتعتيم وحالة "الرسم" أو "الرسم الآن"
• استخدم ساعة الإيقاف — لإنشاء ساعات الإيقاف
• استخدام EyeDropper - لاستخدام القطارة لاختيار اللون
• كمية هائلة من الخطافات التي تعمل مع جهاز المستخدم أو واجهة برمجة تطبيقات المتصفح (useMemory، useOperatingSystem، useClipboard، useBrowserLanguage، useHash وما إلى ذلك)

خاتمة

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

رد استخدام الروابط

npm — جيثب