{"draftJsState":{"blocks":[{"data":{"image":{"id":"6324fe39e39edd5b7fc3b3cb"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"5bf9h"},{"data":{},"depth":0,"entityRanges":[{"key":0,"length":22,"offset":10}],"inlineStyleRanges":[],"text":"Источник: Nuances of Programming","type":"unstyled","key":"b3d2i"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"При непрерывной итерации неизбежно возникают схожие бизнес-требования к проектам. Каждый дизайнер-разработчик наверняка сталкивался с подобной ситуацией. Зачастую аналогичные реализации приводят к тому, что функции или компоненты с одинаковыми функциями копируются и используются напрямую. Корень проблемы обычно заключается в спешке при разработке требований к управлению проектами. Сроки, выделяемые на этот процесс, предельно сжаты.","type":"unstyled","key":"afetu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Длительное накопление дублирующегося кода приводит к тому, что каждый последующий проект становится все сложнее обслуживать. Объем проекта с дубликатами существенно увеличивается, а читаемость ухудшается.","type":"unstyled","key":"999f5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"С другой стороны, замена одного и того же кода во многих местах при исправлении или расширении функционала — дорогое удовольствие. Большие затраты на исследования и разработку в конечном итоге еще больше затрудняют обслуживание проекта. Таким образом, дублирование кода в определенной степени влияет на общее качество проекта.","type":"unstyled","key":"2cpn9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Обнаружение повторяющегося кода — важнейший момент в системе построения качественной инженерии. Поэтому стоит поговорить том, как выявлять и устранять участки-клоны в фронтенде проекта.","type":"unstyled","key":"8mag4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Пример","type":"header-three","key":"14fdh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Для наглядности рассмотрим простейший пример. Предположим, что в проекте React есть две страницы: about page (О проекте) и home page (Главная). Обе включают компонент table с одинаковыми функциями. Код представлен ниже:","type":"unstyled","key":"elfpk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"// about page\nimport React from 'react';\nexport default () => {\n console.log('this is about page');\n return <>\n \n \n \n \n \n

Month	Savings

\n this is about page\n \n}","type":"unstyled","key":"869t0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Как видите, на странице about page есть компонент table. Он также находится и на главной странице (home page).","type":"unstyled","key":"b1pnv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"// home page\nimport React from 'react';\nexport default () => {\n console.log('this is home page');\n return <>\n \n \n \n \n \n

Month	Savings

\n this is home page\n \n}","type":"unstyled","key":"88j1t"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Как выявлять дублирующийся код","type":"header-three","key":"d34ch"},{"data":{},"depth":0,"entityRanges":[{"key":1,"length":15,"offset":156}],"inlineStyleRanges":[],"text":"Сообщество открытого ПО разработало проект с открытым исходным кодом под названием jscpd, который поддерживает возможность обнаружения дублирующегося кода. Адрес на GitHub.","type":"unstyled","key":"cq52p"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Посмотрим, как jscpd справляется с этим. Как правило, в инженерной системе серия атомарных сервисов образует целое инженерное звено обнаружения. Реализация каждого атомарного сервиса представляет собой реализацию скриптов. Это могут быть скрипты Node, Python и т. д. Вам не нужно беспокоиться о конкретной реализации технологического стека до тех пор, пока функция может быть реализована. На примере приведенных выше страниц познакомимся с двумя способами использования jscpd для обнаружения дублирующегося кода.","type":"unstyled","key":"9829p"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Первый способ — ввод команды sell непосредственно в консоль. Для этого способа необходимо установить зависимости jscpd глобально с помощью команды npm i -g jscpd. После завершения установки можно перейти к корневому пути проекта React и выполнить следующую команду:","type":"unstyled","key":"85kt9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"jscpd -p \"src/**/*.js\" -k 15 -l 5","type":"unstyled","key":"48j0e"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Вот что означают параметры выше.","type":"unstyled","key":"bn956"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"-p — регулярное сопоставление всех файлов по шаблону glob (тогда src/**/*.js — это обнаружение всех файлов с суффиксом js в каталоге src).","type":"unordered-list-item","key":"1bc0l"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"-k — минимальное количество повторений токенов в теге code (можете понимать токен как слово, здесь оно установлено на значении 15, тогда фрагмент кода будет обнаружен, только если он содержит 15 слов или более).","type":"unordered-list-item","key":"amdge"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"-l — минимальное количество строк кода, которые должны быть обнаружены (здесь установлено значение 5, то есть обнаружение будет производиться только для кода, содержащего более 5 строк).","type":"unordered-list-item","key":"dn960"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Чтобы увидеть больше параметров, выполните jscpd -h в командной строке. Результат выполнения показан на изображении ниже:","type":"unstyled","key":"fli5f"},{"data":{"image":{"id":"6324fe56b3d4c87d200cc285"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"5v8h2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Как видите, в итоге обнаружен дублирующийся код в двух файлах, в общей сложности 8 строк и 56 токенов.","type":"unstyled","key":"5loqd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Повторяющийся код может быть компонентом, функцией или классом. Существует множество ситуаций дублирования, поэтому каждый конкретный клон должен быть проанализирован соответствующим образом.","type":"unstyled","key":"1ur16"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Заключение","type":"header-three","key":"5v9cm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Обнаружение дублирующегося кода — необходимая часть качественного проектирования. Пренебрежение этой проблемой чревато снижением читабельности проекта и усложнением его обслуживания. Обобщив все вышесказанное, выделим основные моменты.","type":"unstyled","key":"2029a"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":25,"offset":0,"style":"BOLD"}],"text":"Инкапсуляция компонентов — это как раз то, что подходит для приведенного выше примера. Для подкомпонентов, использующих одни и те же функции в нескольких компонентах, следует рассмотреть возможность инкапсуляции этих самых компонентов в публичные. Тогда при использовании других компонентов можно будет напрямую обращаться к публичным. Это также сделает обслуживание более удобным. При изменении компонентов публичные могут быть изменены единообразно.","type":"unstyled","key":"f4uu9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":19,"offset":0,"style":"BOLD"}],"text":"Извлечение функций — это, говоря простым языком, извлечение одинакового модуля реализации в функцию, что удобно для повторного использования. Если речь идет об одинаковых функциях, их можно извлечь напрямую. Если две функции не одинаковы, можно отделить одинаковые части от других, извлечь одинаковые части в функцию, а различные части оставить.","type":"unstyled","key":"97tlk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":19,"offset":0,"style":"BOLD"}],"text":"Продвижение метода — еще один способ устранения дублирующегося кода. Используется в тех случаях, если есть похожие реализации в нескольких подклассах. Тогда можно продвинуть метод в родительский класс для унифицированной реализации, при которой каждый подкласс наследует данные один раз.","type":"unstyled","key":"fq7nh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Читайте также:","type":"unstyled","key":"20uci"},{"data":{},"depth":0,"entityRanges":[{"key":2,"length":48,"offset":0}],"inlineStyleRanges":[],"text":"5 советов о том, как улучшить комментарии в коде","type":"unordered-list-item","key":"9u994"},{"data":{},"depth":0,"entityRanges":[{"key":3,"length":40,"offset":0}],"inlineStyleRanges":[],"text":"Трассировка стека и более точная отладка","type":"unordered-list-item","key":"cfrn0"},{"data":{},"depth":0,"entityRanges":[{"key":4,"length":39,"offset":0}],"inlineStyleRanges":[],"text":"Плюсы и минусы парного программирования","type":"unordered-list-item","key":"fp2s"},{"data":{},"depth":0,"entityRanges":[{"key":5,"length":8,"offset":14},{"key":6,"length":2,"offset":24}],"inlineStyleRanges":[],"text":"Читайте нас в Telegram, VK","type":"unstyled","key":"a9lro"},{"data":{},"depth":0,"entityRanges":[{"key":7,"length":6,"offset":15},{"key":8,"length":42,"offset":23}],"inlineStyleRanges":[{"length":14,"offset":0,"style":"ITALIC"}],"text":"Перевод статьи omgzui: How to Detect Duplicate Code in a Project?","type":"unstyled","key":"brjg8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"marker","key":"OBOQhwhm2Z4P7q553Quw"}],"entityMap":{"0":{"data":{"url":"https://nuancesprog.ru/p/16198/"},"mutability":"MUTABLE","type":"LINK"},"1":{"data":{"href":"https://github.com/kucherenko/jscpd","url":"https://github.com/kucherenko/jscpd"},"mutability":"MUTABLE","type":"LINK"},"2":{"data":{"href":"https://nuancesprog.ru/p/16131/","url":"https://nuancesprog.ru/p/16131/"},"mutability":"MUTABLE","type":"LINK"},"3":{"data":{"href":"https://nuancesprog.ru/p/14751/","url":"https://nuancesprog.ru/p/14751/"},"mutability":"MUTABLE","type":"LINK"},"4":{"data":{"href":"https://nuancesprog.ru/p/3550/","url":"https://nuancesprog.ru/p/3550/"},"mutability":"MUTABLE","type":"LINK"},"5":{"data":{"href":"https://t.me/nuancesproghumor","url":"https://t.me/nuancesproghumor"},"mutability":"MUTABLE","type":"LINK"},"6":{"data":{"href":"https://vk.com/nuancesprog","url":"https://vk.com/nuancesprog"},"mutability":"MUTABLE","type":"LINK"},"7":{"data":{"href":"https://medium.com/@omgzui","url":"https://medium.com/@omgzui"},"mutability":"MUTABLE","type":"LINK"},"8":{"data":{"href":"https://javascript.plainenglish.io/how-to-detect-duplicate-code-in-a-project-c2a2f9bfdbe0","url":"https://javascript.plainenglish.io/how-to-detect-duplicate-code-in-a-project-c2a2f9bfdbe0"},"mutability":"MUTABLE","type":"LINK"}}},"mentions":[]}