تكوين الوظيفة في JavaScript

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

compose = (fn1, fn2) => value => fn2(fn1(value))

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

add2AndSquare = (n) => square(add2(n))

يمكننا استخدام دالة ذات رتبة أعلى لربطها بطريقة مرتبة.

add2AndSquare = compose( add2, square)

سيكون التنفيذ البسيط للإنشاء هو:

compose = (f1, f2) => value => f2( f1(value) );

للحصول على مزيد من المرونة ، يمكننا استخدام وظيفة تقليل الحقوق:

compose = (...fns) => (initialVal) => fns.reduceRight((val, fn) => fn(val), initialVal);

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

// example const add2 = (n) => n + 2; const times2 = (n) => n * 2; const times2add2 = compose(add2, times2); const add6 = compose(add2, add2, add2); times2add2(2); // 6 add2tiems2(2); // 8 add6(2); // 8

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

function logProps(InputComponent) { InputComponent.prototype.componentWillReceiveProps = function(nextProps) { console.log('Current props: ', this.props); console.log('Next props: ', nextProps); }; return InputComponent; } // EnhancedComponent will log whenever props are received const EnhancedComponent = logProps(InputComponent);

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

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