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

Kate

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

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

Независимо от того, каким фреймворком вы пользуетесь, и пользуетесь ли вообще, у нас есть 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% случаев находятся в разных файлах. Что в таком случае выбирать? Я не знаю. Если бы знал наверняка, не писал бы сейчас эту статью.

 
Сверху