Как называть функции во фронтенде

Моя цель - предложение широкого ассортимента товаров и услуг на постоянно высоком качестве обслуживания по самым выгодным ценам.

Прежде чем перейти к статье, хочу вам представить, экономическую онлайн игру Brave Knights, в которой вы можете играть и зарабатывать. Регистируйтесь, играйте и зарабатывайте!

Тут нет правильного варианта ответа, это вкусовщина. Единственная цель этой статьи – узнать ваше мнение по этому вопросу и окончательно сформировать своё, потому что сейчас я в сомнениях.

Не знаю, какие там проблемы в других сферах программирования, мой вопрос касается фронтенда.

Независимо от того, каким фреймворком вы пользуетесь, и пользуетесь ли вообще, у нас есть HTML-шаблон и JavaScript-код. Код частично залезает в шаблон, и тут и появляется наша проблема. От чего отталкиваться при названии функций?

Есть два варианта. Первый – от шаблона к коду:

<button onclick="addItem()">Click</button>
function addItem() { // ... }

Мы называем функции по тому, что они делают. Я открываю файл, вижу кнопку, смотрю на её действие и сразу понимаю, что она делает. Удобно. С одной стороны. С другой стороны, если мы с начала читаем код, мы видим какую-то функцию addItem. И мы не знаем, где она используется. Чтобы узнать это, надо открыть HTML и найти её там.

Второй вариант – от кода к шаблону:

function handleButtonClick() { // ... }
<button onclick="handleButtonClick()">Click</button>

Теперь, когда я читаю код, я знаю, что эта функция срабатывает при нажатии на кнопку. Но при этом, читая HTML, я понятия не имею, что будет при нажатии кнопки. Мне нужно лезть код и смотреть, что эта кнопка делает.

Какой вариант вы считаете предпочтительнее? Если вы выбрали один, это потому что вы сами пришли к такому мнению или просто конформистски подчинились общепринятому наименованию среди пользователей вашего фреймворка?

По моему мнению, для некоторых фреймворков выбор проще. В React шаблон обычно идет в конце файла, там, где return. Поэтому чаще вы будете сначала читать код, затем шаблон. Неудивительно, что именно реактоведы ввели в употребление второй способ наименования.

Во Vue.js наоборот. Сначала шаблон, потом код. Имхо, в таком случае, лучше выбрать первый вариант.

Но, главная проблема – это то, что я сейчас работаю исключительно с Angular​. И там шаблон и код в 99% случаев находятся в разных файлах. Что в таком случае выбирать? Я не знаю. Если бы знал наверняка, не писал бы сейчас эту статью.

Жду советов.

Только зарегистрированные пользователи могут участвовать в опросе. Войдите, пожалуйста.
Какой вариант выбрать?
55.56% Всегда «от шаблона к коду» (1-й вариант) 10
5.56% Всегда «от кода к шаблону» (2-й вариант) 1
0% Зависит от фреймворка, в Angular – 1-й вариант 0
0% Зависит от фреймворка, в Angular – 2-й вариант 0
38.89% Я без понятия 7
Проголосовали 18 пользователей. Воздержались 2 пользователя.
Источник: https://habr.com/ru/post/570960/


Интересные статьи

Интересные статьи

Функции provide и inject во Vue 3 как по мне предлагают интересный подход к реализации паттерна Dependency Injection, однако принцип их работы недостаточно хорошо описан ...
Нередко при работе с Bitrix24 REST API возникает необходимость быстро получить содержимое определенных полей всех элементов какого-то списка (например, лидов). Традиционн...
Существует множество руководств, в которых рассматриваются общие вопросы работы с CSS Grid, с механизмом, позволяющим создавать сеточные макеты. Я и сам немало об этом писал. Но я обратил...
Бизнес-смыслы появились в Битриксе в начале 2016 года, но мало кто понимает, как их правильно использовать для удобной настройки интернет-магазинов.
«Функции высшего порядка» — это одна из тех фраз, которыми часто разбрасываются. Но редко кто может остановиться и объяснить, что это такое. Возможно, вы уже знаете, что называют функциями высш...