Back to Question Center
0

JavaScript дизайн загвар: Observer Pattern            JavaScript дизайн загвар: Ажиглагчийн загварЗохиогчийн сэдэв: AngularJSNode.jsAjaxTools & Semalt

1 answers:
JavaScript дизайн загвар: Observer Pattern

Жавад хийдэг асуудал байнга гардаг. Тодорхой үйл явдлын хариуд өгөгдсөн хуудсыг шинэчлэх арга зам нь эдгээр өгөгдлүүдтэй танилцах болно. Жишээ нь, та дараа нь нэг буюу хэд хэдэн бүрэлдэхүүн хэсэгт төсөвлөсөн хэрэглэгчийн оролт гэж хэлээрэй. Энэ нь бүгдийг нь синхрончлохын тулд кодыг түлхэх-татах-татахад хүргэдэг.

Энэ нь ажиглагчийн дизайны загвар нь элементүүдийн хоорондын нэг буюу хэд хэдэн өгөгдлийг холбох боломжийг олгодог. Энэхүү нэг чиглэлтэй өгөгдөлд холбох нь үйл явцыг удирдана. Энэ загвараар та өөрийн онцлог хэрэгцээнд нийцсэн дахин ашиглаж болох кодыг барьж болно.

Энэ өгүүлэлд, Semalt ажиглагчийн загварыг судлах дуртай байдаг. Энэ нь танд клиент талын скрипт дээр үзсэн нийтлэг асуудлыг шийдэхэд танд туслах болно. Энэ бол нэгээс олон, нэг чиглэлтэй, үйл явдалтай холбоотой өгөгдөлд хамаарна. Энэ нь олон элементүүдийг синк хийх шаардлагатай үед гарч ирдэг асуудал юм.

Загварыг зурахдаа ECMAScript 6-г ашиглана. Тийм, анги, сумын функц, тогтмол байх болно. Хэрэв та аль хэдийн танил биш бол эдгээр сэдвүүдийг судалж үзэхийг хүсч байна. Зөвхөн синтетик элсэн чихрийг нэвтрүүлж буй ES6-ийн семальтыг хэрэглэдэг тул шаардлагатай бол ES5-тай зөөврийн саванд хийж болно.

Тэгээд би Semalt (TDD) -ийг загвар дээр ажиллах болно. Энэ арга нь бүрэлдэхүүн хэсэг бүр ашигтай байхыг мэдэх арга замтай.

ES6 дээрх хэлний шинэ боломжууд товч тодорхой кодыг гаргадаг. Тиймээс, эхлээрэй.

Үйл явдлын ажиглагч

Дээрх өндөр түвшний дүр төрх нь иймэрхүү байна:

     EventObserver│├── захиалах: Шинэ ажиглагдах үйл явдлуудыг нэмдэг│├── бүртгэлээс хасах: ажиглагдаж болох үйл явдлыг арилгах|└── цацалт: бүх үйл явдлыг хууль бус өгөгдөлтэй гүйцэтгэдэг    

Би ажиглагчийн загварыг сөнөөсний дараагаар Сеалтор үүнийг ашигладаг үгийг тоолно. Хэмжээний тоолох үг энэ ажиглагчийг авч, бүгдийг нь хамтад нь авчирна.

EventObserver -ийг эхлүүлэхийн тулд:

     class EventObserver {constructor    {энэ нь. ажиглагч = [];}}    

Ажиглагдсан үйл явдлын хоосон жагсаалтаас эхлээд шинэ зүйл бүрийг хий. Одоо эхлэн EventObserver доторх аргуудаас илүү олон аргуудаа дизайны загварыг нэмж оруулцгаая.

Захиалгын арга

Шинэ үйл явдлуудыг нэмэхийн тулд:

     захиалах (fn) {энэ нь. ажиглагчид. түлхэх (fn);}    

Ажиглагдаж буй үйл явдлын жагсаалтыг гаргаж, шинэ зүйлийг массив руу түлхэнэ. Үйл явдлын жагсаалт нь буцах функцийн жагсаалт юм.

Энэх аргыг турших нэг арга нь дараах байдлаар байна:

     // Суурьшуулалтconst ажиглагч = шинэ EventObserver   ;const fn =    => {};// Үйлдэлажиглагч. subscribe (fn);// Итгэмжээрэйгэжээ. strictEqual (ажиглагчийн ажиглагчийн урт, 1);    

Энэ бүрэлдэхүүнийг Node дээр туршихын тулд Node батламж мэдэгдлийг ашигладаг. Чай мэдэгдлээр яг адилхан нотолгоо байдаг.

Ажиглагдаж буй үйл явдлын жагсаалтыг даруухан дуудлагад багтаахыг анхаарна уу. Дараа нь бид жагсаалтын уртыг шалгаж, дуудлага нь жагсаалтанд байгаа эсэхийг шалгана.

Баталгаагүй арга

Үйл явдлыг арилгахын тулд:

     Бүртгэлээс хасах (fn) {энэ нь. ажиглагч = энэ. ажиглагчид. filter ((захиалагч) => захиалагч! == fn);}    

Дуудлагын функцтэй таарч байгаа жагсаалтаас жагсаалтыг гаргана. Хэрвээ таарахгүй бол дуудлага буцаах нь жагсаалтад үлдэх болно. Шүүлтүүр нь шинэ жагсаалтыг гаргаж, ажиглагчдын жагсаалтыг дахин хийдэг.

Энэ аргыг туршихын тулд:

     // Суурьшуулалтconst ажиглагч = шинэ EventObserver   ;const fn =    => {};ажиглагч. subscribe (fn);// Үйлдэлажиглагч. Бүртгэлээс хасах (fn);// Итгэмжээрэйгэжээ. strictEqual (ажиглагчийн ажиглагчийн урт, 0);    

Дуудлагаback нь жагсаалтанд байгаа функцтэй таарах ёстой. Хэрэв тоглолт байгаа бол бүртгэлээс хасах арга нь жагсаалтаас хасагдана.

Өргөн нэвтрүүлгийн арга

Бүх үйл ажиллагааг дуудахын тулд:

     нэвтрүүлэг (өгөгдөл) {энэ нь. ажиглагчид. forEach ((захиалагч) => захиалагч (өгөгдөл));}    

Энэ нь ажиглагдаж буй үйл явдлын жагсаалтыг давтаж, дуудлагын бүх дуудлагыг гүйцэтгэдэг. Үүнтэй уялдсан захиалгат үйл явдлуудад шаардлагатай нэгээс олон харилцааг авдаг. Та өгөгдөл параметрийг дамжуулдаг бөгөөд энэ нь буцах өгөгдлийг хамардаг.

ES6 кодыг arrow функцтэй илүү үр дүнтэй болгодог. (захиалагч) => захиалагч (өгөгдөл) гэдгийг анхаарах хэрэгтэй. Энэ товч нь энэ богино ES6 синтаксаас ашигтай байдаг. Энэ нь JavaScript програмчлалын хэл дээр тодорхой сайжруулалт юм.

Энэ өргөн нэвтрүүлгийг туршихын тулд дараах зүйлийг хийнэ:

     // Суурьшуулалтconst ажиглагч = шинэ EventObserver   ;subscriberHasBeenCalled = false;const fn = (өгөгдөл) => захиалагчHasBeenCalled = өгөгдөл;ажиглагч. subscribe (fn);// Үйлдэлажиглагч. цацах (үнэн);// Итгэмжээрэйгэж бичсэн (захиалагчBasBeenCalled);    

const оронд let ашиглахын тулд бид хувьсагчийн утгыг өөрчилж болно. Энэ нь хувьсах хэмжигдэхүүнийг өөрчлөх боломжийг олгодог бөгөөд энэ нь намайг дахин дуудлага хийх дотор утга буцааж өгөх боломжийг олгодог. Таны кодонд let ашиглах нь хувьсагч нь зарим үед өөрчлөгдөж буй бусад програмистуудад дохио илгээдэг. Энэ нь таны JavaScript кодыг ойлгоход хялбар болгож өгдөг.

Энэ туршилт нь ажиглагчийг миний хүлээж байгаа шиг ажиллахад шаардлагатай итгэлтэй байдлыг надад олгодог. TDD-ийн хувьд энэ нь энгийн Semalt дээр дахин ашиглагдах кодыг бий болгох тухай юм. Туршилтын кодыг энгийн Semalt дээр бичих нь ашигтай байдаг. Бүгдийг шалгаад кодыг дахин ашиглахад хэрэгтэй зүйлээ үлдээнэ үү.

Үүнтэй хамт бид EventObserver гарч ирсэн. Асуулт бол та үүнийг хэрхэн бүтээж чадах вэ?

Observer Pattern in Action: Абд Word Count Demo

Демо-д зориулж, та блог шуудангийн байршлыг байрлуулах цаг боллоо. Оролт болгон оролт болгоны дараа оролтын дизайн загвараар синк хийгдэх болно. Аливаа үйл явдал нь хаашаа явахыг хүссэн газраа шинэчлэгдэх үнэгүй текст оруулгалд оруулна.

Үнэгүй текст оруулахаас гарах үгний тоог авахын тулд үүнийг хийж чадна:

     const getWordCount = (текст) => текст үү? текст. обуд   . хуваалт (/ \ s + /). урт: 0;    

Дууссан! Энэ нь энгийн энгийн цэвэр функцээр хийгддэг, тиймээс энгийн нэгжийн сорилтыг яаж хийх вэ? Энэ аргаар би үүнийг хийхийг зорьж байгаа нь тодорхой байна:

     // Суурьшуулалтconst blogPost = 'Энэ бол блог \ n \ n үг тоолох замаар нийтлэх. ';// Үйлдэлconst count = getWordCount (blogPost);// Итгэмжээрэйгэжээ. strictEqual (тоо, 9);    

Дотор оролтын мөр дотроо блогPost дотор байгаа гэдгийг анхаараарай. Би энэ функцийг аль болох олон захын хэргийг хамрахаар төлөвлөж байна. Надад зөв үгээр тоолж өгвөл бид зөв чиглэлд явж байна.

Тэмдэглэл нь TDD-ийн жинхэнэ хүч юм. Энэхүү хэрэгжилтийг аль болох олон удаа ашиглах боломжтой. Энэ нэгжийн тест нь үүнийг хэрхэн ажиллахыг хүсэн хүлээдэг. Хэрвээ зан авир нь ямар нэг шалтгаанаар алдаа гарвал түүнийг давтаж хялбаршуулах болно. Туршилтаар өөр хэн нэгэн өөрчлөлт хийх хангалттай нотолгоо байдаг.

Дахин ашиглах боломжтой бүрдэл хэсгүүдийг DOM руу дамжуулж байх хугацаа. Энэ бол та энгийн бегеед Самальтийг авч браузерт шууд гагнах хэсэг юм.

Үүнийг хийх арга нь дараах HTML хуудастай байх явдал юм:

                                      
February 28, 2018