باستخدام العديد من تلميحات JavaScript واختصارات بناء الجملة ، ستساعدك هذه الوظائف في حل العديد من المشكلات الشائعة.
JavaScript هي لغة الأمر الواقع لبناء تطبيقات الويب والجوال الحديثة. إنه يدير مجموعة واسعة من المشاريع ، من مواقع الويب البسيطة إلى التطبيقات الديناميكية والتفاعلية.
لإنشاء منتجات سيحبها المستخدمون ويقدرونها ، من الضروري أن تكتب رمزًا ليس وظيفيًا فحسب ، بل فعالًا ويسهل صيانته أيضًا. يعد كود JavaScript النظيف أمرًا حيويًا لنجاح أي تطبيق ويب أو جوال ، سواء كان مشروعًا جانبيًا للهواية أو تطبيقًا تجاريًا معقدًا.
ما الجيد في وظائف جافا سكريبت؟
تعتبر الوظيفة مكونًا أساسيًا لكتابة التعليمات البرمجية لأي تطبيق. يحدد جزءًا من التعليمات البرمجية القابلة لإعادة الاستخدام التي يمكنك استدعاؤها لأداء مهمة معينة.
بالإضافة إلى قابليتها لإعادة الاستخدام ، فإن الوظائف متعددة الاستخدامات للغاية. على المدى الطويل ، يقومون بتبسيط عملية توسيع قاعدة التعليمات البرمجية والحفاظ عليها. بواسطة إنشاء واستخدام وظائف JavaScript، يمكنك توفير الكثير من وقت التطوير.
فيما يلي بعض وظائف JavaScript المفيدة التي يمكنها تحسين جودة كود مشروعك بشكل ملحوظ.
1. مرة واحدة
تعمل هذه الوظيفة ذات الترتيب الأعلى مرة واحدة على التفاف وظيفة أخرى للتأكد من أنه لا يمكنك تسميتها إلا مرة واحدة. يجب أن يتجاهل بصمت المحاولات اللاحقة لاستدعاء الوظيفة الناتجة.
ضع في اعتبارك الموقف الذي تريد فيه إجراء طلبات HTTP API لجلب البيانات من قاعدة بيانات. يمكنك إرفاق ملف مرة واحدة تعمل بمثابة رد اتصال لـ وظيفة مستمع الحدث، بحيث يتم تشغيله مرة واحدة وليس أكثر.
إليك كيف يمكنك تحديد مثل هذه الوظيفة:
مقدار ثابت مرة واحدة = (func) => {
يترك نتيجة؛
يترك funcCalled = خطأ شنيع;يعود(... أرغس) => {
لو (! funcCalled) {
النتيجة = func (... args) ؛
funcCalled = حقيقي;
}
يعود نتيجة؛
};
};
تأخذ الوظيفة مرة واحدة كوسيطة وتعيد وظيفة جديدة لا يمكنك استدعاءها إلا مرة واحدة. عند استدعاء الوظيفة الجديدة لأول مرة ، فإنها تقوم بتشغيل الوظيفة الأصلية باستخدام الوسائط المحددة وحفظ النتيجة.
أي استدعاءات لاحقة للوظيفة الجديدة تعيد النتيجة المحفوظة دون تشغيل الوظيفة الأصلية مرة أخرى. ألق نظرة على التنفيذ أدناه:
// تحديد وظيفة لجلب البيانات من قاعدة البيانات
وظيفةgetUserData() {
// ...
}
// احصل على نسخة من وظيفة getUserData يمكن تشغيلها مرة واحدة فقط
مقدار ثابت makeHTTPRequestOnlyOnce = مرة واحدة (getUserData) ؛
مقدار ثابت userDataBtn = وثيقة.querySelector ("#btn");
userDataBtn.addEventListener ("انقر"، makeHTTPRequestOnlyOnce) ؛
باستخدام الوظيفة مرة واحدة ، يمكنك ضمان أن الرمز يرسل طلبًا واحدًا فقط ، حتى إذا نقر المستخدم على الزر عدة مرات. يؤدي ذلك إلى تجنب مشكلات الأداء والأخطاء التي قد تنجم عن الطلبات الزائدة عن الحاجة.
2. يضخ
تتيح لك وظيفة الأنبوب هذه سلسلة وظائف متعددة معًا في تسلسل. ستأخذ الوظائف في التسلسل نتيجة الوظيفة السابقة كمدخل وستحسب الوظيفة الأخيرة في التسلسل النتيجة النهائية.
هذا مثال في الكود:
// تحديد وظيفة الأنبوب
مقدار ثابت أنبوب = (... funcs) => {
يعود(حج) => {
funcs.forEach (وظيفة(func) {
arg = func (arg) ؛
});يعود حج.
}
}// تحديد بعض الوظائف
مقدار ثابت addOne = (أ) => أ + 1;
مقدار ثابت مزدوج = (x) => س * 2;
مقدار ثابت مربع = (x) => س * س ؛// إنشاء أنبوب مع الوظائف
مقدار ثابت myPipe = أنبوب (addOne ، مزدوج ، مربع) ؛
// اختبار الأنبوب بقيمة إدخال
وحدة التحكم.log (myPipe (2)); // الإخراج: 36
يمكن أن تعمل وظائف الأنابيب على تحسين قابلية القراءة ونمطية الكود من خلال السماح لك بكتابة منطق معالجة معقد بإيجاز. هذا يمكن أن يجعل شفرتك أكثر قابلية للفهم ، ويسهل صيانتها.
3. خريطة
وظيفة الخريطة هي إحدى طرق فئة مصفوفة JavaScript المدمجة. يقوم بإنشاء مصفوفة جديدة عن طريق تطبيق دالة رد نداء على كل عنصر من عناصر المصفوفة الأصلية.
يتنقل عبر كل عنصر في مصفوفة الإدخال ، ويمرره كمدخل إلى وظيفة رد الاتصال ، ويدرج كل نتيجة في مصفوفة جديدة.
المهم أن نلاحظ أن المصفوفة الأصلية لم يتم تعديلها بأي شكل من الأشكال خلال هذه العملية.
فيما يلي مثال على كيفية الاستخدام خريطة:
مقدار ثابت أرقام = [1, 2, 3, 4, 5];مقدار ثابت doubleNumbers = أرقام خريطة (وظيفة(رقم) {
يعود رقم * 2;
});
وحدة التحكم.log (doubleNumbers) ؛
// الإخراج: [2، 4، 6، 8، 10]
في هذا المثال ، تتكرر وظيفة الخريطة فوق كل عنصر في مصفوفة الأرقام. يضرب كل عنصر في 2 ويعيد النتائج في مصفوفة جديدة.
بشكل عام ، تلغي وظائف الخريطة الحاجة إلى باستخدام الحلقات في JavaScript، خاصة اللانهائية منها - يمكن أن تسبب الحلقات اللانهائية عبئًا حسابيًا كبيرًا ، مما يؤدي إلى مشكلات في الأداء في أحد التطبيقات. هذا يجعل قاعدة الكود أكثر إيجازًا وأقل عرضة للخطأ.
4. يختار
تتيح لك وظيفة الانتقاء هذه استخراج خصائص محددة بشكل انتقائي من كائن موجود وإنشاء كائن جديد بهذه الخصائص كنتيجة للحساب.
على سبيل المثال ، ضع في اعتبارك ميزة التقارير في أحد التطبيقات ، من خلال استخدام وظيفة الانتقاء ، يمكنك تخصيصها بسهولة تقارير مختلفة بناءً على معلومات المستخدم المطلوبة عن طريق التحديد الصريح للخصائص التي تريد تضمينها في مختلف التقارير.
هذا مثال في الكود:
مقدار ثابت انتقاء = (كائن... مفاتيح) => {
يعود keys.reduce ((نتيجة مفتاح) => {
لو (object.hasOwnProperty (مفتاح)) {
النتيجة [مفتاح] = كائن [مفتاح] ؛
}
يعود نتيجة؛
}, {});
};
تأخذ وظيفة الانتقاء كائنًا وأي عدد من المفاتيح كوسائط. تمثل المفاتيح الخصائص التي تريد تحديدها. ثم تقوم بإرجاع كائن جديد يحتوي فقط على خصائص الكائن الأصلي بمفاتيح مطابقة.
مقدار ثابت المستخدم = {
اسم: "مارتن",
عمر: 30,
بريد إلكتروني: "[email protected]",
};
وحدة التحكم.log (اختيار (مستخدم ، 'اسم', 'عمر'));
// الإخراج: {name: 'Martin' ، العمر: 30}
بشكل أساسي ، يمكن لوظيفة الانتقاء أن تغلف منطق التصفية المعقد في وظيفة واحدة ، مما يجعل الكود أسهل في الفهم وتصحيح الأخطاء.
يمكن أن يعزز أيضًا قابلية إعادة استخدام الكود ، حيث يمكنك إعادة استخدام وظيفة الانتقاء في جميع أنحاء قاعدة التعليمات البرمجية ، مما يقلل من تكرار الكود.
5. أَزِيز
تجمع وظيفة zip هذه المصفوفات في مصفوفة واحدة من المجموعات ، ومطابقة العناصر المقابلة من كل مصفوفة إدخال.
فيما يلي مثال على تنفيذ وظيفة zip:
وظيفةأَزِيز(... صفائف) {
مقدار ثابت maxLength = رياضيات.min (... arrays.map (مجموعة مصفوفة => الصفيف الطول)) ؛يعودمجموعة مصفوفة.من(
{ طول: الحد الاقصى للطول }،
(_، الفهرس) => خريطة المصفوفات (مجموعة مصفوفة => مجموعة [فهرس])
);
};مقدار ثابت أ = [1, 2, 3];
مقدار ثابت ب = ['أ', 'ب', "ج"];
مقدار ثابت ج = [حقيقي, خطأ شنيع, حقيقي];
وحدة التحكم.log (zip (a، b، c)) ؛
// الإخراج: [[1، 'a'، true]، [2، 'b'، false]، [3، 'c'، true]]
تقبل الدالة zip مصفوفات الإدخال وتحسب أطول طول لها. ثم يقوم بإنشاء وإرجاع مصفوفة واحدة باستخدام طريقة Array.from JavaScript. تحتوي هذه المصفوفة الجديدة على عناصر من كل مصفوفة إدخال.
يعد هذا مفيدًا بشكل خاص إذا كنت بحاجة إلى دمج البيانات من مصادر متعددة على الفور ، مما يلغي الحاجة إلى كتابة تعليمات برمجية متكررة من شأنها أن تؤدي إلى تشويش قاعدة التعليمات البرمجية الخاصة بك.
العمل مع وظائف JavaScript في التعليمات البرمجية الخاصة بك
تعمل وظائف JavaScript على تحسين جودة التعليمات البرمجية بشكل كبير من خلال توفير طريقة مبسطة ومضغوطة للتعامل مع الكثير من منطق البرمجة لكل من قواعد التعليمات البرمجية الصغيرة والكبيرة. من خلال فهم هذه الوظائف واستخدامها ، يمكنك كتابة تطبيقات أكثر كفاءة وقابلة للقراءة ويمكن صيانتها.
تجعل كتابة التعليمات البرمجية الجيدة من الممكن إنشاء منتجات لا تحل مشكلة معينة للمستخدمين النهائيين فحسب ، بل تفعل ذلك بطريقة يسهل تعديلها.