<MyRusakov.ru />

Вёрстка сайта с нуля 2.0

Вёрстка сайта с нуля 2.0

Система "Вёрстка сайта с нуля 2.0" содержит в себе не только сами видеоуроки по адаптивной вёрстке сайтов с примерами, но и вспомогательную систему для более эффективного обучения.

Сам курс обучит Вас абсолютно с нуля HTML5 и CSS3, а также научит верстать сайты с помощью реальных примеров вёрстки. Обучение идёт от простого к сложному. В последнем разделе курса идёт обучение адаптивной вёрстке сайтов: Вы узнаете всю необходимую теорию, а также увидите пример реальной адаптивной вёрстки сайта.

Как итог, курс совмещает в себе всё, что нужно по HTML, CSS и адаптивной вёрстке сайтов, с наглядными примерами, с обучением от простого к сложному и без необходимости иметь начальных знаний, а благодаря вспомогательной системе психологически курс проходится очень легко, а на выходе Вы сможете сделать адаптивную вёрстку любого сайта любой сложности.

Подробнее
Подписка

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Каким движком Вы предпочитаете пользоваться?

Форум сайта MyRusakov.ru

JavaScript: стоит ли избегать стиля написания кода “функция в функции”?
22.01.2017 06:37:58 JavaScript: стоит ли избегать стиля написания кода “функция в функции”? Сообщение #1
SuperSonicFire

SuperSonicFire

Новичок

Новичок

Дата регистрации:
22.06.2016 09:29:52

Сообщений: 2

Допустим, у нас есть JavaScript приложение с большим количеством виджетов. Рассмотрим на примере шапки сайта. Функция `initHeader()` собирает все нужные для дальнейшей работы DOM-объекты внутри шапки, добавляет обработчики событий, вообщем готовит к её использованию. Соответствует ли приведённый ниже шаблон кода "правилам хорошего тона" написания кода?

function initHeader(){
// объекты виджета, с которыми будем работать в функциях
var var1 = $('#div1';
var var2 = $('#div2';
// ...

// вспомогательные функции

function function1(){
  // ...
}

function function2(){
  // ...
}

function function3(){
  // ...
}
}
Особенность этого шаблона в том, что все вспомогательные функции находятся внутри основной. Также: функцию initHeader() мы вызываем только один раз (например после HTML-кода шапки), а вспомогательные фукнции - сколько угодно раз. Пример вспомогательной фукнции - обработка поля "поиск" и кнопки рядом с ним, которые часто располагается именно в шапке. 

Зачем такая структура? Первое и самое главное: операция по выборке DOM-объектов является очень ресурсозатратной; соглано курсу React JS, Redux, ES2015 с Нуля до Гуру, библиотека jQuery делает это в порядка 10 раз медленнее нативного JavaScript. Поэтому, такие операции необходимо минимизировать. Если мы напишем все вспомогательные функции вне initHeader(), то тогда придётся либо передавать захваченные, например, фукнцией jQeury() DOM-объекты во вспомогательные функции в виде аргументов, либо захватывать их заново, чего мы и стремимся избежать. В приведённом мной шаблоне все переменные, объявленные в initHeader, будут доступны во всех внутренних функциях.

Почему же не устраивает вариант с передачей аргументов? Согласно книге Роберта Мартина "Чистый код", в идеале у функции не должно быть аргументов вообще, а если аргументы неизбежны, то должен быть один, максимум два аргумента. Но в нашем случае, внутри вспомогательных функций может быть нужно большое количество переменных: это и jQuery-объекты, какие-то константы, рабочие переменные наподобие времени анимации, какие-то введённые данные и так далее. Если написать все вспомогательные функции вне основной, то тогда придётся всё это передавать в виде аргументов, и в два аргумента уложиться едва ли получится. Такая структура, которую я показал, избавляет нас от необходимости передавать аргументы.

Приведите, пожалуйста, аргументы за и/или против такого подхода.
Профиль Ответить