\\\";const output = safeHTML`User said: ${userInput}`;console.log(output); // User said:

الايجابيات:

السلبيات:


5. WeakMaps وWeakSets

ما هي الخرائط الضعيفة والمجموعات الضعيفة؟

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

المشكلة: أنت تقوم بإنشاء نظام تخزين مؤقت، وتريد التأكد من أنه بمجرد عدم الحاجة إلى الكائنات، سيتم جمعها تلقائيًا من البيانات المهملة لتحرير الذاكرة.

مثال:

let user = { name: \\\"Alice\\\" };const weakCache = new WeakMap();weakCache.set(user, \\\"Cached data\\\");console.log(weakCache.get(user)); // Cached datauser = null; // The entry in weakCache will be garbage collected

الايجابيات:

السلبيات:


6. الكاري

ما هو الكاري؟

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

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

مثال:

const applyDiscount = (discount) => (price) => price - price * (discount / 100);const tenPercentOff = applyDiscount(10);const twentyPercentOff = applyDiscount(20);console.log(tenPercentOff(100)); // 90console.log(twentyPercentOff(100)); // 80

الايجابيات:

السلبيات:


خاتمة

يوفر كل من مفاهيم JavaScript المتقدمة هذه - الوكلاء، والرموز، والمولدات، والقوالب ذات العلامات الحرفية، وWeakMaps، وCurrying - إمكانات فريدة لحل مشكلات معينة بطرق أكثر كفاءة أو قابلة للتطوير أو أنيقة. ومع ذلك، فإنها تأتي مع مقايضات، مثل زيادة التعقيد أو مشكلات الأداء المحتملة.

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

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

","image":"http://www.luping.net/uploads/20241006/172821096567026815e7a06.jpg","datePublished":"2024-11-08T12:01:22+08:00","dateModified":"2024-11-08T12:01:22+08:00","author":{"@type":"Person","name":"luping.net","url":"https://www.luping.net/articlelist/0_1.html"}}
"إذا أراد العامل أن يؤدي عمله بشكل جيد، فعليه أولاً أن يشحذ أدواته." - كونفوشيوس، "مختارات كونفوشيوس. لو لينجونج"
الصفحة الأمامية > برمجة > مفاهيم JavaScript المتقدمة التي يجب أن يعرفها كل مطور

مفاهيم JavaScript المتقدمة التي يجب أن يعرفها كل مطور

تم النشر بتاريخ 2024-11-08
تصفح:871

Advanced JavaScript Concepts Every Developer Should Know

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

في النهاية، سيكون لديك فهم أعمق لجافا سكريبت وتعرف متى (ومتى لا) تستخدم هذه الميزات المتقدمة.


1. الوكلاء

ما هي الوكلاء؟

يسمح لك الوكيل في JavaScript باعتراض وتخصيص العمليات الأساسية مثل عمليات البحث عن الممتلكات والتخصيصات واستدعاءات الوظائف.

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

مثال:

const user = {
  name: "Alice",
  age: 25
};

const handler = {
  get(target, prop) {
    console.log(`Property '${prop}' was accessed`);
    return prop in target ? target[prop] : `Property ${prop} doesn't exist`;
  },
};

const userProxy = new Proxy(user, handler);

console.log(userProxy.name); // Logs: Property 'name' was accessed, Returns: Alice
console.log(userProxy.address); // Logs: Property 'address' was accessed, Returns: Property address doesn't exist

الايجابيات:

  • يسمح لك بالتعامل مع أي تفاعل مع كائن ما واعتراضه تقريبًا.
  • رائعة للتسجيل والتحقق والسلوك الديناميكي.

السلبيات:

  • يمكن أن يؤدي إلى زيادة الأداء في حالة الإفراط في استخدامه.
  • يصعب تصحيح الأخطاء بسبب طبقة التجريد بين منطقك وسلوك الكائن.

2. الرموز

ما هي الرموز؟

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

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

مثال:

const uniqueId = Symbol('id');
const user = {
  [uniqueId]: 123,
  name: "Alice"
};

console.log(user[uniqueId]); // 123
console.log(Object.keys(user)); // ['name'] - Symbol key is hidden from iteration

الايجابيات:

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

السلبيات:

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

3. وظائف المولد

ما هي المولدات؟

المولدات هي وظائف يمكن إيقافها مؤقتًا واستئنافها، مما يجعلها مفيدة لإدارة التدفقات غير المتزامنة أو إنتاج البيانات عند الطلب.

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

مثال:

function* fibonacci() {
  let a = 0, b = 1;
  while (true) {
    yield a;
    [a, b] = [b, a   b];
  }
}

const fib = fibonacci();

console.log(fib.next().value); // 0
console.log(fib.next().value); // 1
console.log(fib.next().value); // 1
console.log(fib.next().value); // 2

الايجابيات:

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

السلبيات:

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

4. حرفية النموذج الموسوم

ما هي الحروف النموذجية ذات العلامات؟

تسمح لك القوالب الموسومة بمعالجة القيم الحرفية للنماذج باستخدام وظيفة، مما يجعلها قوية بشكل لا يصدق لبناء DSLs (اللغات الخاصة بالمجال) مثل مكتبات CSS-in-JS.

المشكلة: أنت بحاجة إلى إنشاء نظام قالب يقوم بمعالجة إدخال المستخدم وتطهيره لتجنب هجمات XSS.

مثال:

function safeHTML(strings, ...values) {
  return strings.reduce((acc, str, i) => acc   str   (values[i] ? escapeHTML(values[i]) : ''), '');
}

function escapeHTML(str) {
  return str.replace(/&/g, "&").replace(/, "<").replace(/>/g, ">");
}

const userInput = "";
const output = safeHTML`User said: ${userInput}`;
console.log(output); // User said: <script>alert('XSS')</script>

الايجابيات:

  • يسمح بالتحكم الدقيق في استيفاء السلسلة.
  • رائعة لإنشاء المكتبات التي تتطلب تحليل السلسلة أو تحويلها (مثل استعلامات CSS وSQL).

السلبيات:

  • ليست هناك حاجة إليها عادة إلا إذا كنت تعمل مع مكتبات محددة أو تقوم بإنشاء مكتبتك الخاصة.
  • قد يكون من الصعب على المبتدئين الفهم والتصحيح.

5. WeakMaps وWeakSets

ما هي الخرائط الضعيفة والمجموعات الضعيفة؟

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

المشكلة: أنت تقوم بإنشاء نظام تخزين مؤقت، وتريد التأكد من أنه بمجرد عدم الحاجة إلى الكائنات، سيتم جمعها تلقائيًا من البيانات المهملة لتحرير الذاكرة.

مثال:

let user = { name: "Alice" };
const weakCache = new WeakMap();

weakCache.set(user, "Cached data");

console.log(weakCache.get(user)); // Cached data

user = null; // The entry in weakCache will be garbage collected

الايجابيات:

  • الجمع التلقائي للمدخلات، ومنع تسرب الذاكرة.
  • مثالية للتخزين المؤقت حيث يكون عمر الكائن غير مؤكد.

السلبيات:

  • WeakMaps غير قابلة للتعداد، مما يجعل من الصعب تكرارها.
  • يقتصر على الكائنات فقط كمفاتيح.

6. الكاري

ما هو الكاري؟

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

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

مثال:

const applyDiscount = (discount) => (price) => price - price * (discount / 100);

const tenPercentOff = applyDiscount(10);
const twentyPercentOff = applyDiscount(20);

console.log(tenPercentOff(100)); // 90
console.log(twentyPercentOff(100)); // 80

الايجابيات:

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

السلبيات:

  • ليست بديهية للمطورين غير المعتادين على البرمجة الوظيفية.
  • يمكن أن يؤدي إلى تعليمات برمجية معقدة للغاية إذا تم استخدامها بشكل مفرط.

خاتمة

يوفر كل من مفاهيم JavaScript المتقدمة هذه - الوكلاء، والرموز، والمولدات، والقوالب ذات العلامات الحرفية، وWeakMaps، وCurrying - إمكانات فريدة لحل مشكلات معينة بطرق أكثر كفاءة أو قابلة للتطوير أو أنيقة. ومع ذلك، فإنها تأتي مع مقايضات، مثل زيادة التعقيد أو مشكلات الأداء المحتملة.

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

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

بيان الافراج تم نشر هذه المقالة على: https://dev.to/noorulhassan/advanced-javascript-concepts-every-developer-should-know-jee?1 إذا كان هناك أي انتهاك، يرجى الاتصال بـ [email protected] لحذفه
أحدث البرنامج التعليمي أكثر>

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

Copyright© 2022 湘ICP备2022001581号-3