Ответы пользователя по тегу JavaScript
  • Реальные задачи по js?

    @bromzh
    Drugs-driven development
    Например, пусть напишет библиотеку для построения диаграмм Ганта, как тут. А то в последних обновлениях из бесплатной версии выпилили много хороших штук, а вменяемых аналогов нет.
    Ну и чтобы код и вёрстка были современные, а то там всё довольно печально.
    Ответ написан
    Комментировать
  • Как добавить 0 перед месяцем и днём?

    @bromzh
    Drugs-driven development
    Самое простое - подключить moment.js, потому что стандартные средства для работы с датами фиговые.
    Или использовать что-то типа этого.
    Ответ написан
    Комментировать
  • Лучший ресурс/книга/видеоуроки для изучения AngularJS?

    @bromzh
    Drugs-driven development
    Читаешь и запоминаешь это
    Гуглишь про каждый пункт отсюда
    Попутно пишешь как можно больше приложений.
    Если думаешь, что начать писать можно только после кучи теории - так и останешься в теоретиках.
    Ответ написан
    Комментировать
  • Как модернизировать MVC при работе с AJAX?

    @bromzh
    Drugs-driven development
    Лучше разделить бэкенд и фронтенд. На бэке оставить только API, на фронте реализовать всю логику отображения данных, полученых с сервера.
    Смешивать разные языки и технологии (js + php) в 1 монолитное решение, чтобы построить что-то динамическое и MVC-подобное плохо, ибо спустя некоторое время поддерживать такого монстра может стать трудно.

    В итоге, получится своя архитектура на бэке и независимая от него архитектура на фронте. При желании, можно будет прозрачно заменить одну из частей на что-то другое (при условии, что публичное АПИ останется тем же).
    Например, к готовому АПИ написать мобильное приложение.
    Или заменить серверную реализацию, реализовав её на более шустром языке/фреймворке.
    Ответ написан
    Комментировать
  • В чем разница написания myApp.controller('ctrl', ['$scope', function ($scope) {}]) и myApp.controller('ctrl', function ($scope) {})?

    @bromzh
    Drugs-driven development
    Потому что ангуляр внедряет зависимости по именам аргументов. А некоторые минификаторы и компиляторы изменяют имена аргументов. В итоге всё ломается. Первый вариант используется, чтобы явно задать список имён зависимостей для внедрения.

    А вообще, по-нормальному используют либо такой вариант:
    angular.module('app').controller('FooController', FooController);
    
    FooController.$inject = ['$service1', '$service2'];
    function FooController($service1, $service2) {}


    Либо берут это, настраивают свой сборщик (плагинов там куча) и вставляют определённый коммент где нужно:
    angular.module('app').controller('FooController', FooController);
    
    /*@ngInject*/
    function FooController($service1, $service2) {}
    Ответ написан
    Комментировать
  • Как обновить данные в таблице после запроса $http.post в AngularJS?

    @bromzh
    Drugs-driven development
    0) Сперва почитай это
    1) Зачем 2 контроллера? Достаточно 1 контроллера с 2-мя методами в нём.
    2) $scope - зло. Используй синтаксис controllerAs
    3) После добавления элемента нужно либо возвращать с бэкенда новый список (что не по REST), либо делай запрос (естественно в цепочке промисов). Ведь если данные обновятся с 2-х источников, будет рассинхрон.
    4) Не используй $http().success, всегда используй then.
    5) <a href="{{x.url}}"> не сработает. Нужна директива ng-href.

    Ну а код будет примерно такой:
    function myService($http, $log) {
        return {
            addLink: addLink,
            getLinks: getLinks
        };
        
        function addLink(data) {
            $http.post('/api/links', data)
            .then(function (response) {
                $log.log('Success', response);
            });
        }
    
        function getLinks() {
            $http.get('/api/links')
            .then(function (response) {
                return response.data.records;
            });
        }
    }
    
    function MainController(myService) {
        var vm = this;
    
        vm.addLink = addLink;
    
        function fetch() {
            return myService.getLinks()
            .then(function (links) {
                vm.links = links;
            });
        }
    
        function addLink() {
            return myService.addLink({
                'linkname': vm.linkname, 
                'url': vm.url
            })
            .then(function () {
                vm.linkname = '';
                vm.url = '';
                return fetch();
            });
        }
    }
    
    angular.module('app', [])
        .factory('myService', myService)
        .controller('MainController, MainController');

    <div ng-controller="MainController as main">
        <form ng-submit="main.addLink()">
            Name: <input type="text" ng-model="main.linkname"><br>
            URL: <input type="text" ng-model="main.url">
        </form>
        <hr>
        <ul>
            <li ng-repeat="item in main.links">
                <a ng-href="{{ item.url }}">{{ item.linkname }}</a>
            </li>
        </ul>
    </div>
    Ответ написан
    1 комментарий
  • Как учитывать часовой пояс при работе с Moment.js?

    @bromzh
    Drugs-driven development
    Момент берёт инфу о времени и временной зоне из ОС. Если он показывает что-то неправильно, то значит у тебя неверно настроена временная зона в ОС.
    Пример: я изменил tz на парижскую (+01:00), но время выставил московское. Если запросить момента время, то он выдаст то, что установлено в системе: 2016-02-03T04:08:24+01:00. Время совпадает с московским, но неверная tz. Если же насильно установить временную зону в самом моменте, то он возьмёт системное время и tz и попытается перевести в локальное время для указанной tz. Таким образом, если установить московскую tz и снова запросить текущее время, момент выдаст 2016-02-03T06:13:17+03:00. Время сдвинулось, но tz верная.
    Так что у тебя скорее всего в системе стоит tz +04:00, вот час и теряется.

    Ну и да, время нужно хранить в UTC, а выводить на страницу в соответствии с часовым поясом пользователя. Часовой пояс можно уточнять у самого клиента.
    Узнавать сдвиг в минутах относительно UTC можно так: moment().utcOffset()
    Ответ написан
    2 комментария
  • Как пишутся Single page application из модулей?

    @bromzh
    Drugs-driven development
    Почему именно requirejs? Его использование сейчас оправдано разве что в старых проектах, для поддержки.
    Переходи на webpack, например. Он умеет в es6-модули. Пишешь весь код, используя последние фишки es2015, а в вебпаке просто добавляешь babel-загрузчик. На выходе получается es5.
    Вот пример.
    Вот ещё
    Ответ написан
    3 комментария
  • Почему angularjs уделяют так много внимания?

    @bromzh
    Drugs-driven development
    На момент его выхода он обладал рядом уникальных вещей и был (если я не ошибаюсь) почти самым первым полноценным фреймворком для создания сложных фронтенд-приложений. Это не просто набор библиотек, а логически связанная система, которая может решать свои задачи очень хорошо.
    Некоторые идеи были очень удачны (внедрение зависимостей, система модулей и их асинхронная загрузка, отказ от своего синтаксиса шаблонов в пользу обычного HTML со своими тегами и атрибутами, двунаправленная связь данных) некоторые оказались не такими хорошими (двунаправленная связь данных, магия $scope в контроллерах, отсутствие документации и др.). Но фреймворк развивается и с каждой версией становится всё удобнее.
    Но JS (вернее, ECMAScript) тоже развивается, и некоторые вещи из первого ангуляра стали дублироваться в es6. Поэтому теперь авторы взяли и сделали заново вторую версию, в которой учли все ошибки.
    Но даже в сейчас первая версия очень популярна, хотя бы по причине уже сложившейся огромной инфраструктуры.
    Ещё одной из причин популярности является тот факт, что реальных аналогов у него очень мало, практически нет. У других фреймворков/библиотек есть свои минусы, причём, на мой взгляд, они перекрывают их плюсы.
    Ответ написан
    3 комментария
  • Почему итератор цикле нужно передавать в замыкание?

    @bromzh
    Drugs-driven development
    for-, if-, switch-блоки не создают контекста.
    arr.push(() => {
            return Promise.resolve(item); // Все промисы вернут C
        });

    В функции переменная item меняется и после цикла становится равна своему конечному значению. Вот замыкание и ссылается на это значение. 775f8192fca64f7dba3d26d66086402c.png

    А если обернуть это в iife, то на каждой итерации создаётся локальный контекст, в котором создаётся замыкание, которое, в свою очередь, будет ссылаться на локальную переменную item.

    PS да, во втором примере не совсем логично сделано, лучше делать не так:
    let item;
    for (let i = 0, len = 3; i < len; i++) {
        ((item) => {
            item = arrOfItems[i];
    
            arr.push(() => {
                return Promise.resolve(item);
            });
        })(item);
    }

    а
    for (let i = 0, len = 3; i < len; i++) {
        ((idx) => { // это для наглядности, её тоже можно назвать i и тогда она "затенит" внешнюю i
            let item = arrOfItems[idx];
            arr.push(() => {
                return Promise.resolve(item);
            });
        })(i);
    }

    451fd34a43824ccb8a3c9d79f9b7e481.png

    Ну а в третьем примере используется const, а в es2015 она живёт внутри блока, так что там всё ок.

    1) Это все синхронные операции, т.е. Эвент машина JavaScript'а должна выполнить их в одной итерации, но при этом for ведет себя как асинхронная операция, т.е. сначала перебирает все варианты, а потом уже пушит их.

    нет, просто если не оборачивать в iife, то все замыкания связывается с одной и той же переменной.

    2) Какие из операций JS являются асинхронными?

    Все I/O-функции, ну и что-то ещё, типа таймаутов и др. for, if, etc - операторы, они не асинхронные по своей сути.

    3) В каких случаях нужно использовать замыкания помимо циклов?

    Для инкапсуляции, например. Вообще, замыкания так или иначе используются почти всегда.

    4) Почему если объявить переменную в цикле, она ведет себя как будто она в замыкании, ведь на самом деле итерируется не она сама, а i?

    Смотря как объявить. Если по-старинке, то область видимости у неё будет равна области видимости внешней функции. Если же let/const, то у них область видимости ограничена блоком, т.е. замыкания в цикле будут ссылаться на разные переменные.
    Ответ написан
    Комментировать
  • Как сделать, чтобы функция проверяла элементы вне ее области видимости?

    @bromzh
    Drugs-driven development
    Тут ты создаёшь функцию-конструктор:
    function Input(element) {
      this.el = document.querySelector(element);
      this.init();
    }


    А тут затираешь конструктор (в объекте-прототипе теперь нет поля constructor):
    Input.prototype = {
      init: function() { ... }
    }


    Надо его сохранять:
    Input.prototype = {
      constructor: Input,
      init: function() { ... }
    }
    Ответ написан
    Комментировать
  • Java Servlet Json трудности с приемом json объекта на веб странице?

    @bromzh
    Drugs-driven development
    response.setContentType("text/plain; charset=utf-8");

    А должен быть "application/json"
    Ответ написан
  • Проверка поля email на валидность?

    @bromzh
    Drugs-driven development
    Самый лучший способ - отправить на емейл сообщение. Если такой возможности нет - проверяй на наличие символа '@' и, по-крайней мере, 1-го символа справа и слева. Regex: /.*@.*/
    Ответ написан
    Комментировать
  • Падает запуск Grunt из Jenkins. В чем может быть причина?

    @bromzh
    Drugs-driven development
    EACCES прямо-таки намекает, что прав не хватает для создания выходного файла.
    Ответ написан
    Комментировать
  • Какой визуальный редактор кода лучше использовать?

    @bromzh
    Drugs-driven development
    Тысячи их
    Я использовал этот, этот и этот (правда тогда он был бесплатный и версии 1).
    TinyMCE имхо слишком труден в настройке. Не зря у него есть платная техподдержка.
    Ответ написан
    Комментировать
  • Как лучше организовать приложение на Angular?

    @bromzh
    Drugs-driven development
    Добавлю к советам Николай
    https://github.com/johnpapa/angular-styleguide
    Советую почитать и следовать. Лучше сразу приучиться писать хорошо, чем потом переучиваться.

    Ну и в целом, по архитектуре:
    Надо всё делать компонентно. Каждый компонент должен быть небольшим, по максимуму реюзабельным и независимым. Компоненты в ангуляре обычно реализуются через директивы. При этом, всю логику, которая не затрагивает работу с DOM (вообще, в ангуляре следует минимизировать работу с DOM как таковую) нужно выносить в контроллер директивы. При этом, этот контроллер ничем не отличается от других контроллеров, так что при случае его можно спокойно использовать в других местах.
    Контроллер при этом не должен содержать логику, всё нужно выносить в сервисы.

    Так что делай 5 директив, потом вставляй их на страницу.
    Ответ написан
    1 комментарий