وكلاء ES6 في الممارسة العملية

مع ظهور ECMAScript 2015 ، جاءت مجموعة هائلة من الميزات ؛ بعضها يجعلك تشعر بالجنون ، والبعض الآخر مفاجآت سارة ، مثل مقابلة صديق قديم بعد وقت طويل.

ترتبط بعض الميزات metaprogramming. ما هذا؟ أنا لست بليغاً للغاية ، لذلك دعونا ننتقل إلى صديقنا ، ويكيبيديا.

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

باختصار ، يتيح metaprogramming لبرنامج التعامل مع الآخرين أو أنفسهم في وقت التجميع والتنفيذ. يستند Metaprogramming في JavaScript إلى ميزتين: Proxy و Reflect API. في هذا المنشور ، سوف ننظر في أول واحد.

الوكيل

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

• الملف الشخصي وسجلات التصحيح ،
• اعتراض المكالمات إلى الخصائص ،
• التحقق من صحة "على الطاير" ،
• إلخ

Proxy هو مُنشئ يقبل معلمتين: كائن المصدر والكائن الذي يعمل بمثابة معالج للكائن المصدر. هذا الأخير يحتوي على الأساليب المعروفة باسم الفخاخ.

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

لفهم فائدة الوكلاء بشكل أفضل ، دعنا نقوم ببعض التمارين الصغيرة.

مثال: تسجيل / التنميط

فقط تخيل أنك تبلغ من العمر 17 عامًا ، على وشك أن تبلغ من العمر 18 عامًا. وتريد أن يهنئك البرنامج تلقائيًا عند فتحه. لهذا ، يمكنك استخدام وكيل.

et person = { name: "John Doe", age: 17 }; person = new Proxy(person, { set(target, property, value) { if (value === 18) { console.log("Congratulations! You are of legal age"); Reflect.set(target, property, value); return true; } } }); person.age = 18; Not only can we do logs, as I said at the beginning, we can do as far as the language limits us. Here we could make validations for the age, for example, if it exceeds 100 that throw us an error: if (value < 13 && value > 99) { throw new Error('The age should be between 13 and 99') } else { Reflect.set(target, property, value) } Example: secure access to properties let person = { name: "John Doe" }; const Undefined = new Proxy( {}, { get(target, name, receiver) { return Undefined; } } ); const Safeish = obj => { return new Proxy(obj, { get(target, property, receiver) { if (target.hasOwnProperty(property)) { const isObject = target[property] instanceof Object; return isObject ? Safeish(target[property]) : Reflect.get(target, property, receiver); } return Undefined; } }); }; person = Safeish(person); console.log(person.name); console.log(person.sister.name === Undefined); 

مثال: مجموعة الاستعلام

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

لهذا ، سنحتاج إلى معلمتين للإدخال:

• جمع: مجموعة من الأشياء التي سنقوم بتمديدها.
• groupKeys: مجموعة من السلاسل التي تمثل الخصائص التي ستقوم بتجميعها (الاسم ، الفئة ، السعر ، إلخ.)

 const data = [ { id: 1, category: 2, name: "Intel NUC Hades Canyon" }, { id: 2, category: 1, name: "Logitech K380" }, { id: 3, category: 1, name: "Genius ECO-8100" } ]; const groupable = (collection, groupKeys) => { // Check that the collection is an array if (!(collection instanceof Array)) { throw new TypeError("The input collection is not an Array"); } const data = JSON.parse(JSON.stringify(collection)); const clone = JSON.parse(JSON.stringify(collection)); Object.defineProperty(clone, "groupBy", { configurable: true, enumerable: false, writable: false, value: groupKeys.reduce((acc, cur) => { acc[cur] = null; return acc; }, {}) }); 

  return new Proxy(clone, { get(target, property, receiver) { if (property === "groupBy") { return new Proxy(target[property], { get(target, property, receiver) { // if the property to be grouped does not exist // log a warning and return [] if (!target.hasOwnProperty(property)) { return []; } // Otherwise, group by property return data.reduce(function(acc, cur) { (acc[cur[property]] = acc[cur[property]] || []).push(cur); return acc; }, {}); } }); } return Reflect.get(target, property, receiver); } }); }; const datasource = groupable(data, ["category"]); console.log(datasource.groupBy.category); 

الاستنتاجات

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

مراجع