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

    VIKINGVyksa
    @VIKINGVyksa
    front-end developer
    Привет, используйте конструктор URL, он разобьет вам url на составные части, это облегчит вам этап работы с адресом.

    var url = new URL('https://hello.com?name=alex'); // or document.location
    url.searchParams.get('name') // ~> alex
    Ответ написан
    Комментировать
  • Почему Webpack не использует loader, need an appropriate loader?

    VIKINGVyksa
    @VIKINGVyksa Автор вопроса
    front-end developer
    Я нашёл решение, используя fast-sass-loader, в конфиге немного изменений
    // #Webpack Plugins
    
    const plugins = [
    
      new ExtractTextPlugin('style.css')
    
    ]
    
    // #Webpack Rules
    
    const rules = [
    
      {
        test:/\.(scss|sass)$/,
        use:ExtractTextPlugin.extract({
          use:['css-loader','fast-sass-loader']
        })
      }
    ]


    Не понимаю почему чисто sass-loader не работает у меня. Данное решение компилирует sass в css и при этом намного быстрее чем sass-loader. Всем спасибо за ответы :)
    Ответ написан
    Комментировать
  • Анимация увеличения div по центру экрана в javascript?

    VIKINGVyksa
    @VIKINGVyksa
    front-end developer
    Ну как-то так CodePen

    Если элемент с статичной позицией, то просто прибавьте класс с стилями.
    Ответ написан
    1 комментарий
  • Проблемы с видимостью в классе?

    VIKINGVyksa
    @VIKINGVyksa
    front-end developer
    В конструкторе надо прописать что-то типо
    constructor(options) {
        
        this.selects = options.selects;
       // some code
        
      }


    Тогда в классе будет свойство selects которым можно будет пользоваться всеми методами класса (сделай приватным)
    Ответ написан
    Комментировать
  • Как в webpack экспортировать все функции из файла?

    VIKINGVyksa
    @VIKINGVyksa
    front-end developer
    Вы можете в глобальную область вытащить переменную, типо как библиотеку (например jquery = $) , содержащую в себе все ваши функции. Так вы не засоряете сильно window и в тоже время довольно удобно.

    В webpack это по моему это делается через library, например
    output:{
    		path:__dirname+'/production/',
    		publicPath:'production/',
    		filename:'[name].js',
    		library :'[name]',//то самое
    	},


    Ну и off documentation
    Ответ написан
    Комментировать
  • JQuery сам меняет кодировку?

    VIKINGVyksa
    @VIKINGVyksa
    front-end developer
    у jQuery нету таких сверх способностей) Смотрите в какой кодировке сам файл у вас открыт в браузере и в какой кодировке файл с js, у вас отличается.
    Ответ написан
    1 комментарий
  • Почему не работает ng-controller в jade?

    VIKINGVyksa
    @VIKINGVyksa
    front-end developer
    Ну так попробуйте на другую строку перенести {{name}} ведь {{ 2 + 8 }} на одной строке а {{name}} на одной строке с h3.work
    Ответ написан
    Комментировать
  • Как изменить значение свойства объекта в зависимости от другого объекта?

    VIKINGVyksa
    @VIKINGVyksa
    front-end developer
    Обычный массив в массиве, подругому если делать то надо будет исходные массивы менять
    Ответ написан
  • Как загрузить блок по клику по ссылки через ajax?

    VIKINGVyksa
    @VIKINGVyksa
    front-end developer
    Найти вы это можите в гугле, зачем тут спрашивать? Тут про код спрашивают...

    Вот велосипед
    ;(function(w,d,b){
     d.getElementsByTagName('a').
    
    for(/*типо цикл*/){
      d[i].addEventListener('click',function(e){
      var self = this,
           blockName = self.getAttibute('data-block');
        e.preventDefault();
    
        /*ну и ajax*/
     
     },false);
    }
    })(window,document,document.body);


    Проблема этого способа в том что куча обработчиков событий в документе, чем больше ссылок, тем больше обработчиков. Делегируйте на свой вкус)
    Ответ написан
    Комментировать
  • Как настроить событие на элемент отслеженный getElementsByClassName???

    VIKINGVyksa
    @VIKINGVyksa
    front-end developer
    по id возвращает элимент, а по классу возвращает коллекцию
    берите просто элимент который хотите
    document.getElementsByClassName('asd')[0].addEventListener('click',function(){console.log('click!')},false);
    Ответ написан
  • Как полностью заменить содержимое страницы?

    VIKINGVyksa
    @VIKINGVyksa
    front-end developer
    document.head.innerHTML='html код ваших зависимостей';
    document.body.innerHTML = 'html код разметки страницы';

    Вообще неизвесно почему вам нужно так изменить, возможно у вас архитектура приложения не правильная, таких задач не должно возникать)
    Ответ написан
    Комментировать
  • Как подключить все js скрипты одним файлом?

    VIKINGVyksa
    @VIKINGVyksa
    front-end developer
    Можно использовать ES2015 с бабелем

    Если вы пользуитесь grunt, то есть npm пакет

    Я привык к browserify
    Ответ написан
    Комментировать
  • Каков секрет правильного ajax?

    VIKINGVyksa
    @VIKINGVyksa
    front-end developer
    Вообще если вы делаите приложение на AJAX, то ваша архитектура должна быть похожа на SPA. А в нём первый запрос к серверу загружает приложение, которое настраивает себя, вешает все обработчики и тд. То есть вы подгружаите критический css и js просто как теги ("app.js и стили с лоудерами и главной страницей") а остальные просто ленивой подгрузкой в фоне. Так получаеться что пользователь быстро получает страницу которую хотел, но все зависимости подгружаються и для других страниц в фоне. В итоге когда вы будите переходить по страницам у вас будет меняться лишь контент.

    Тот же самый backbone.js. В нём ваше приложение скачиваеться, создаёт модели(делает AJAX к серверу), передаёт во View и отрисовывает сраницу. Все нужные для работы приложения зависимости просто добавлены как теги(пока они не загрузяться ничего не сработает дальше). А расширения для контента, типа плагина для графиков, видео какое-то вы можите в фоновом режиме просто подгрузить. Ведь это одностраничное приложение, смысл постоянно перезагружать расширения.

    Вы можите просто добавить проверку типа:
    if(window.$){
     //если у нас есть jQuery
    // то приложение идёт дальше работать
    
    }else{
     //вызываем какую-то функцию установщик
    loadExtension('jquery.js')
    }

    У вас может быть просто массив зависимостей, которые вы можите подгрузить в фоне. Но когда у вас запрашивается страница /home/about требующая графиков например, вы пререндером на сервере можите запросто добавить этот плагин как просто тег script, а приложение когда будет бегать по зависимостям через if проверит есть он или нет, т.к. вы его подгрузили уже,то он проигнорируеться и у вас не будет дуближей.
    Ответ написан
  • Как работает Javascript?

    VIKINGVyksa
    @VIKINGVyksa
    front-end developer
    попробуйте
    console.log('Корзина',vm.cartItems);
    Ответ написан
  • Почему код в script при добавлении не срабатывает?

    VIKINGVyksa
    @VIKINGVyksa Автор вопроса
    front-end developer
    Я всё решил, просто событие onload уже давно прошло и не происходит установка
    Ответ написан
    Комментировать
  • Область видимости и замыкания?

    VIKINGVyksa
    @VIKINGVyksa
    front-end developer
    Ну с замыканиями всё просто

    Допустим у нас есть функция которая читает строки, которая в свою очередь читает символы.
    function readString(){
     var string;
     string = readChar();
    }
    
    function readChar(){
       return 'a';
    }

    В таком коде у нас есть 2 области видимости, тк. они создаються функциями и функция readChar ничего не знает о переменной string;

    Теперь мы "закроем" эту переменную внутри замыкания.

    function readString(){
     var string;
    
      readChar();
    
       function readChar(){
        string = 'a';   
       }
    }


    Теперь переменная string есть в замыкании. Когда мы пытаемся обратится к какой-то переменной из функции(scope) то она ищеться снача в нём, если не нашлась тут то ищеться во внешней области видимости, а внешней для функции readChar будет функция readString и в неё есть переменная string. Мы её нашли, если её там не было бы, то её поиск проходил бы вплоть до объекта window.

    На счёт второго вопроса ответ есть тут
    Это лучший русскоязычный ресурс по javascript
    Ответ написан
    Комментировать
  • Правильная работа с данными в форме посредством AJAX - каждый раз рендерить форму или заполнять существующую форму полученными данными?

    VIKINGVyksa
    @VIKINGVyksa
    front-end developer
    Ну а какие у вас данные возвращаються что вам нужно в форме что-то поменять? вы же её заполнили она уже полная и просто отправили, сервер обычно возвращает ответ о том что всё хорошо.

    Рендерить лучше всего когда открываеться новая страница SPA, типо about. Отправляите AJAX а данные в шаблонизатор. Обычно возвращаимые значения не изменяют саму форму а изменяют данные, которые изменяються посредством формы. Допустим добавить новый элимент в список товаров. Мы заполняем форму и отправляем всё на сервер, он возвращает нам ответ типа всё добавилось успешно или нет. И после этого наши данные отрисовываем через шаблонизатор в список товаров.

    Если у вас допустим форма настроек, вы можите её держать готовой а потом выставлять эти настройки, пришедшие из AJAX, но смотря что вы используите, пробегая по всему вы сделаите 10 обращений к DOM. Изменить текст в input, подгрузить options в select и тд. А если у вас шаблонизатор то он сделает всего одно обращение к DOM, просто вставит форму уже готовую со всеми проставленными настройками. Это проще и скорее всего быстрее)
    Ответ написан
    2 комментария
  • Как написать виджет для сайта?

    VIKINGVyksa
    @VIKINGVyksa
    front-end developer
    Я недели 2 назад написал виджет. У вас просто есть сервер, где лежит файл установщик типо installwidget.js. В этом файле вы прописываите установку вашего виджета ( ну типо кнопку по которой будет он активироваться добавите, и iframe добавите, который по умолчанию скрытый и активируеться по кнопке или как захотите). На странице к которой вы хотите подключить виджет просто прописываите ваш конфиг (если виджет настраиваеться) и код добавляющий файл установщик.
    Ну что-то типо этого добавляите на страницу
    <script>
      window.App={};
     window.onload = function(){var ms = document.createElement('script);ms.src="http://widget/installwidget.js";document.head.appendChild(ms)};
    <script>


    В итоге. Вы можите добавлять настраиваемый виджет, сам файл installwidget.js возмёт конфиг и в соответсвии с ним добавит iframe и др.

    В вашем примере код генерируеться сервером из get. Ну решать вам как сделать, как вам будет удобнее. Я когда делал оперался на яндекс метрики, как они устанавливаються)
    Ответ написан
    Комментировать
  • Как безопасно передать пароль?

    VIKINGVyksa
    @VIKINGVyksa
    front-end developer
    Так хэшировать вам нужно только на сервере, на клиенте зачем?
    Вы просто на сервер отсылаите пароль "pass243" и на сервере его хэшируите своим алгоритмом и проверяите с тем захэшированным в БД. Совпадает то всё ок. На клиетне ничего не храните иначе взломают как нечего делать)
    Ответ написан
    Комментировать