Ответы пользователя по тегу JavaScript
  • Что лучше выбрать для решения конкретной задачи, php или js?

    Fesor
    @Fesor
    Full-stack developer (Symfony, Angular)
    Задача - надо сделать компонент для Битрикса

    Итак, от php мы избавиться уже не можем
    так как страница календаря статичная

    Делаем выводы. Возможно вам захочется потом приделать какую-то динамику (листалку) и т.д. Мало ли.
    Ответ написан
    Комментировать
  • В чем моя причина провала тестового задания Яндекса?

    Fesor
    @Fesor
    Full-stack developer (Symfony, Angular)
    Ну давайте я покритикую:

    возьмем файлик

    1) вы не разобрались как объявлять методы у прототипов с новой нотацией `class`:

    class Travelsort {
        constructor() {}
        sortTickets(tickets) {}
    }


    2) вы не умеете пользоваться исключениями.
    if (!Array.isArray(cards)) {
        throw new ValueError('Wrong input');
    }


    3) использование let там где должен использоваться const

    4) в принципе использование переменных там где их быть не должно

    5) вы зачем-то реализовали свою функцию сортировки, я не увидел в требованиях отсутствия возможности использовать старый добрый Array.prototype.sort

    6) Общие замечания по кодинг стайлу. snake_case там где должен быть camelCase, пишите с большой буквы то что должно быть с маленькой и т.д.

    7) нарушения принципа единой ответственности. У вас объеткт умеет и сортировать и писать куда-то. Это категорически плохо.

    8) Если исправить 7-ой пункт то наш класс превращается просто в функцию.

    Далее... берем следующий файлик

    1) если вы пишите комментарии к таким маленьким кускам кода - стало быть у вас хромает именование вещей. Все должн быть понятно просто из названий методов/функций/переменных. При работе в команде над серьезными проектами это немаловажно, ибо код чаще читают чем пишут и экономить нужно именно это время.

    2) вы зачем-то тут в прототип объекта строки впихиваете функции для парсинга CSS. Таким образом мы нарушаем принцип единой ответственности. Да и в целом расширять без надобности прототипы объектов как-то не ок.

    Чуть дальше проскролил - вы пытаетесь расширить прототип строк для того что бы добиться API jquery? ух, батенька.

    3) очень много дублирования.

    4) очень плохо с protected variations.

    Справедливости ради, ваш код входит в категорию ">50% JS кода", так что не расстраивайтесь. Просто для работы в яндексе нужен чуть более высокий уровень и понимание вещей.
    Ответ написан
    17 комментариев
  • Как новичку влиться в мир современного фронт-енда?

    Fesor
    @Fesor
    Full-stack developer (Symfony, Angular)
    с мнениями, что знания ангуляр1 "вредны".


    тут проблема в том, что если мы берем среднестатистического ангулярщика, он пишет в стиле angular1.0, во всю использует скоупы в контроллере и т.д. Причина этому - отсутствие обновления документации к ангуляру. Ну то есть в пул реквестах на гитхабе валяются исправленные доки но они почему-то до сих пор там висят не принятыми по каким-то странным причинам.

    Например вот то как я готовлю ангуляр, а вот как другие. Последнее считается вредным. Скажем если вы используете $scope в ангуляр приложении версии 1.5+ то вы уже готовите ангуляр не правильно. Если у вас бизнес логика вытекает в компоненты - тоже что-то странное и тд. Но последнее уже никак к ангуляру не привязано.

    Стоит ли тратить время дальше на jQuery?

    Учите javascript. и так и так понадобится. Причем серьезно учите. И не только основы, надо еще общие вещи, не привязанные к js знать. Типа ооп, функциональное программирование, принципы solid, grasp, dry и другие аббривиатуры. Короче именно серьезно так подойти к этим вопросам. Паралельно разобраться с HTTP, уметь не только пользоваться API но и проектировать их и т.д. Короче это огромный пласт знаний который формируется не один год.

    Стоит ли тратить время сейчас на Backbone?

    Нет, не стоит. Backbone это низкоуровневая библиотека для тех кто знает как все делать. Человеку который не отличает MVC от MVVM оно только навредит (у меня есть парочка проектов доставшихся от других разработчиков которые демонстрируют проблему).

    На сколько экосистема ReactJS стремительно изменяющаяся по сравнению с angular1-> angular2 ?


    С учетом того что с моммента выхода angular 1.x до момента выхода angular2 (а он еще в бэте) прошло 4 года... мегабыстро.

    Всё упирается в то, что времени/сил после работы на учебу не много остается и не хочется тратить их на то, что в последствии окажется "вредным".


    Просто учить нужно не фреймворк, а принципы на которых все это основано. Понимать идею. И тогда ничего не будет вредно. Большинство же разработчиков втупую копипастит код и радуется этому.
    Ответ написан
    1 комментарий
  • Как правильно спроектировать классы?

    Fesor
    @Fesor
    Full-stack developer (Symfony, Angular)
    Это называется двусторонней many-to-one связью, и как правила вам стоит избегать оных если вот без них совсем неудобно. Скажем сотруднику совсем не обязательно знать о том что он принадлежит какой-то компании. А потому от свойства company мы можем легко и просто отказаться, если конечно у нас нет какой-то специфичной логики.

    class Employe {
        constructor(firstName) {
            this.firtsName = firstName;
        }
    }
    
    class Company {
        constructor(name, employes){
            this.name = name;
            this.employes = employes;     
        }
    
        rename(name) {
           this.name = name;
        }
    
        addEmploye(employe) {
             this.eployes.push(employe);
        }
    }
    Ответ написан
  • Как в React.js обновить компонент из вне? Или как связать React компоненты и Angular директивы?

    Fesor
    @Fesor
    Full-stack developer (Symfony, Angular)
    this.watchCollection


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

    Код React компонента:


    А вот код ангуляр компонента:

    class IstManagerListRowComponent {
        
    }
    export default {
        controller: IstManagerListRowComponent,
        bindings: {
             'uid': '='
        },
        template: `
            <div className="table-row">$ctrl.uid </div>
        `
    }


    а вместо ватчеров:

    class IstManagerListRowComponent {
        set uid(value) {
           this._uid = value;
           // do something
        }
    }


    Я сильно сомневаюсь что такое использование реакта вам хоть чем-то поможет. Если бы вы не внутри отдельных директив это делали, на например... сделали бы все компоненты на реакте. а состояние, роутинг и т.д. разруливали ангуляром - тогда да, профит был бы. А так - никакого профита, просто помимо накладных расходов на дерти чекинг ангуляра у вас добавляется накладные расходы на дерти чекинг реакта (между vDom и dom).
    Ответ написан
    Комментировать
  • Хорошая имплементация ListViewModel?

    Fesor
    @Fesor
    Full-stack developer (Symfony, Angular)
    on-demand подразумевает загрузку данных чанками, скажем по 1000 штук.

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

    Тут намного интереснее реализация виртуального скрола. Рекомендую вам искать готовые ибо самостоятельно у вас написать оный хоть и выйдет - вы убъете на это безумное количество времени.
    Ответ написан
  • Как правильно передать token csrf?

    Fesor
    @Fesor
    Full-stack developer (Symfony, Angular)
    токен должен выдаваться сервером.
    Ответ написан
  • Как сделать директиву с динамическим шаблоном?

    Fesor
    @Fesor
    Full-stack developer (Symfony, Angular)
    Я новичок в деле Angular.js и пока только разбираюсь с ним.


    Если вам надо содержимое блока заменять, то лучше делать вообще через transclude. А если просто что бы работало:

    вместо $attrs используйте скоуп

    scope: {
            content: '@uiTooltip'  
        },


    p.s. лучше возьмите готовую реализацию
    Ответ написан
    1 комментарий
  • Как скопировать элемент по клику на Angular?

    Fesor
    @Fesor
    Full-stack developer (Symfony, Angular)
    1) по ngClick вызываем какой-то метод контроллера
    2) в методе контроллера меняем состояние (айтем из одного массива перекидываем в другой или копируем или что вам там надо сделать).
    3) вьюшка волшебным образом перестраивается сама по изменению состояния данных, слава декларативности!

    Короч суть в том, что в ангуляре вы должны мыслить данными и управлением состоянием вашего приложения. А "элементы" - вы просто в шаблонах декларативно опиываете как должен реагировать UI на изменения. Например ngRepeat описывает как выводить айтем коллекции, это не тоже самое что цикл.
    Ответ написан
    1 комментарий
  • Почему в JS имено так?

    Fesor
    @Fesor
    Full-stack developer (Symfony, Angular)
    потому что в первом случае вы оперируете цифрами 2, 3, 4, 5 и 6 (в итоге будет 20), а во втором 0, 1, 2, 3 и 4 (счетчик i, сумма равна 10).
    Ответ написан
    Комментировать
  • Правильно ли написана функция?

    Fesor
    @Fesor
    Full-stack developer (Symfony, Angular)
    В дополнение к MaxKorz

    - устраните дублирование
    - то что вы там делаете в windoe resize - это лучше делать через CSS. А если так - то никакого хардкода значений в пикселях в JS уже не будет.
    - не стоит завязываться на стили (float), разруливайте все модификаторами (судя по селекторам у вас там БЭМ)

    Словом выносите почти все в CSS. Анимации все, стили и т.д. В итоге у вас останутся только классы.
    Ответ написан
    3 комментария
  • Как правильно организовать процесс написания и тестирования клиентского JavaScript-кода?

    Fesor
    @Fesor
    Full-stack developer (Symfony, Angular)
    Нормальна ли схема с единой точкой входа

    В принципе нормально, все так и делают вобщем то.

    ведь, если количество модулей перевалит за 10

    Всегда можно вынести что-то в отдельный модуль. Руководствуйтесь здравым смыслом, снижайте связанность (вообще почитайте про low coupling и high cohesion для более адекватной организации модулей).

    вешать события на элементы


    А ваши модули с табами и т.д. что делают тогда?

    Или стоит создать отдельную страницу, на которой будут запускаться тесты mocha на основе уже собранного JS проекта?


    Это наиболее удобный вариант. Так же помимо фэнтома рассмотрите вариант с webdriver io, как самый честный вариант тестирования. Медленно... но чтож поделать если вы решили UI тестить (а точнее UI элементы).

    Пока я вижу следующую схему: mocha + jsdom


    Это подходит для своего рода быстрых смоук тестов. К сожалению jsdom только имитирует поведение реальных браузеров, так что лучше тестировать сразу в них. Оно внезапно может различаться.

    если моя функция не предназначена для работы с DOM — я должен снова вернуться к unit-тестам.


    Именно так. Если вам не нужен DOM - старые добные юнит тесты.

    Имеет ли вообще смысл тестировать, скажем так, такой примитивный код?

    Имеет смысл тестировать все, что может сломаться. Все что мутирует состояние, все что содержит какую-то логику. Тестировать нет смысла тупой код, который всего-лишь делигирует ответственность. Ну то есть просто проксирует вызовы например. И если там внутри нет никаких ифов и это не декораторы/адаптеры - то тестировать уже не обязательно. Но все это - здравый смысл. В целом же вы должны покрывать тестами вообще все. Потому что вы может и не сломаете - а кто-то запросто.

    Возможно у кого-то завалялся репозиторий с похожим кейсом?

    Рекомендую вам просто отказаться от прямой работы с DOM. Мне дико нравится подход ангуляра к построению приложений. В нем мы тестируем 10% директив, которым приходится работать с DOM, а все остальное - просто подготовка состояния. Далее в дело вступают биндинги, которые и так оттестированы, и декларативное представление, которое по природе своей тестировать смысла нет.
    Ответ написан
    1 комментарий
  • Как запустить две фунции js одновременно?

    Fesor
    @Fesor
    Full-stack developer (Symfony, Angular)
    две функции js работали одновременно.


    Это невозможно. В JS все работает исключительно последовательно. "одновременность работы" достигается за счет использования event loop.

    Проблема в следующем, есть форма поиска, которая увеличивается при наведение мыши или когда набираешь что то в поиске. Но нужна и обратная функция когда ты перестаешь набирать или когда ты отводишь мышь


    Ну так сделайте два обработчика событий, они будут работать независимо друг от друга когда можно будет. Ну то есть если вы в одном обработчике влепите бесконечный цикл - то конечно второй обработчик так вызван и не будет. Но если там маленькие кусочки работы либо через setTimeout либо сетевые запросы - то все будет хорошо.
    Ответ написан
    Комментировать
  • TDD/BDD в чем разница и для каких видов модулей стоит использовать?

    Fesor
    @Fesor
    Full-stack developer (Symfony, Angular)
    TDD

    - пишем тесты - маленький кусочек, то что можно минут за 10 написать. На этом этапе мы формулируем что мы хотим написать.
    - пишем код - пишем код, который делает тесты "зелеными". то есть все работает. Мы делаем это максимально быстро, самым тупым способом, который просто быстрее всего сделать.
    - рефакторинг - после того как все работает, или еще через пару итераций, что бы набралось чуть больше "грязи", чистим код поочередно. Важно при рефакторинге чистить что-то одно. Либо код, либо тесты (да да, их тоже надо рефакторить иногда устраняя дублирование). Поправили код - прогнали тесты, все хорошо? тогда можно тесты подправить. Ну и т.д.

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

    TDD - для одного разработчика, BDD - для команды. А BDD-style assertions для chai - это пафос. По сути это "планирование фич" в рамках библиотек и отдельных объектов. Чуть меньший масштаб. Но ничем от TDD вообще не отличается, хотя если сильно постараться можно так же оценивать ценность фич для пользователей нашей библиотеки и т.д.

    Как никак в BDD основная мысль - фичаспеки должен иметь возможность читать продукт оунер или стэкхолдеры, то есть те кому проект собственно нужен, что бы говорить должно работать так или нет. В случае с библиотеками... ну вы пишите что-то для девелоперов, а они в состоянии читать тесты как фичаспеку. И в принципе от предметной области недалеко.
    Ответ написан
    1 комментарий
  • Как синхронизировать асинхронные запросы в jquery?

    Fesor
    @Fesor
    Full-stack developer (Symfony, Angular)
    Комментировать
  • Изоморфный код. Всё ли я правильно делаю?

    Fesor
    @Fesor
    Full-stack developer (Symfony, Angular)
    никаких window и глобальных объектов, и все будет хорошо. Используйте модули (es2015, commonjs или amd на худой конец).
    Ответ написан
  • Какие JS библиотеки вы посоветовали бы изучить?

    Fesor
    @Fesor
    Full-stack developer (Symfony, Angular)
    те, которые вам нужны. Просто так "учить" библиотеки - глупо. Лучше поучите javascript (es2015/2016), прошарьтесь в написании тестов, tdd, bdd, solid, grasp, separation of concerns, dry, kiss, yagni.
    Ответ написан
    Комментировать
  • Можно ли использовать инкапсуляцию компонентов в Vue.js?

    Fesor
    @Fesor
    Full-stack developer (Symfony, Angular)
    спускайте данные сверху, а не запрашивайте их внутри компонентов, и жизнь станет лучше.
    Ответ написан