Ответы пользователя по тегу JavaScript
  • Как быстрее/правильнее загружать данные?

    uaKorona
    @uaKorona
    Front-End разработчик
    Можно сделать подгрузку данных в фоне.
    Т.е. загружаете первый раз только то, что пользователь видит на первой странице. Показываете ему и в фоне отправляете запросы на оставшиеся данные.

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

    При этом вам нужно будет:
    1. Использовать vuex - чтобы хранить данные в стейте
    2. Писать логику поиска/сортировки/фильтрации/пагинации на фронте
    Ответ написан
    Комментировать
  • JavaScript: Архитектура приложения с нуля?

    uaKorona
    @uaKorona
    Front-End разработчик
    Есть замечательная статья на Хабре про архитектуру приложений. Пока это лучшее, что попадалось
    Создание архитектуры программы или как проектирова...

    Там есть и критерии хорошей архитектуры, и декомпозиция, и инверсия контроля и много чего другого.
    А затем вам эти подходы нужно будет применить в js.
    Ответ написан
    Комментировать
  • Полезно ли изучать React/Redux, если хочешь работать с VueJS?

    uaKorona
    @uaKorona
    Front-End разработчик
    "React навязывает хорошие практики, Vue дает слишком много свободы и новичку проще накодить с душком"


    На самом деле, на реакте/редакс можно писать так же плохо, как и на всем остальном :)
    Если вы хотите из верстальщика перейти в JS - то я бы смотрел на Vue. Вам будет проще. А параллельно будет учить сам JS, SOLID, ООП, т.е. то, что нужно разработчику вообще, как таковому, а не только JS.

    И тогда уже вам легко будет разобраться и в реакт/редакс и в любом другом фреймворке.
    Желаю успехов.

    П.С. Хорошие практики вам может привить Тим Лид, который будет ревьювить ваш код и подсказывать как лучше писать.
    Ответ написан
    1 комментарий
  • Какую лучше использовать структуру vuejs с моделями?

    uaKorona
    @uaKorona
    Front-End разработчик
    В целом, Vue по своей идеалогии близок к ООП.
    В своем проекте, я использую классы вместе с Vuex следующим образом:

    Допустим, Вам приходит с сервера массив персон. Перед тем, как положить его в стейт (Vuex), я пробегаюсь по массиву и для каждой записи создаю инстанс класса Person.
    И в тех местах, где я буду получать эти записи из стора (Vuex), я могу вызывать методы класса, тот же sayName из вашего примера.

    Для меня такой подход чище, чем в сторе Персон объявлять геттер, или выносить в миксины такую функцию и потом подмешивать в нужные компоненты.
    Ответ написан
    Комментировать
  • Какие хитрости есть при работе с большим количеством данных в js?

    uaKorona
    @uaKorona
    Front-End разработчик
    Если вы на каждую строку вешаете someClass - то имеет смысл повесить его только на родительский элемент, а для
    tr написать селектор, который будет их стилизовать
    .someClass tr { .... }
    Ответ написан
    Комментировать
  • Обьясните как работает замыкание?

    uaKorona
    @uaKorona
    Front-End разработчик
    Зачем замыкания и такая вложенность функций в данном конкретном случае ?

    function celebrityIDCreator (theCelebrities) {    
        return theCelebrities.map((celebrity, index) => {
            celebrity.id = 100 + index;
            return celebrity;
        })
    }


    не ?
    Ответ написан
    Комментировать
  • Как дождаться окончания запроса, инициированного в другом компоненте?

    uaKorona
    @uaKorona
    Front-End разработчик
    Хорошим решением может быть использование Observable - а точнее BehaviorSubject.
    Он в отличие от Observable всегда возвращает последнее сохраненное значение.

    Вы инициализируете приложение, берете код из локалСторедж и помещаете его в BehaviorSubject.
    Все остальные компоненты подписываются на него и получают последнее значение.
    Если в какой-то момент, значение изменится (незнаю, пользователь выбрал другой язык) - вы опять помещаете его в BehaviorSubject и все подписанные на него компоненты (слушатели) будут уведомлены об изменении

    // Behavior Subject
    
    // инициализируем где-то в сервисе и помещаем первое значение 
    bSubject = new BehaviorSubject("a"); 
    
    // создаем метод который будет возвращать наш инстанс bSubject 
    getSubject = () => return this.bSubject
    
    // В компененте инжектим сервис, вызываем метод getSubject и подписываемся
    bSubject.subscribe((value) => {
      console.log("Subscription got", value); 
    // Тут выполняем действия при смене языка 
    });
    
    // Позже в другом месте пользователь меняет язык и мы сохраняем его опять в поток 
    bSubject.next("c"); // Subscription got c
    Ответ написан
    Комментировать
  • Как связать выпадающие списки (selector'ы)?

    uaKorona
    @uaKorona
    Front-End разработчик
    Привет
    в первом селекторе нужно подписаться на событие выбора варианта
    onSelectFromSelectorOne(item)
    и внутри этого метода сформировать данные для второго (зависимого) селектора, на основании выбранного значения в первом
    Ответ написан
    Комментировать
  • Как дополнить условие JS?

    uaKorona
    @uaKorona
    Front-End разработчик
    Используйте логический операнд "ИЛИ"

    Если ( ( клик был не по нашему блоку и не по его дочерним элементам ) ИЛИ (клик был не по блоку, который его открывает ) ) {
    // Делаем то, что делаем
    }
    Ответ написан
    Комментировать
  • Как лучше хранить данные полученные по Ajax в Angular?

    uaKorona
    @uaKorona
    Front-End разработчик
    Если у вас есть корневой роут - можно на его уровне зарезолвить данные (список статей) - и они будут доступны на всех вложенных роутах
    Ответ написан
    Комментировать
  • Сделать валидацию как на weboffice.tinkoff.ru?

    uaKorona
    @uaKorona
    Front-End разработчик
    А что вас собственно интересует - Форма регистрации ?
    Ответ написан
    Комментировать
  • Почему не получается получить доступ к переменной окружения?

    uaKorona
    @uaKorona
    Front-End разработчик
    С webpack 2 решил вопрос так:
    С помощью DefinePlugin определил переменные в глобальной области видимости:
    const GLOBALS = {
      'process.env': {
        'NODE_ENV': JSON.stringify('development')
      },  
      API_SECRET_KEY: JSON.stringify('efb9erfdf6fd9vfd98vd8ssv'),
    };
    
    module.exports = {
      plugins: [  
          new webpack.DefinePlugin(GLOBALS)
      ],
    
     externals: {
        API_SECRET_KEY: 'API_SECRET_KEY'
       },
    }

    После этого API_SECRET_KEY стала доступна в браузере. Пока не прописал в externals - была ситуация, похожа на вашу
    Ответ написан
  • Какая разница между патернами?

    uaKorona
    @uaKorona
    Front-End разработчик
    Если вам нужен всего один и единственный App - то используйте модуль.
    А если у вас набор из разных App - то их как раз правильно будет создавать в виде экземпляров класса App.
    Вас скорее всего смутило, что и в первом и втором примере - методы описаны одинаково ) Но паттерны, как таковые овершенно разные и служат разным целям
    Ответ написан
    Комментировать
  • Подключение внешнего javascript в angular 2?

    uaKorona
    @uaKorona
    Front-End разработчик
    Если правильно понял ваш вопрос и речь идет об использовании внешних скриптов, расположенных, например, в CDN - то я подключал через $script.js - JS loader & dependency manager

    Вот пример с подключением Facebook SDK (на 2016 г. правда, может уже что-то получше придумали)

    95e480c8b5fc49a6b23c1211594e0c41.png
    Ответ написан
    Комментировать
  • Как удалять аккаунт в firebase?

    uaKorona
    @uaKorona
    Front-End разработчик
    Если просит еще раз авторизоваться, то скорее всего, ваш текущий сеанс (сессия) завершилась по таймауту.
    Я бы в запрос на удаление аккаунта, добавил обработку ошибки.
    Вы пытаетесь удалить аккаунт -> Если возвращается ошибка, что пользователь не авторизован, то -> Выполнить авторизацию и затем повторить попытку удаление аккаунта

    А еще хорошо бы прикрутить счетчик неудачных попыток - чтобы вашуу систему не зациклило. Например, если после трех попыток удалить аккаунт не получилось - то показать пользователю ошибку / отправить на логин / дургое, что вы зохотите
    Ответ написан
    Комментировать
  • Как правильно пользоваться service-worker или angular?

    uaKorona
    @uaKorona
    Front-End разработчик
    Посмотрите какой код ошибки возвращается и напишите ее обработку в интерсептере

    var interceptor = ['$rootScope', '$q', function ($rootScope, $q) {
    
            function success(response) {
                return response;
            }
    
            function error(response) {
                var status = response.status; // error code
    
                if ((status >= 400) && (status < 500)) {
                    $rootScope.broadcast("AuthError", status);
                    return;
                }
    
                if ( (status >= 500) && (status < 600) ) {
                    $rootScope.broadcast("ServerError", status);
                    return;
                }
    
                // otherwise
                return $q.reject(response);
    
            }
    
            return function (promise) {
                return promise.then(success, error);
            }
    
        }];
    Ответ написан
    Комментировать
  • Как обычно пишут приложения на react.js?

    uaKorona
    @uaKorona
    Front-End разработчик
    Можно наоборот - сделать черновой вариант, разделенный на компоненты - а потом узе дотягивать верстку
    Ответ написан
    Комментировать
  • Динамический контент из Angular + сторонние js библиотеки?

    uaKorona
    @uaKorona
    Front-End разработчик
    Правильно, вам, Сергей написал
    debug и еще раз debug - пока вы гадаете, в чем ошибка, а не точно знаете - исправить ее очень маленькие шансы, ничтожные! )
    Ответ написан
    Комментировать
  • Chrome DevTools. Значение не помещается в попап-окно. Как починить?

    uaKorona
    @uaKorona
    Front-End разработчик
    выводИте в консоль, зачем вам попап ?
    Ответ написан
  • Как реализовать ленивую загрузку компонентов в Angular 2?

    uaKorona
    @uaKorona
    Front-End разработчик
    WebPack позволяет делать подгрузку по требованию

    require.ensure(['jquery'], function(require) {
      require("jquery");
    });
    Ответ написан
    1 комментарий