Олег Драпеза

Question

JavaScript
+2 ещё

Как правильно настроить сборку для тестирования кода?

4 подписчика
более трёх лет назад
347 просмотров

Answer 1 · 2017-02-09 15:00:04

Добрый день!

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

flexbox, grid layout

- это css из современных стандартов. Что бы знать, когда применять - вы должны знать версии старых браузеров, которые необходимо поддерживать на вашем проекте, и соответствующую поддержку этих стилей. Например, формировать элементы на flexbox на порядок удобнее, чем на float, но в IE9 вы уже использовать flexbox не можете.
Немного о новинках в css тут.
Поддержка браузерами тут.

gulp, webpack и пр.

- это инструменты, которые созданы для облегчения рутинных задач.
Для верстки очень удобно использовать gulp - вы описываете задачи, такие как создание локального сервера, мгновенная перезагрузка страницы при изменениях, минификация ваших файлов, и прочее.
Посмотрите отличный скринкаст от Ильи Кантора!

препроцессоры

- представьте, что вам чего-либо не хватает в html и css.
Например, вы хотите разбивать большие html файлы на множество мелких, или вам нужно вставить в html динамическое содержание - для этого созданы html шаблонизаторы. Вы используете в работе синтаксис конкретного шаблонизатора, затем тот же gulp автоматически собирает эти файлы в обычный html, который понимает браузер.
Аналогичная ситуация с css, препроцессоры позволяют разбивать файлы на мелкие, и собирать в один, доступны переменные и функции, и многое другое.
Популярный шаблонизатор Pug
Один из css-препроцессоров Stylus

пакетные менеджеры

- это удобный способ скачать конкретные библиотеки, и переносить их из проекта в проект. Статья про npm тут

Ну и конечно статьи и подкасты:
https://habrahabr.ru/
jsraccoon.ru

https://soundcloud.com/web-standards
https://radiojs.ru/

Конкретные статьи и ресурсы для новичка:

frontender.info/a-baseline-for-front-end-developers
frontender.info/a-guide-to-flexbox
css-live.ru/articles-css/pravilnye-kontrolnye-toch...
https://medium.com/russian/%D0%BE%D1%82-%D0%BD%D1%...
https://medium.com/russian/%D0%BE%D1%82-%D0%BD%D1%...
https://habrahabr.ru/company/zfort/blog/321214/
https://frontendmasters.gitbooks.io/front-end-hand...

Дерзайте!

Answer 2 · 2016-11-16 12:09:51

Добрый день!

Broadcast вызывается до успешного добавления данных, поэтому его надо перенести в then. Попробуйте так:

$scope.addDb = function (name) {
        NetFactory.addDb(name).then(
            function (data) {
                $scope.message = data;
                $rootScope.$broadcast('db:change');
            }
        );
};

Answer 3 · 2017-10-05 15:28:17

Вы можете добавлять пути как параметры при билде.

В конфиге:

const API = process.env.api;

module.exports = {
    ...,
    plugins: [
        ...,
        new webpack.DefinePlugin({
            API_URL: JSON.stringify(API)
        })
    ]
}

И глобальная переменная API_URL будет доступна в коде вашего проекта.

Условный конфиг для сборки в вашем package.json:

{
  "scripts": {
    "build": "webpack --env.api=https://api.url/v1"
  }
}

Если надо на лету добавить:
npm run build -- --env.api=https://api.url/v2

Answer 4 · 2017-03-27 18:46:48

Добрый день!

1) Для удобства оформите библиотеку как npm пакет.
И что бы этот пакет можно было использовать разными системами сборки, можно использовать формат определения модуля UMD

2) При создании экземпляра const gallery = new Gallery({}) - неплохо бы иметь доступ к управлению галереей через JS, например:

gallery.pause();
gallery.next();

Возможно вам захочется добавлять слайды на лету, это тоже отдельный метод.

3) Так же, можно добавить изменение настроек на лету, gallery.setOptions({})

В связи с этим можно сделать вывод, что нужен более объекто-ориентированный код, то есть вы создаете класс Gallery, который имеет методы для управления, сохраняет свойства себе в контекст (this), например:

var defaultOptions = {
  ...
}

privateMethod() {
  ...
}

function Gallery(options) {
  this.options = extend(defaultOptions, options);
  this.interval = this.createInterval();
  ...
}

Gallery.prototype.init = function() {
  ...
}

Gallery.prototype.next = function() {
  ...
}

Gallery.prototype.createInterval= function() {
  ...
}

function extend(a, b) {
  ...
}

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

Answer 5 · 2016-11-16 12:25:35

Добрый день!

Вкратце, как решал эту проблему:
Отдельный сервис занимается сохранением и обновлением токена, назовем его Session.
В interceptors фазе request вы все делаете верно, это добавляет токен на каждый запрос.

Переходим к фазе responseError:
1) Определяем необходимые тип ошибки
2) Можно ограничить количество повторных запросов, и редиректить на login page (тут свой нюанс, надо обнулять счетчик в фазе response - успешный ответ)
3) Отправляем запрос на обновление токена
4) При успехе, вызываем сервис $http с параметрами этого запроса

Пример кода:

responseError: function(rejection) {
  ...

  if (tokenError) {
    return Session.refreshToken().then(function() {
        return $http(rejection.config); // Повторяем запрос, когда получили новый токен
    });
  }

  return $q.reject(rejection);
}