За последние 24 часа нас посетили 18711 программистов и 1682 робота. Сейчас ищут 1778 программистов ...

jquery.validate (Сделал обёртку зацените!) + Ajax

Тема в разделе "JavaScript и AJAX", создана пользователем askanim, 3 май 2017.

  1. askanim

    askanim Старожил

    С нами с:
    7 апр 2016
    Сообщения:
    2.201
    Симпатии:
    166
    Адрес:
    GABRIEL
    Код (Javascript):
    1. // @var root link
    2. var __root__ = 'http://matronet.com';
    3. /*
    4. *
    5. * Ajax request
    6. * */
    7. function router (uri, dataType, dataArray, callable) {
    8.     $.ajax({
    9.         type: 'POST',
    10.         url: __root__+uri,
    11.         data: dataArray,
    12.         dataType: dataType,
    13.         success: function(data) {
    14.             callable();
    15.         },
    16.         error:  function(xhr, str){
    17.             alert('Возникла ошибка: ' + xhr.responseCode);
    18.         }
    19.     });
    20. }
    21. /*
    22. * form validate
    23. *
    24. * */
    25. var $validForm = function () {
    26.     this.fields = {};
    27.     this.message = {};
    28.     this.dataArray = null;
    29.     this.uri = null;
    30.     this.type = null;
    31.     this.success = '';
    32.     this.error = '';
    33.     this.callable = function (callable) {
    34.         callable();
    35.     };
    36.     this.router = function (idForm) {
    37.         $('#idForm').validate({
    38.             onKeyup : true,
    39.             eachValidField : function() {
    40.                 $(this).removeClass(this.error).addClass(this.success);
    41.             },
    42.             eachInvalidField : function() {
    43.                 $(this).removeClass(this.success).addClass(this.error);
    44.             },
    45.             validClass: this.success,
    46.             errorClass: this.error,
    47.             rules: this.fields,
    48.             messages: this.message,
    49.             submitHandler: function(form) {
    50.                 if(this.uri === null) {
    51.                     this.uri = $(form).data('action');
    52.                 }
    53.                 if (this.type === null) {
    54.                     this.type = $(form).data('type');
    55.                 }
    56.                 if (this.dataArray === null) {
    57.                     this.dataArray = $(form).serialize();
    58.                 }
    59.                 router(this.uri, this.type, this.dataArray, this.callable())
    60.             }
    61.         });
    62.     }
    63. };
     
    #1 askanim, 3 май 2017
    Последнее редактирование: 3 май 2017
    [vs] и denis01 нравится это.
  2. denis01

    denis01 Суперстар
    Команда форума Модератор

    С нами с:
    9 дек 2014
    Сообщения:
    12.227
    Симпатии:
    1.714
    Адрес:
    Молдова, г.Кишинёв
    Есть демо?
     
    askanim и TeslaFeo нравится это.
  3. TeslaFeo

    TeslaFeo Старожил

    С нами с:
    9 мар 2016
    Сообщения:
    2.984
    Симпатии:
    759
    Даешь ссылку на свою соц сеть :)
    --- Добавлено ---
    И еще не понятно, зачем нужны еще соц сети :)
     
  4. askanim

    askanim Старожил

    С нами с:
    7 апр 2016
    Сообщения:
    2.201
    Симпатии:
    166
    Адрес:
    GABRIEL
    @denis01 Пока нет это я под конец рабочего дня написал. Завтра что нибудь придумаю дам ссылку.
    --- Добавлено ---
    @TeslaFeo нет пока не могу. Там не соц сеть это я так обозвал, там очень масштабный проект, включая сой сеть со своим движком. Больше сказать не могу. Сори. Связаны и рот, и руки.
    --- Добавлено ---
    Чёрт грубая ошибка, ))) Вот так :
    Код (Javascript):
    1. $('#'+idForm)
     
  5. Fell-x27

    Fell-x27 Суперстар
    Команда форума Модератор

    С нами с:
    25 июл 2013
    Сообщения:
    12.156
    Симпатии:
    1.771
    Адрес:
    :сердА
    Обертка обертки нативного функционала, написанного на обертке целого языка, при том, что нативный функционал как таковой в обертке не нуждается, но был обернут, потому что парадигма автора JQuery - "все, что может быть обернуто, должно быть обернуто"? Окей.
    Следующим шагом будет написание обертки для твоей обертки.
    [​IMG]
     
  6. igordata

    igordata Суперстар
    Команда форума Модератор

    С нами с:
    18 мар 2010
    Сообщения:
    32.408
    Симпатии:
    1.768
    всгда делаю
    Код (Javascript):
    1. var self = this;
    в самом начале
    а то потом this этот везде разный, запаривает следить. А так точно знаешь, что в self сидит сам экземпляр класса.
    --- Добавлено ---
    соцсеть это у меня
    у него
    не скажу что
    --- Добавлено ---
    во! у меня есть такая. я от неё тащусь. очень клёво вышло.
     
    askanim и denis01 нравится это.
  7. romach

    romach Старожил

    С нами с:
    26 окт 2013
    Сообщения:
    2.904
    Симпатии:
    719
    Код (Javascript):
    1. () => {} // правда с поддержкой браузерами не очень, но есть же webpack )
     
  8. igordata

    igordata Суперстар
    Команда форума Модератор

    С нами с:
    18 мар 2010
    Сообщения:
    32.408
    Симпатии:
    1.768
    воу-воу, потише
     
  9. romach

    romach Старожил

    С нами с:
    26 окт 2013
    Сообщения:
    2.904
    Симпатии:
    719
    зря, новый js, с классами, генераторами, стрелочными функциями и прочим очень даже неплох.
     
  10. igordata

    igordata Суперстар
    Команда форума Модератор

    С нами с:
    18 мар 2010
    Сообщения:
    32.408
    Симпатии:
    1.768
    ща до ангуляра опять договоримся
    опесно это, опесно
    надо же сайтики клепать, как дед завещал
     
  11. denis01

    denis01 Суперстар
    Команда форума Модератор

    С нами с:
    9 дек 2014
    Сообщения:
    12.227
    Симпатии:
    1.714
    Адрес:
    Молдова, г.Кишинёв
    Но там же должно быть, что-то на подобии server side rendering
     
  12. igordata

    igordata Суперстар
    Команда форума Модератор

    С нами с:
    18 мар 2010
    Сообщения:
    32.408
    Симпатии:
    1.768
    нафига?
     
  13. denis01

    denis01 Суперстар
    Команда форума Модератор

    С нами с:
    9 дек 2014
    Сообщения:
    12.227
    Симпатии:
    1.714
    Адрес:
    Молдова, г.Кишинёв
    @igordata вот например https://universal.angular.io/, для поисковых систем и т.д.
    думаю удобно включать если клиент не поддерживает javascript или что-то в этом роде
     
  14. romach

    romach Старожил

    С нами с:
    26 окт 2013
    Сообщения:
    2.904
    Симпатии:
    719
    Ну его нахер, они его перепиливают от версии к версии. Реакт наше всё - просто, быстро и не требует тотальной переделки фронта.
     
  15. Fell-x27

    Fell-x27 Суперстар
    Команда форума Модератор

    С нами с:
    25 июл 2013
    Сообщения:
    12.156
    Симпатии:
    1.771
    Адрес:
    :сердА
    А что расскажете за бекбон? Он живой там еще?
     
  16. romach

    romach Старожил

    С нами с:
    26 окт 2013
    Сообщения:
    2.904
    Симпатии:
    719
    Я однажды столкнулся с проектом, где фронт был на бэкбоне, а бэк - на ларке. Верстка вся дублировалась и там и там, в лучшем случае. Бывало, что один и тот же блок был сверстан в четырех местах и выбирался адской логикой индуса, что это сочинил совершенно случайным образом. Т.е. одна и та же страница могла отрендерить верстку из фронта, а потом из бэка, а потом подтянуть с другого роута хтмл аяксом. Короче, с тех пор я не люблю бэкбон и тех кто на нем пишет ))
     
  17. Fell-x27

    Fell-x27 Суперстар
    Команда форума Модератор

    С нами с:
    25 июл 2013
    Сообщения:
    12.156
    Симпатии:
    1.771
    Адрес:
    :сердА
    А в этом угаре точно бэкбон виноват? О_о
    Звучит, конечно, содомненько.
     
  18. romach

    romach Старожил

    С нами с:
    26 окт 2013
    Сообщения:
    2.904
    Симпатии:
    719
    конечно нет, но как в старом анекдоте, осадочек остался ))
     
    denis01 нравится это.
  19. igordata

    igordata Суперстар
    Команда форума Модератор

    С нами с:
    18 мар 2010
    Сообщения:
    32.408
    Симпатии:
    1.768
    а че за vuejs толкнёте? мне он импонирует больше всех
     
  20. denis01

    denis01 Суперстар
    Команда форума Модератор

    С нами с:
    9 дек 2014
    Сообщения:
    12.227
    Симпатии:
    1.714
    Адрес:
    Молдова, г.Кишинёв
  21. igordata

    igordata Суперстар
    Команда форума Модератор

    С нами с:
    18 мар 2010
    Сообщения:
    32.408
    Симпатии:
    1.768
    а на практике? А по монгодб?
     
  22. askanim

    askanim Старожил

    С нами с:
    7 апр 2016
    Сообщения:
    2.201
    Симпатии:
    166
    Адрес:
    GABRIEL
    Короче я тестировал обёртку. И она не работает по этому алгоритму. И я его переделал:
    Код (Javascript):
    1. var __root__ = 'http://lib.com'; // Вымышленный
    2. /*
    3. *
    4. * Ajax request
    5. * */
    6.  
    7. function router (uri, dataType, dataArray, callable) {
    8.     console.log(dataArray);
    9.     $.ajax({
    10.         type: 'POST',
    11.         url: __root__+uri,
    12.         data: dataArray,
    13.         dataType: dataType,
    14.         success: function(data) {
    15.             callable(data);
    16.         },
    17.         error:  function(xhr, str){
    18.             alert('Возникла ошибка: ' + xhr.responseCode);
    19.         }
    20.     });
    21. }
    22. /*
    23. * form validate
    24. * */
    25. // instructions
    26. function $validForm () {
    27.     this.fields = {};
    28.     this.message = {};
    29.     this.success = '';
    30.     this.error = '';
    31. }
    32. // start validate and router;
    33. $validForm.prototype.router = function (idForm, data) {
    34.     $('#'+idForm).validate({
    35.         onKeyup : true,
    36.         eachValidField : function() {
    37.             $(this).removeClass(this.error).addClass(this.success);
    38.         },
    39.         eachInvalidField : function() {
    40.             $(this).removeClass(this.success).addClass(this.error);
    41.         },
    42.         validClass: this.success,
    43.         errorClass: this.error,
    44.         rules: this.fields,
    45.         messages: this.message,
    46.         submitHandler: function(form, e) {
    47.             router(data.uri, data.dataType, data.dataArray(), data.callable)
    48.         }
    49.     });
    50. };
    А вот пример работы:
    Код (Javascript):
    1. <script>
    2.        var FormLogin = new $validForm();
    3.         // Валидация
    4.         FormLogin.fields = {
    5.             // simple rule, converted to {required:true}
    6.             site: "required",
    7.             // compound rule
    8.             email: {
    9.                 required: true,
    10.                 email: true
    11.             }
    12.         };
    13.         FormLogin.message = {
    14.             site: {
    15.                 required: "Имя сайта не может быть пустым"
    16.             },
    17.             email: {
    18.                 required: "Не правильно заполнен email",
    19.                     email: "Не правильно заполнен email"
    20.             }
    21.         };
    22.         FormLogin.success = "success";
    23.         FormLogin.error = "error";
    24.         // Отправка пост запроса
    25.         FormLogin.router('login', {
    26.             uri: '/admin/login',
    27.             dataType: 'json',
    28.             dataArray: function() {
    29.                 return $('form').serialize()
    30.             },
    31.             callable: function (data) {
    32.                 console.log(data);
    33.             }
    34.         });
    35.     </script>
     
    #22 askanim, 5 май 2017
    Последнее редактирование: 5 май 2017
  23. romach

    romach Старожил

    С нами с:
    26 окт 2013
    Сообщения:
    2.904
    Симпатии:
    719
    Дисклеймер: в продакшене, так что бы с легаси и нагрузками опыта нет )
    Сейчас юзаю монгу в связке с нодой, нагрузка не то что бы большая, десяток-другой тысяч записей время от времени туда-сюда гоняется. В целом полет нормальный, если про индексы не забыть всё проходит шустро, в т.ч. полнотекстовый поиск. Короче, если не требуется связей между данными, с хитрыми джоинами и прочим, а нужно просто хранить-выбирать-изменять без лишних заморочек, то монга довольно таки удобна.

    vue не юзал, мну пока react`а хватает.