ວິທີການສ້າງທຸລະກິດທີ່ມີ ໜ້າ ທີ່

ຄົ້ນພົບຟັງຊັນ JavaScript ທີ່ໄດ້ຮັບການຍອມຮັບຈາກ BookAuthority ເປັນ ໜຶ່ງ ໃນປື້ມ ໃໝ່ ທີ່ດີທີ່ສຸດໃນການຂຽນໂປແກຼມທີ່ມີປະໂຫຍດ!

ຮູບພາບໂດຍ Ugur Akdemir ໃນ Unsplash

ຫນ້າທີ່ບໍລິສຸດສ້າງມູນຄ່າຜົນຜະລິດດຽວກັນກັບການປ້ອນຂໍ້ມູນດຽວກັນ. ພວກມັນບໍ່ມີຜົນຂ້າງຄຽງແລະງ່າຍຕໍ່ການອ່ານເຂົ້າໃຈແລະທົດສອບ.

ດ້ວຍຄວາມຄິດນັ້ນ, ຂ້ອຍຢາກຕັ້ງຮ້ານທີ່ເຊື່ອງສະຖານະພາບແຕ່ໃຊ້ການເຮັດວຽກທີ່ບໍລິສຸດໃນເວລາດຽວກັນ.

ຄວາມບໍ່ປ່ຽນແປງ

ຫນ້າທີ່ບໍລິສຸດບໍ່ປ່ຽນແປງການປ້ອນຂໍ້ມູນຂອງມັນ. ພວກເຂົາຖືວ່າມູນຄ່າການປ້ອນຂໍ້ມູນແມ່ນປ່ຽນແປງໄດ້.

ມູນຄ່າທີ່ບໍ່ສາມາດປ່ຽນແປງໄດ້ແມ່ນມູນຄ່າທີ່ບໍ່ສາມາດປ່ຽນແປງໄດ້ຫຼັງຈາກສ້າງແລ້ວ.

Immutable.js ໃຫ້ໂຄງສ້າງຂໍ້ມູນທີ່ບໍ່ປ່ຽນແປງໄດ້ເຊັ່ນ: List. ໂຄງສ້າງຂໍ້ມູນທີ່ບໍ່ປ່ຽນແປງສ້າງໂຄງສ້າງຂໍ້ມູນ ໃໝ່ ດ້ວຍທຸກໆການກະ ທຳ.

ພິຈາລະນາລະຫັດຕໍ່ໄປ:

ນຳ ເຂົ້າ {ບັນຊີລາຍຊື່} ຈາກ "ທີ່ບໍ່ປ່ຽນແປງໄດ້";
const list = ລາຍຊື່ (); const newList = list.push (1);

push () ສ້າງລາຍຊື່ ໃໝ່ ກັບອົງປະກອບ ໃໝ່. ບັນຊີລາຍຊື່ທີ່ມີຢູ່ບໍ່ໄດ້ປ່ຽນແປງ.

Delete () ສົ່ງຄືນລາຍຊື່ ໃໝ່ ທີ່ອົງປະກອບທີ່ຢູ່ໃນດັດຊະນີທີ່ຖືກ ກຳ ນົດອອກແລ້ວ.

ໂຄງສ້າງຂໍ້ມູນບັນຊີແມ່ນໃຫ້ມີການໂຕ້ຕອບທີ່ດີ ສຳ ລັບເຮັດວຽກກັບລາຍການທີ່ບໍ່ສາມາດປ່ຽນແປງໄດ້, ສະນັ້ນຂ້ອຍຈະໃຊ້ມັນເປັນຄຸນຄ່າສະຖານະພາບ

ທຸລະກິດ

ຮ້ານຄຸ້ມຄອງລັດ.

ສະຖານະພາບແມ່ນຂໍ້ມູນທີ່ສາມາດປ່ຽນແປງໄດ້. ຮ້ານເກັບຂໍ້ມູນສະຖານະພາບນີ້ແລະສະ ໜອງ ວິທີການຂອງສາທາລະນະ ສຳ ລັບເຮັດວຽກກັບມັນ.

ຂ້ອຍຕ້ອງການສ້າງຮ້ານຂາຍປື້ມໂດຍໃຊ້ວິທີການເພີ່ມ (), ເອົາ () ແລະ getBy ().

ຂ້ອຍຕ້ອງການໃຫ້ ໜ້າ ທີ່ທັງ ໝົດ ນີ້ເປັນ ໜ້າ ທີ່ບໍລິສຸດ.

ມີສອງປະເພດຂອງ ໜ້າ ທີ່ບໍລິສຸດທີ່ໃຊ້ໂດຍທຸລະກິດ:

  • ຟັງຊັນທີ່ອ່ານແລະກັ່ນຕອງສະຖານະພາບ. ຂ້າພະເຈົ້າຈະໂທຫາພວກເຂົາຜູ້ຮັບ.
  • ຫນ້າທີ່ປ່ຽນແປງລັດ. ຂ້ອຍຈະໂທຫາພວກເຂົາຜູ້ຕັ້ງຄ່າ.

ໜ້າ ທີ່ທັງສອງປະເພດຖືສະຖານະພາບເປັນພາລາມິເຕີ ທຳ ອິດ.

ຂໍໃຫ້ຂຽນຮ້ານດ້ວຍຫນ້າທີ່ບໍລິສຸດ.

ນຳ ເຂົ້າ {ບັນຊີລາຍຊື່} ຈາກ "ທີ່ບໍ່ປ່ຽນແປງໄດ້"; ການ ນຳ ເຂົ້າບາງສ່ວນຈາກ "lodash / ບາງສ່ວນ"; ນຳ ເຂົ້າ MatchesProperty ຈາກ lodash / matchesProperty;
// add function setter (ປື້ມ, ປື້ມ) {ກັບຄືນປື້ມ.push (ປື້ມ); }
ເອົາ ໜ້າ ທີ່ອອກ (ປື້ມ, ປື້ມ) {const index = books.findIndex (matchesProperty ("id", book.id)); ກັບຄືນ books.delete (ດັດຊະນີ); }
// Getter function queryContainsBook (ແບບສອບຖາມ, ປື້ມ) {ຖ້າ (query && query.text) {ກັບຄືນ book.title.includes (query.text); } ກັບຄືນມາເປັນຄວາມຈິງ; }
Function getBy (ປື້ມ, ການສອບຖາມ) {books.filter ກັບຄືນ (ບາງສ່ວນ (queryContainsBook, query)). toArray (); }

ຫໍສະມຸດ

ສະຖານະພາບຄວນຖືກເຊື່ອງໄວ້ໃນວັດຖຸທຸລະກິດ. ຂ້ອຍບໍ່ຕ້ອງການສົ່ງສະຖານະພາບໄປສູ່ວັດຖຸທຸລະກິດຈາກພາຍນອກ. ໃນເວລາດຽວກັນ, ຂ້ອຍຕ້ອງການໃຊ້ປະໂຫຍດຈາກ ໜ້າ ທີ່ບໍລິສຸດແລະ ນຳ ໃຊ້ມັນເພື່ອ ກຳ ນົດວິທີການເກັບຮັກສາ.

ວິທີນີ້ສາມາດເຮັດໄດ້ແນວໃດ?

ພວກເຮົາໄດ້ເຫັນ ຄຳ ຕອບຢູ່ Redux. ພວກເຮົາຂຽນ ໜ້າ ທີ່ບໍລິສຸດແລະປ່ອຍໃຫ້ຫ້ອງສະມຸດສ້າງຄວາມຊົງ ຈຳ ແລະ ນຳ ໃຊ້ ໜ້າ ທີ່ບໍລິສຸດ.

ນີ້ແມ່ນວິທີທີ່ຂ້ອຍຕ້ອງການໃຊ້ຫ້ອງສະ ໝຸດ ເພື່ອ ກຳ ນົດທຸລະກິດ:

ນຳ ເຂົ້າ {ບັນຊີລາຍຊື່} ຈາກ "ທີ່ບໍ່ປ່ຽນແປງໄດ້"; ນຳ ເຂົ້າຮ້ານຈາກ "./Store-toolbox";
// ເພີ່ມຟັງຊັນ setter (ປື້ມ, ປື້ມ) {} ເອົາ ໜ້າ ທີ່ອອກ (ປື້ມ, ປື້ມ) {}
// function getter getBy (ປື້ມ, ຄຳ ຖາມ) {}
ສົ່ງອອກຫນ່ວຍຄວາມ ຈຳ ມາດຕະຖານ ({ລັດ: ລາຍຊື່ (), ຕົວຕັ້ງຄ່າ: {ເພີ່ມ, ເອົາ}, ເຄື່ອງຮັບ: {getBy}});

ໃຫ້ເຮົາສ້າງຫ້ອງສະມຸດຈຸນລະພາກນີ້ເຊິ່ງຈະສ້າງຮ້ານຂື້ນໂດຍອີງໃສ່ເຄື່ອງຮັບແລະເຄື່ອງຕັ້ງທີ່ບໍລິສຸດ.

ເຄື່ອງລີດແລະເຄື່ອງຕັ້ງສາທາລະນະທັງ ໝົດ ລ້ວນແຕ່ຖືກຕົກແຕ່ງແລະໃຫ້ສະຖານະພາບເປັນພາລາມິເຕີ ທຳ ອິດ.

  • ມູນຄ່າການກັບຄືນຂອງຜູ້ທີ່ໄດ້ຮັບແມ່ນຖືກສົ່ງກັບຫນ້າທີ່ຜູ້ໂທ.
  • ມູນຄ່າທີ່ສົ່ງຄືນໂດຍ stetters ແມ່ນໃຊ້ເພື່ອປ່ຽນສະຖານະພາບ. ໜ້າ ທີ່ຂອງຜູ້ໂທບໍ່ໄດ້ຮັບສະຖານະພາບ ໃໝ່.
Function ແບບວິທີການ (obj, ເຄື່ອງຕົກແຕ່ງ) {ໃຫ້ newObject = {... obj};
Object.key (newObject) .forEach (function decorateMethod (fnName) {ຖ້າ (typeof newObject [fnName] === "ຟັງຊັນ") {newObject [fnName] = ຜູ້ອອກແບບ (NewObject [fnName]);}});
return newObject; }
Function Store (storeConfig) {return function () {let state = storeConfig.state;
ຕົວກໍານົດການທີ່ກໍານົດໄວ້ (fn) {ກັບຄືນຫນ້າທີ່ (... ໂຕ້ຖຽງ) {ລັດ = fn (ລັດ, ... ໂຕ້ຖຽງ); }; }
Getter function (fn) {return function (... ໂຕ້ຖຽງ) {return fn (ລັດ, ... ຖຽງ); }; }
ກັບຄືນ Object.freeze ({... decorateMet methods (storeConfig.getters, getter), ... decorateMet methods (storeConfig.setters, setter)}); }; }
ສົ່ງອອກການເກັບຮັກສາມາດຕະຖານ;

ເກັບຮັກສາ () ສ້າງ ໜ້າ ທີ່ທີ່ສົ່ງຄືນວັດຖຸທີ່ປິດລ້ອມລັດ.

ສ້າງແລະ ນຳ ໃຊ້ຈຸດປະສົງຂອງຮ້ານຂາຍປື້ມ:

ນຳ ເຂົ້າ BookStore ຈາກ "./BookStore";
const bookStore = BookStore (); bookStore.add ({id: 1, ຫົວຂໍ້: "JavaScript ເຮັດວຽກແນວໃດ"});

ໃນເວລາທີ່ bookStore.add ({}) ຖືກເອີ້ນ, ຜູ້ອອກແບບ setter ເອີ້ນວ່າ add () ຟັງຊັນທີ່ບໍລິສຸດທີ່ມີສະຖານະພາບປະຈຸບັນເປັນພາລາມິເຕີ ທຳ ອິດແລະປື້ມ ໃໝ່ ເປັນພາລາມິເຕີທີສອງ. ຫຼັງຈາກນັ້ນຜູ້ອອກແບບຕົກແຕ່ງຜູ້ ນຳ ໃຊ້ຜົນໄດ້ຮັບເພື່ອປ່ຽນຄຸນຄ່າຂອງລັດ.

ຈຸດປະສົງ

ໃຫ້ພວກເຮົາວິເຄາະວັດຖຸ bookStore.

ມີພຽງສາມວິທີການເທົ່ານັ້ນທີ່ເຮັດໄດ້, ທຸກໆ ໜ້າ ທີ່ບໍລິສຸດອື່ນໆແມ່ນສ່ວນຕົວ.

ການໂຕ້ຕອບຂອງສາທາລະນະຂອງວັດຖຸບໍ່ສາມາດປ່ຽນແປງຈາກພາຍນອກ.

ລັດຖືກປິດບັງ. ລູກຄ້າທີ່ໃຊ້ວັດຖຸປື້ມສາມາດເຂົ້າເຖິງສະຖານະພາບໄດ້ໂດຍຜ່ານວິທີການຂອງສາທາລະນະເທົ່ານັ້ນ.

ສະຫຼຸບ

ຫນ້າທີ່ບໍລິສຸດແມ່ນງ່າຍທີ່ຈະເຂົ້າໃຈ.

ດ້ວຍການຊ່ວຍເຫຼືອຂອງຫ້ອງສະມຸດ, ພວກເຮົາສາມາດສ້າງຄວາມຊົງ ຈຳ ທີ່ເຊື່ອງສະຖານະພາບແລະ ນຳ ໃຊ້ ໜ້າ ທີ່ທີ່ບໍລິສຸດ.

ພວກເຮົາພຽງແຕ່ສາມາດຂຽນ ໜ້າ ທີ່ບໍລິສຸດແລະປ່ອຍໃຫ້ຫ້ອງສະ ໝຸດ ນຳ ໃຊ້ມັນແລະເຮັດການປ່ຽນແປງ.

ທ່ານສາມາດກວດເບິ່ງລະຫັດຕົວຢ່າງທີ່ຢູ່ໃນ codesandbox.io.

ຄົ້ນພົບຟັງຊັນ JavaScript ທີ່ໄດ້ຮັບການຍອມຮັບຈາກ BookAuthority ເປັນ ໜຶ່ງ ໃນປື້ມ ໃໝ່ ທີ່ດີທີ່ສຸດໃນການຂຽນໂປແກຼມທີ່ມີປະໂຫຍດ!

ສຳ ລັບຂໍ້ມູນເພີ່ມເຕີມກ່ຽວກັບການ ນຳ ໃຊ້ເຕັກນິກທີ່ເປັນປະໂຫຍດໃຫ້ກັບ React, ເບິ່ງ React Functional.

ຮຽນຮູ້ວິທີການ ນຳ ໃຊ້ຫຼັກການຂອງຮູບແບບການອອກແບບ.

ທ່ານສາມາດຊອກຫາຂ້ອຍຢູ່ໃນ Twitter.