Ответы пользователя по тегу JavaScript
  • Chrome devtools. Была возможность запустить отладчик с точки входа в функцию. Не могу найти или отключено?

    AlexXYZ
    @AlexXYZ Автор вопроса
    O Keep Clear O
    Нашёл в чём прикол:
    Эта особенность не работает, если я правлю код, который не загружен как .js, а внедрён на страницу .html. Если файл с кодом в отдельном .js-файле, то можно вносить изменения на лету и отладчик отматывается назад.

    c827c2dd8b114922927c8d727b96a502.gif

    Настроение улучшилось!
    Ответ написан
    1 комментарий
  • Пропадают свойства объекта, как такое возможно?

    AlexXYZ
    @AlexXYZ
    O Keep Clear O
    А если наоборот сделать вывод?
    rxSubject.subscribe({
                next: (state) => {
                    console.log(JSON.stringify(state));
                    console.log(state);
                },
            });
    Ответ написан
  • Можно ли уведомить пользователя об ошибках в загрузке частей страницы?

    AlexXYZ
    @AlexXYZ Автор вопроса
    O Keep Clear O
    Решение не совсем простое. Но меня утраивает. Надеюсь, что может помочь и кому-то ещё.

    <script type="text/javascript">
        // http://javascript.ru/blog/ilya-kantor/zagruzka-dannyh-cherez-script-s-otlovom-oshibok
        // https://learn.javascript.ru/onload-onerror
    
        // Ловим ошибки загрузки ресурсов:
        // Массив в который будут записываться результаты:
        var arr_loaded_resources = [];
    
        // Ловит ошибки и выводит их в приложение:
        function func_error_out(err){
            if( err!=null){
                console.warn( JSON.stringify(err));
                arr_loaded_resources.push( err );
    
                var app = document.getElementById("id_slip_application");
                var arr_error = [];
                for( var i=0; i<=arr_loaded_resources.length-1; i++){
                    arr_loaded_resources_i = arr_loaded_resources[i];
                    if( arr_loaded_resources_i.error==true ){
                        arr_error.push( JSON.stringify( arr_loaded_resources_i ) );
                    }
                }
                app.innerHTML = "<br/><br/><a href='javascript:location.reload(true);'>Перезагрузите</a> страницу."
                    + "<hr/><br/>Ошибка загрузки компонентов приложения: <br/><br/>"
                    + arr_error.join("<br/>")
                    ;
            }
        }
    
        var func_onload = function(obj) {
            //var obj = this;
            var err = null;
            if( obj.src ) {
                err = {"path": obj.src, "error": false};
            } else if( obj.href ) {
                err = {"path": obj.href, "error": false};
            }
            if( err!=null){
                console.warn( JSON.stringify(err));
                arr_loaded_resources.push( err );
            }
        };
    
        var func_onerror = function(obj) {
            //var obj = this;
            var err = null;
            if( obj.src ) {
                err = {"path": obj.src, "error": true};
            } else if( obj.href ) {
                err = {"path": obj.href, "error": true};
            }
            func_error_out(err);
        };
    
        // Проверка для IE, но для новых версий, кажется, не актуально. Пока не использую.
        var func_onreadystatechange = function() {
            var self = this;
            if (this.readyState == "complete" || this.readyState == "loaded") {
                setTimeout(function() {
                    self.onload()
                }, 0); // сохранить "this" для onload
            }
        };
    
        // Общий обработчик ошибок для скриптов:
        //      https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onerror
        window.onerror = function(messageOrEvent, source, lineno, colno, error){
            var err = null;
            // Такая ошибка иногда возникает в протоколе ssl, когда загружается только часть файла. Остальное обрезается и браузер генерирует синтаксическую ошибку.
            //if( error.stack=="SyntaxError: Unexpected end of input"){
                err = {messageOrEvent: messageOrEvent, source: source, lineno:lineno, colno:colno, _error:error, "error": true};
                console.warn("Ошибка в загрузке...")
            //}
            func_error_out(err);
        }
    </script>
    
    <script type="text/javascript" onload="func_onload(this)" onerror="func_onerror(this)" src="/jquery-1.9.1.min.js" onload="func_onload(this)" onerror="func_onerror(this)"></script>
    <!--
    <script type="text/javascript" onload="func_onload(this)" onerror="func_onerror(this)" src="js/err.js" onload="func_onload(this)" onerror="func_onerror(this)"></script>
    <script type="text/javascript" onload="func_onload(this)" onerror="func_onerror(this)" src="/jquery-1.9.1.err.min.js" onload="func_onload(this)" onerror="func_onerror(this)"></script>
    <script type="text/javascript" src="js/jquery-ui-1.10.2.custom.min.js"></script>
    <link type="text/css" rel="stylesheet" href="css/MonthPicker.min.css"/>
    <link type="text/css" rel="stylesheet" href="css/themes/smoothness/jquery-ui.css"/>
    <link type="text/css" rel="stylesheet" href="css/app.css"/>
    <script type="text/javascript" src="js/MonthPicker.min.js"></script>
    -->
    
    <script type="text/javascript" onload="func_onload(this)" onerror="func_onerror(this)" src="bower_components/jquery-ui/jquery-ui.min.js"></script>
    <script type="text/javascript" onload="func_onload(this)" onerror="func_onerror(this)" src="bower_components/jquery-ui-month-picker/src/MonthPicker.js"></script>
    <script type="text/javascript" onload="func_onload(this)" onerror="func_onerror(this)" src="bower_components/blockUI/jquery.blockUI.js"></script>
    <script type="text/javascript" onload="func_onload(this)" onerror="func_onerror(this)" src="bower_components/js-cookie/src/js.cookie.js"></script>
    
    <link type="text/css" rel="stylesheet" onload="func_onload(this)" onerror="func_onerror(this)" href="bower_components/jquery-ui-month-picker/src/MonthPicker.css"/>
    <link type="text/css" rel="stylesheet" onload="func_onload(this)" onerror="func_onerror(this)" href="bower_components/jquery-ui/themes/smoothness/jquery-ui.css"/>
    <link type="text/css" rel="stylesheet" onload="func_onload(this)" onerror="func_onerror(this)" href="bower_components/bootstrap/dist/css/bootstrap.css"/>
    <link type="text/css" rel="stylesheet" onload="func_onload(this)" onerror="func_onerror(this)" href="bower_components/awesome-bootstrap-checkbox/awesome-bootstrap-checkbox.css"/>
    <link type="text/css" rel="stylesheet" onload="func_onload(this)" onerror="func_onerror(this)" href="bower_components/font-awesome/css/font-awesome.min.css">
    <link type="text/css" rel="stylesheet" onload="func_onload(this)" onerror="func_onerror(this)" href="css/app.css"/>


    Суть в следующем. В каждый компонент, который подгружается на страницу добавляем следующий код:
    onload="func_onload(this)" onerror="func_onerror(this)"

    Теперь все объекты прикрыты обработчиками ошибок при загрузке. В случае, если ресурс не загрузился, то пользователь увидит сообщение:

    665d3d7230664057899a45fac7493bf2.png

    На рисунке видно, что во время загрузки не произошла загрузка angular.js, поэтому пользователю предлагается перезагрузить страницу. Аналогичные сообщения наблюдаются при невозможности загрузки css или когда файл js содержит синтаксические ошибки:

    Синтаксическая ошибка:

    add74ff6b37f4d4a8015be22f09a73ca.png


    Ошибка загрузки css:

    6183a3476f9c4e6fa8993c879327b3c7.png


    P.S.
    Для справки. Аналогичные обработчики можно сделать и для загрузки изображений. см.: https://learn.javascript.ru/onload-onerror
    Ответ написан
    Комментировать
  • Где можно найти разбор реальных проектов по языкам JavaScript/PHP,чтобы попрактиковаться в них?

    AlexXYZ
    @AlexXYZ
    O Keep Clear O
    Это вряд ли вам кто-то расскажет подробно. Одно могу сказать. Всё состоит из мелочей и каждую мелочь "что, зачем,почему" никто долго объяснять не будет. Нет одной технологии, которая может всё. Конечный продукт получается суммой технологий, но сколько от конкретной технологии вы возьмёте зависит только от вас.
    Да вот ещё. Все пишут примеры, как "правильно" делать, но никто не даст вам объяснения как не делать неправильно. Тут придётся самому поработать. И набивание шишек - обязательная составляющая ремесла. Поиск решения - итерационный процесс, требующий рефлексии и сосредоточенности.
    Ответ написан
    Комментировать
  • Как реализовать подсвечивания отдельных частей карты\схемы при наведении на список?

    AlexXYZ
    @AlexXYZ
    O Keep Clear O
    >> решение, которое поможет избежать как раз хардкодинга
    Координаты многоугольника, описывающего помещения, как вы думаете занести без хардкодинга ?
    Могу посоветовать воспользоваться leaflet-ом. Вот пример с подложкой-картинкой: leafletjs.com/examples/crs-simple/crs-simple.html. Поищите ещё примеров, есть очень интересные плагины для leaflet-а.
    Ответ написан
    Комментировать
  • Как найти утечку памяти в JS коде?

    AlexXYZ
    @AlexXYZ
    O Keep Clear O
    Мне кажется, что вашу проблему может помочь найти chrome profiling:

    https://developer.chrome.com/devtools/docs/heap-pr...

    Ооочень полезнная штука. Поможет увидеть работу с памятью JS изнутри. Например, если вы создаёте одну большую строку из нескольких маленьких, например, var str = "a"+"b"+"c"+"d"; то будете удивлены, что в памяти появились строки "ab", "abc" и "abcd", хотя вы первые две не заказывали. При том, что присваивание работает только для последнего результата.
    Ответ написан
    2 комментария
  • Есть ли рабочие js-библиотеки для mapdrag div-элемента?

    AlexXYZ
    @AlexXYZ
    O Keep Clear O
    Вот пример на leaflet:
    leafletjs.com/examples/crs-simple/crs-simple.html

    ==================================================
    1429d0ccf41c4f10b3057eb363516c2d.gif
    ==================================================
    Общий каталог примеров: leafletjs.com/examples.html

    Но если вы на нём ещё не работали, то потребуется немного времени. )))

    Штука классная!
    Ответ написан
  • С помощью чего отобразить на странице данные из json?

    AlexXYZ
    @AlexXYZ
    O Keep Clear O
    Гляньте на: https://highlightjs.org/
    Вот пример с json: https://highlightjs.org/static/demo/

    603567891d9a4c2c8d5f6d69c6398a0d.png
    Ответ написан
    Комментировать
  • Почему ответ от сервера приходит 3 раза?

    AlexXYZ
    @AlexXYZ
    O Keep Clear O
    Потому что где-то в коде вы его три раза запрашиваете. Смотрите не только консоль браузера, но и закладку сетевых соединений. А ещё лучше поставьте fiddler и посмотрите им.
    Ответ написан
  • Как можно получить последовательность стандартных функций, которые вызываются в скрипте?

    AlexXYZ
    @AlexXYZ
    O Keep Clear O
    Есть такая тема, Chrome Profiles:
    3bb00706712d41ab9e91dc12d2adbb92.png
    Не совсем точно подходит под ваш запрос, но кое что вытянуть из него можно. Поищите в инете есть туториалы, чтобы начать работать с этим очень полезным инструментом.
    Ответ написан
    Комментировать
  • Как на angular 2 создать приложение для windows десктоп?

    AlexXYZ
    @AlexXYZ
    O Keep Clear O
    Есть вариант для windows делать не .exe, а просто html. Называется HTA. Тоже, что и html, только в контексте безопасности локальной машины. Работает только под IE, но зато не надо встраивать браузер. Делаете всё как для обычного сайта, только расширение исходного файла делаете не *.htm/html, а *.hta. Если у вас есть уже готовая страница html с angular - попробуйте.
    Ответ написан
    Комментировать
  • Можно ли восстановить document.domain?

    AlexXYZ
    @AlexXYZ
    O Keep Clear O
    Если вы разработчик этих доменов, то вы можете отменить CORS для них. Например, как это делается на php:

    https://ru.wikipedia.org/wiki/Cross-origin_resourc...

    <?php
        header("Access-Control-Allow-Origin: http://example.com");
    ?>


    т.е. суть просто в заголовке. Не браузер запрещает кросс-доменные запросы, а сервер может не разрешать делать запросы к себе от другого домена и по-умолчанию домены не выставляют этот параметр. Но если домены ваши, то вы можете выставить им взаимные разрешения читать друг у друга.
    Ответ написан
  • JS Как оптимизировать поиск объекта в массиве?

    AlexXYZ
    @AlexXYZ
    O Keep Clear O
    Внесу свои пять копеек, вдруг пригодиться: https://github.com/jayway/JsonPath
    Типа xPath, только для json.
    Ответ написан
    Комментировать
  • Как в JavaScript дотянуться до переменной?

    AlexXYZ
    @AlexXYZ
    O Keep Clear O
    В принципе можно. Вот так, например:

    var get_myvar;
    var set_myvar;
    window.map.on('draw:created', function (e) {
        var type = e.layerType,
            layer = e.layer;
    
        if (type === 'marker') {
            // Do marker specific actions
        }
    
         var myvar = "foo"; // вот переменная
         get_myvar = function(){
             return myvar;
         }
         set_myvar = function(val){
             myvar = val;
         }
    });
    console.log( "myvar="+ get_myvar() );
    set_myvar("new_value");
    console.log( "myvar="+ get_myvar() );
    Ответ написан
    Комментировать
  • Можно ли попросить Вас о code review?

    AlexXYZ
    @AlexXYZ
    O Keep Clear O
    По мне так очень даже прилично написано, а у всех остальных свой опыт разработки. Лично мне не трудно было читать. Для удобства добавьте несколько скринов, чтобы было понятно о чём речь.
    Ответ написан
  • Перебор древовидного объекта?

    AlexXYZ
    @AlexXYZ
    O Keep Clear O
    Честно говоря меня напрягают следующие вещи в вашем коде:

    1. options = options[ obj ]; // <--- WTF??? Это что за извращённый способ рекурсии?

    2. Цикл for ( var obj in options ) { без проверки владения:
    if( options.hasOwnProperty( obj ) ){
    ... бизнес-логика ...
    }

    3. Самое главное. КАК ПРОИЗВОДИТСЯ РЕКУРСИЯ??? (Видимо ошибка из п.1). Нигде внутри parse_args не производится вызов её самой!
    Конец бородатого анекдота: "Думай, Петька, думай"!
    Ответ написан
  • Bower обновляет не все файлы какие есть в репозитории?

    AlexXYZ
    @AlexXYZ Автор вопроса
    O Keep Clear O
    Детально изучил вопрос.
    Эта проблема касается только конкретно репозитория https://github.com/inuyaksa/jquery.nicescroll

    a2411bee859442a59668b378184ee3d2.png

    Загружаю его и вижу в каталоге, что этого же файла не достаёт:
    99d818711f0940d6adf7e8a481322507.png

    ОООчень странно. Больше всего вводит в заблуждение то, что везде понаставлены номера версии 3.6.8:
    089a255825354b61b7feba6c061188a8.png

    Исследуем репозиторий на наличие тегов и имён веток и тут-то находим кое-что "неправильное":
    a9f6b160646f4d638c2806aed34f584b.png
    а ведь именно ветку 3.6.8 с отсутствующим файлом и грузит bower!!! И делает он свою работу правильно. Т.е. не распознав тег v3.6.8-fix как версию большую, чем 3.6.8, то и использует ветку с тегом 3.6.8, где файла нет.

    Теперь проведём "эксперимент" и попросим не версию 3.6.8, а v3.6.8-fix:
    b5628c3134cd4a4c8764c4bbbcd22b2d.png

    Теперь поправим файл bower.json:
    bf74341134ee4526ae0709b351b42d0d.png

    И проверим результат:
    31f0e836e89d4665baf28d313e7b43b0.png

    Остался открытым вопрос - а как же быть со знаками >= в настройках bower.json? А никак. Надо будет помнить про это и как только автор плагина исправит теги, то можно будет снова работать с версиями.
    Ответ написан
    Комментировать
  • Работа с изображением в php и js, как передать изображение от сервера без "браузерного" скачивания?

    AlexXYZ
    @AlexXYZ
    O Keep Clear O
    Если вы имеете в виду вставку исходного бинарного представления картинки в html, то есть такая тема img src base64
    Ответ написан
    Комментировать
  • Приложение собранное с помощью nw.js не запускается на windows 10. В чем может быть проблема?

    AlexXYZ
    @AlexXYZ
    O Keep Clear O
    Возможно, что сама nw.dll имеет неразрешённые зависимости. Вот список приложений, которые, возможно, помогут вам выяснить, что требуется для загрузки этой dll: https://www.raymond.cc/blog/check-what-dll-or-ocx-...
    Мне в своё время помогала утилитка Dependency Walker. Больше всего нравилась.
    Или посмотрите какие файлы читаются при запуске всего приложения с помощью Procmon.exe
    Ответ написан
  • Стоит ли приступать к изучению Jquery, если ты занимаешься Javascript 2 недели?

    AlexXYZ
    @AlexXYZ
    O Keep Clear O
    Обычно правило простое - чем хуже вы программируете, тем больше вам надо писать своего кода, чтобы понять тонкости. Чем лучше вы программируете, тем увереннее надо использовать чужие библиотеки и чужой код, потому что прочитать/поправить чужой код и понять, что он делает можно быстрее, чем написать с нуля свой. Кроме того известные библиотеки лучше оттестированы. Так что в вашем случае надо пока больше писать самому. Вы сами поймёте, когда "можно" переходить на сторонние библиотеки, но это не достигается через две-три недели. Нужно быть упёртым.
    Ответ написан
    Комментировать