نص كامل 2544 الكلمات ، المدة المقدرة للدراسة 8 دقيقة

هناك العديد من المكتبات لجافا سكريبت ، وقد لخص الجميع المكتبات الأكثر أهمية وشعبية ، لكنها سرعان ما تضيع مرة أخرى.

في هذه المقالة ، ستقوم Xiaoxin بمشاركة 3 مكتبات JavaScript غير معروفة ولكنها قوية جدًا وصغيرة الحجم ستجعل حياتك بسيطة ولن تضيف عبئًا غير ضروري إلى تطبيق الويب الخاص بك.

1. ملف تعريف الارتباط JS

OfficialGitHub

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

التنفيذ من خلال CDN:

< script src = "https://cdn.jsdelivr.net/npm/js-cookie@beta/dist/js.cookie.min.js" > < / النصي >

تعيين مفتاح ملف تعريف ارتباط باسم "name" بقيمة "Max"

Cookies.set ("name"، "Max")

الحصول على قيمة ملف تعريف الارتباط باستخدام مفتاح "name"

Cookies.get ("name") // "Max"

قم بإنشاء ملف تعريف ارتباط واتركه ينتهي بعد 7 أيام

Cookies.set ('name'، 'Max'، {expires: 7})

حذف ملف تعريف الارتباط

Cookies.remove ("name")

رسم جميع ملفات تعريف الارتباط

Cookies.get () // {name: 'Max'}

المصدر: Pexels

2. سلة

التوثيق الرسمي

Basket.js هي مكتبة تحميل نصية بسيطة ، فقط 0.7 كيلوبايت بعد الضغط.

(المكتبة الأخرى التي تستخدمها تبلغ حوالي 5 كيلوبايت بعد الضغط ، كما هو موضح في https://github.com/addyosmani/basket.js/issues/61 ، لكنها لا تزال صغيرة جدًا)

ولكن لا يمكن لـ basket.js تحميل JavaScript خارجي فحسب ، بل يمكنه أيضًا تخزينه مؤقتًا في التخزين المحلي للمتصفح ، بحيث عند طلب الصفحة التالية ، ليس من الضروري طلب JavaScript خارجي عبر الشبكة مرة أخرى ، ولكن فقط من التخزين المحلي.

ولكن لماذا هو التخزين المحلي بدلاً من التخزين المؤقت للمتصفح؟

بادئ ذي بدء ، أعتقد شخصيًا أنه من الأسهل تخزين ملفات JavaScript في رمز صفحة الويب من خلال مكتبة JS ، عادةً من جانب الخادم. باستخدام Basket.js ، من السهل التحكم ديناميكيًا في ذاكرة التخزين المؤقت للبرنامج النصي باستخدام JavaScript في التعليمات البرمجية.

لنجرب:

واجهة برمجة التطبيقات الفعلية ليست معقدة. أعتقد أنه يمكنك استكشاف الوثائق بنفسك. في المثال البسيط أدناه ، نستخدم فقط سلة السلة. لأنها جوهر المكتبة بالكامل.

Basket.require ()

سلة السلة ()

إزالة السلة ()

سلة واضحة ()

باستخدام basket.require ، يمكننا تحميل ملفات JS من خلال السلة. ثم يتم تخزين هذا الملف في ذاكرة التخزين المؤقت المحلية. كما ذكرنا سابقًا ، تطلب السلة في المرة القادمة هذا الملف ، على سبيل المثال ، عند إعادة تحميل الصفحة ، ستنظر السلة أولاً في ذاكرة التخزين المؤقت. أو إذا كان الملف مخبأًا بالفعل هناك ، فسيتم تحميل الملف من خلال التخزين المحلي بدلاً من تقديم طلب آخر عبر الشبكة.

index.html:

هنا يمكنك العثور على المكتبة:

https://addyosmani.com/basket.js/dist/basket.min.jshttps://cdn.jsdelivr.net/npm/rsvp@4/dist/rsvp.min.jshttps://cdnjs.cloudflare.com/ ajax / libs / jquery / 3.4.1 / jquery.min.js

< ! DOCTYPE html > < html lang = "en" >   < رئيس >   < مجموعة الأحرف الوصفية = "UTF-8" / >   < scriptsrc = rsvp.min.js" > < / النصي >   < scriptsrc = basket.min.js" > < / النصي >   < عنوان > المستند < / عنوان > < / رئيس > < الجسم >   < النصي >  basket.require ({url: '/ scripts / jquery.js'}) < / النصي > < / الجسم > < / لغة البرمجة >

كما ترى ، قم أولاً باستيراد مكتبة RSVP المطلوبة بواسطة Basket.js. ثم بالعودة إلى السلة نفسها ، يمكنك تنفيذ الوظيفة المطلوبة في الجسم لتحميل jQuery من مكان ما.

عندما تفتح الصفحة لأول مرة ، يجب أن ترى:

يطلب jQuery عادة من خلال الشبكة.

ولكن مع إعادة تحميل الصفحة:

لم يعد jQuery مدرجًا في علامة التبويب "الشبكة" ، فقد تم تحميله من التخزين المحلي.

ما سبق هو عملية "السحر" كلها :)

3. حبوب منع الحمل

جيثب الرسمي

"حبوب منع الحمل تضيف محتوى ديناميكيًا إلى المواقع الثابتة وتجعل تحميل المحتوى أكثر سلاسة." يبلغ حجم الضغط حوالي 1 كيلوبايت.

بدأ تطوير حبوب منع الحمل بهذه التغريدة: https://twitter.com/sitnikcode/status/1109626507331338240

الجوهر: يستخدم معظم الأشخاص تطبيقات من صفحة واحدة لتشغيل تطبيقات الويب ، وعند النقر ، لا يتم تحميل الصفحة الجديدة بالكامل. يرجع السبب في معظم إطارات عمل SPA إلى أن كل المحتوى يعتمد على index.html.

ولكن ماذا لو كانت هناك صفحات ثابتة متعددة؟ حبوب منع الحمل يمكن أن تساعدك.

حسب الحاجة ، سيقوم باسترداد محتوى ملفات HTML الأخرى على الخادم واستبدال المحتوى الحالي بالمحتوى المكتسب الجديد.

هذا تحسن كبير في الأداء لأن تطبيقنا لم يعد يتطلب صفحة جديدة كاملة.

تم استبدال المحتوى المهم للتو.

باستخدام Pill ، يمكنك اعتراض محاولات التنقل وإكمال الخطوات المذكورة أعلاه تلقائيًا.

أفضل شيء في Pill هو أنه سيتم توثيقه من خلال الأمثلة ، مع التأكد من التحقق من كل شيء: يمكنك العثور على الرمز على GitHub https://GitHub.com/rumkin/pill/tree/master/example

أتمنى لكم تعاونا طيبا مع حبوب منع الحمل :)

المصدر: Pexels

آمل أن تساعدك هذه المقالة ، شكرًا على القراءة ~

اترك تعليقا

دعونا نتشارك في السلع الجافة لتعلم وتطوير الذكاء الاصطناعي معًا

إذا أعيد طبعه ، يرجى ترك رسالة في الخلفية واتباع مواصفات إعادة الطباعة