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

ما هي العدسات؟

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

• Getter: دالة تستخرج قيمة من بنية البيانات.
• Setter: دالة تقوم بتحديث قيمة داخل بنية البيانات وإرجاع نسخة جديدة من البنية.

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

فوائد العدسات

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

تنفيذ العدسات في جافا سكريبت

لنبدأ بالتنفيذ الأساسي للعدسات في JavaScript.

تنفيذ العدسة الأساسية

يمكن تنفيذ العدسة ككائن باستخدام طرق الحصول والضبط.

const lens = (getter, setter) => ({
  get: (obj) => getter(obj),
  set: (val, obj) => setter(val, obj),
});

const prop = (key) => lens(
  (obj) => obj[key],
  (val, obj) => ({ ...obj, [key]: val })
);

// Usage
const user = { name: 'Alice', age: 30 };

const nameLens = prop('name');

const userName = nameLens.get(user);
console.log(userName); // 'Alice'

const updatedUser = nameLens.set('Bob', user);
console.log(updatedUser); // { name: 'Bob', age: 30 }

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

تأليف العدسات

يمكن تكوين العدسات للعمل مع هياكل البيانات المتداخلة. هنا، سنقوم بإنشاء أداة مساعدة لتركيب العدسات.

const composeLenses = (outerLens, innerLens) => ({
  get: (obj) => innerLens.get(outerLens.get(obj)),
  set: (val, obj) => outerLens.set(innerLens.set(val, outerLens.get(obj)), obj),
});

// Usage with nested data
const addressLens = prop('address');
const cityLens = prop('city');

const userAddressCityLens = composeLenses(addressLens, cityLens);

const user = {
  name: 'Alice',
  address: {
    city: 'Wonderland',
    zip: '12345',
  },
};

const userCity = userAddressCityLens.get(user);
console.log(userCity); // 'Wonderland'

const updatedUser = userAddressCityLens.set('Oz', user);
console.log(updatedUser); // { name: 'Alice', address: { city: 'Oz', zip: '12345' } }

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

التطبيقات العملية للعدسات

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

إدارة الحالة في رد الفعل

في تطبيق React، يمكن استخدام العدسات لإدارة تحديثات الحالة بطريقة أكثر وظيفية ويمكن التنبؤ بها.

import React, { useState } from 'react';

const App = () => {
  const [state, setState] = useState({
    user: {
      name: 'Alice',
      address: {
        city: 'Wonderland',
      },
    },
  });

  const userLens = prop('user');
  const addressLens = prop('address');
  const cityLens = prop('city');

  const userAddressCityLens = composeLenses(userLens, composeLenses(addressLens, cityLens));

  const updateCity = (newCity) => {
    const newState = userAddressCityLens.set(newCity, state);
    setState(newState);
  };

  return (
    

      
City: {userAddressCityLens.get(state)}
       updateCity('Oz')}>Move to Oz
    
  );
};

export default App;

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