كيفية إنشاء متجر باستخدام وظائف نقية

اكتشف جافا سكريبت الوظيفية أحد أفضل كتب البرمجة الوظيفية الجديدة من خلال BookAuthority!

تصوير أوغور أكديمير على Unsplash

تنتج الوظائف الخالصة نفس قيمة المخرجات ، مع إعطاء نفس المدخلات. ليس لديهم أي آثار جانبية ، وأسهل في القراءة والفهم والاختبار.

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

ثبات

الوظائف الخالصة لا تعدل مدخلاتها. يعاملون قيم المدخلات على أنها غير قابلة للتغيير.

القيمة الثابتة هي قيمة لا يمكن تغييرها بمجرد إنشائها.

يوفر Immutable.js بنيات بيانات غير قابلة للتغيير مثل قائمة. ستنشئ بنية البيانات غير القابلة للتغيير بنية بيانات جديدة في كل إجراء.

النظر في الكود التالي:

استيراد {قائمة} من "غير قابل للتغيير" ؛
قائمة const = قائمة () ؛
const newList = list.push (1) ؛

ينشئ push () قائمة جديدة تحتوي على العنصر الجديد. إنه لا يعدل القائمة الحالية.

تقوم delete () بإرجاع قائمة جديدة حيث تمت إزالة العنصر في الفهرس المحدد.

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

المتجر

المتجر يدير الدولة.

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

أرغب في إنشاء متجر كتب باستخدام الأساليب () وإزالة () و getBy ().

أريد أن تكون كل هذه الوظائف وظائف خالصة.

سيكون هناك نوعان من الوظائف النقية التي يستخدمها المتجر:

  • الوظائف التي سوف تقرأ وتصفية الدولة. سأتصل بهم getters.
  • الوظائف التي ستعدل الدولة. سأتصل بهم مستعمرين.

كلا هذين النوعين من الوظائف سوف يأخذان الحالة كمعلمة أولى.

دعنا نكتب المتجر باستخدام وظائف نقية.

استيراد {قائمة} من "غير قابل للتغيير" ؛
استيراد جزئي من "lodash / جزئي" ؛
استيراد MatchProperty من "lodash / MatchProperty" ؛
// اضعي
وظيفة إضافة (الكتب ، كتاب) {
  إرجاع books.push (كتاب) ؛
}
وظيفة إزالة (كتب ، كتاب) {
  فهرس const = books.findIndex (MatchProperty ("id"، book.id)) ؛
  إرجاع books.delete (الفهرس) ؛
}
// حاصل
استعلام عن وظيفةContainsBook (استعلام ، كتاب) {
  if (query && query.text) {
    return book.title.includes (query.text)؛
  }
  العودة الحقيقية ؛
}
وظيفة getBy (الكتب ، الاستعلام) {
  إرجاع books.filter (جزئي (queryContainsBook ، استعلام)). toArray ()؛
}

المكتبة

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

كيف احقق هذا؟

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

إليك كيفية استخدام المكتبة لتعريف المتجر:

استيراد {قائمة} من "غير قابل للتغيير" ؛
استيراد المتجر من "./Store-toolbox"؛
// اضعي
وظيفة إضافة (الكتب ، كتاب) {}
وظيفة إزالة (كتب ، كتاب) {}
// حاصل
وظيفة getBy (الكتب ، الاستعلام) {}
متجر التصدير الافتراضي ({
  الدولة: قائمة () ،
  التسوية: {إضافة ، إزالة} ،
  getters: {getBy}
})؛

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

سيتم تزيين جميع الهدايا العامة والمستوطنين وسيحصلون على الولاية كمعلمة أولى.

  • سيتم إرجاع قيمة الإرجاع من getters إلى وظائف المتصل.
  • سيتم استخدام القيمة التي يتم إرجاعها من الحروف لتغيير الحالة. لن تتلقى وظائف المتصل الحالة الجديدة.
وظيفة تزيينالأساليب (obj ، ديكور) {
  دع newObject = {... obj}؛
  Object.keys (newObject) .forEach (دالة decorateMethod (fnName) {
    if (typeof newObject [fnName] === "function") {
      newObject [fnName] = decorator (newObject [fnName]) ؛
    }
  })؛
  إرجاع newObject ؛
}
متجر الوظائف (storeConfig) {
  وظيفة الإرجاع () {
    اسمحوا الدولة = storeConfig.state.
    أداة تحديد الوظائف (fn) {
      دالة الإرجاع (... الحجج) {
        state = fn (state، ... args)؛
      }؛
    }
    getter function (fn) {
      دالة الإرجاع (... الحجج) {
        return fn (state، ... args)؛
      }؛
    }
    إرجاع Object.freeze ({
      ... decorMethods (storeConfig.getters ، getter) ،
      ... decorMethods (storeConfig.setters، setter)
    })؛
  }؛
}
متجر التصدير الافتراضي ؛

Store () ينشئ دالة تُرجع كائنًا يطرح الحالة.

لنقم بإنشاء واستخدام عنصر bookStore:

استيراد BookStore من ". / BookStore" ؛
const bookStore = BookStore () ؛
bookStore.add ({id: 1، title: "How JavaScript Works"})؛

عند استدعاء bookStore.add ({}) ، سوف يقوم أداة تعيين setter باستدعاء وظيفة setter الخالصة add () بالحالة الحالية كمعلمة أولى والكتاب الجديد كمعلمة ثانية. بعد ذلك ، سوف تستخدم أداة ضبط النتائج النتيجة لتغيير قيمة الحالة.

الكائن

دعنا نحلل كائن bookStore.

يكشف فقط ثلاث طرق ، كل الوظائف البحتة الأخرى خاصة.

لا يمكن تعديل الواجهة العامة للكائن من الخارج.

الدولة مخفية. يمكن للعملاء الذين يستخدمون كائن bookStore الوصول إلى الحالة فقط من خلال الطرق العامة.

استنتاج

وظائف نقية هي أسهل لسبب.

يمكننا إنشاء متجر يخفي الحالة ويستخدم وظائف خالصة بمساعدة مكتبة.

يمكننا فقط كتابة الوظائف الخالصة والسماح للمكتبة بتطبيقها والقيام بالتحول.

يمكنك التحقق من نموذج التعليمات البرمجية على codesandbox.io.

اكتشف جافا سكريبت الوظيفية أحد أفضل كتب البرمجة الوظيفية الجديدة من خلال BookAuthority!

لمعرفة المزيد عن تطبيق التقنيات الوظيفية على React ، ألق نظرة على Reactive React.

تعرف على كيفية تطبيق مبادئ أنماط التصميم.

يمكنك أن تجد لي على تويتر.