Ale nauka pisania kodu w ES6 nie jest celem tego postu, ani nie jest sposobem na osi\u0105gni\u0119cie czego\u015b za pomoc\u0105 ES6.<\/p>\n Zamiast tego nadal chodzi o WordPress i jQuery. Wr\u00f3c\u0119 do ES6 na ko\u0144cu wpisu. Jedn\u0105 z rzeczy, kt\u00f3r\u0105 chcia\u0142bym om\u00f3wi\u0107, jest usuwanie zduplikowanych element\u00f3w z listy o wsp\u00f3lnej w\u0142a\u015bciwo\u015bci.<\/p>\n M\u00f3wi\u0105c dok\u0142adniej, za\u0142\u00f3\u017cmy, \u017ce masz list\u0119 element\u00f3w \u2014 by\u0107 mo\u017ce jest to uporz\u0105dkowana lista, uporz\u0105dkowana lista lub nawet kontener z zestawem element\u00f3w potomnych \u2014 i ka\u017cdy element potomny ma zestaw w\u0142a\u015bciwo\u015bci.<\/p>\n Te w\u0142a\u015bciwo\u015bci mog\u0105 by\u0107 atrybutami klasy, niestandardowymi w\u0142a\u015bciwo\u015bciami danych lub czym\u015b podobnym. Za\u0142\u00f3\u017cmy na przyk\u0142ad, \u017ce mamy list\u0119 nieuporz\u0105dkowan\u0105, a ka\u017cdy element podrz\u0119dny ma w\u0142a\u015bciwo\u015b\u0107 data-id<\/strong>.<\/p>\n Ponadto za\u0142\u00f3\u017cmy, \u017ce lista element\u00f3w jest tworzona na podstawie odpowiedzi dowolnego danego interfejsu API, w kt\u00f3rym istniej\u0105 duplikaty danych. Oczywi\u015bcie, strona serwera powinna sobie z tym poradzi\u0107, ale w przypadkach, w kt\u00f3rych nie jest to zrobione, nadal mo\u017cna to zrobi\u0107 po stronie klienta.<\/p>\n Oto kod<\/a><\/strong>, jak to zrobi\u0107, z komentarzem poni\u017cej:<\/p>\n Zwr\u00f3\u0107 uwag\u0119 na nast\u0119puj\u0105ce kwestie:<\/p>\n I to jest prawie wiersz po wierszu, co robi kod.<\/p>\n Osobi\u015bcie staram si\u0119 nie u\u017cywa\u0107 instrukcji if\/else<\/strong> w kontek\u015bcie p\u0119tli (lub nawet poza p\u0119tl\u0105), ale zdarzaj\u0105 si\u0119 sytuacje, w kt\u00f3rych nie jest to z\u0142\u0105 praktyk\u0105, a to jest jedna z nich.<\/p>\n Wcze\u015bniej wspomnia\u0142em, \u017ce ES6 ro\u015bnie i jest to co\u015b, czego my, jako deweloperzy, powinni\u015bmy si\u0119 uczy\u0107. Poniewa\u017c nadal to robi\u0119, by\u0107 mo\u017ce powr\u00f3c\u0119 do tego postu i podziel\u0119 si\u0119 tym, jak osi\u0105gn\u0105\u0107 t\u0119 sam\u0105 funkcjonalno\u015b\u0107 przy u\u017cyciu ES6 zamiast jQuery, aby pokaza\u0107, jak mo\u017cna to zrobi\u0107.<\/p>\n Niezale\u017cnie od tego, je\u015bli korzystasz z WordPressa i od lat u\u017cywasz jQuery, zach\u0119cam Ci\u0119 do wyj\u015bcia poza bibliotek\u0119 i zapoznania si\u0119 z niekt\u00f3rymi nowszymi funkcjami j\u0119zyka.<\/p>\n Osobi\u015bcie ucz\u0119 si\u0119 przez dzia\u0142anie i chocia\u017c pocz\u0105tkowo mia\u0142em sk\u0142onno\u015b\u0107 do domy\u015blnego korzystania z jQuery, zdecydowa\u0142em si\u0119 na ES6 w projekcie, nad kt\u00f3rym obecnie pracujemy za<\/a><\/strong> namow\u0105 kolegi z zespo\u0142u<\/a><\/strong>.<\/p>\n![\"Usuwanie](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-164265-61e762088909c.png\")
<\/a><\/p>\nUsuwanie zduplikowanych element\u00f3w (poprzez jQuery)<\/h2>\n
\/**\n * Removes duplicates from the specified array of items; however, this function\n * assumes that $items is an unordered list of items with child elements.\n *\n * @param $items An unordered list of products with duplicaten children.\n * @return $items An unordered list of products no duplicate children.\n *\n * @private\n *\/\nvar _removeDuplicates = function($items) {\n\n var unique = {},\n dataItemId = -1;\n\n $items\n .children()\n .each(function() {\n dataItemId = $(this).attr('data-id');\n if (unique[dataItemId]) {\n $(this).remove();\n } else {\n unique[dataItemId] = true;\n }\n });\n\n return $item;\n};<\/code><\/pre>\n\n
Wi\u0119c co to by\u0142o z ES6?<\/h2>\n
![\"Usuwanie](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-164265-61e7620d6d683.png\")
<\/a><\/p>\n