Тема: JS Framework для невеликих фрагментів з AJAX на готовому сайті

Доброго дня, Реплейсчани!

Зіткнувся з проблемою на вже майже готовому сайті (написаний на Yii2): на двох сторінках сайту дуже багато JS та AJAX. Коли дописую новий функціонал, нерідко ламається старий + код потихеньку починає перетворюватись на улюблену їжу пастафаріанців. Може хтось підкаже якийсь JS фреймворк який можна точково застосувати для більш комфортної розробки AJAX-залежного функціоналу. Навіть не западло буде переписати JS для цих двох сторінок, якщо потім буде хоч щось зрозуміло в тій каші.

Завчасно вдячний за увагу та відповіді.

2

Re: JS Framework для невеликих фрагментів з AJAX на готовому сайті

Я набагато скоротив власний код (нода в якості скриптової мови, не фронтенд) за допомогою underscore.js, щоправда потрібне розуміння функціонального підходу

3

Re: JS Framework для невеликих фрагментів з AJAX на готовому сайті

JQuery не підходить ?

4

Re: JS Framework для невеликих фрагментів з AJAX на готовому сайті

0xDADA11C7 написав:

Я набагато скоротив власний код (нода в якості скриптової мови, не фронтенд) за допомогою underscore.js, щоправда потрібне розуміння функціонального підходу

Дякую, буду мати варіант на думці, але ще пошукаю варіант з нижчим порогом входження. Щойно дивився на Knockout.js - воно здалося трохи легшим + це фронтенд. Може у когось був досвід роботи з ним?

5

Re: JS Framework для невеликих фрагментів з AJAX на готовому сайті

VTrim написав:

JQuery не підходить ?

На jQuery все працює зараз. Робота з обробниками івентів на завантажених AJAX'ом DOM'ах - це якесь пекло. Після кожного виклика модального вікна - треба ініціалізувати інші скрипти (selectordie, ajaxform і т.д.). Структура і об’єм коду змушують мене страждати кожного разу.

6

Re: JS Framework для невеликих фрагментів з AJAX на готовому сайті

Думаю,що тут вам потрібно самим все гарненько продумати,розкласти по поличкам,в загальному провести рефакторинг коду.
Якийсь окремий фреймворк наврядче вам допоможе.
Якщо на JQ "намудрували",то що було б на чистому JS :)

7 Востаннє редагувалося ktretyak (29.03.2015 15:59:06)

Re: JS Framework для невеликих фрагментів з AJAX на готовому сайті

Вам треба явно виходити з конкретних потреб функціоналу, а не з абстрактної потреби "як мені з лапші отримати більш зрозумілу структуру".

Викладайте самі проблемні частини коду, по чому буде зрозуміло де у вас і що не виходить.

Я зараз пишу проект, де на сторінці для створення Публікації є тьма-тмуща JS-скриптів і все це діло розрулюю за допомогою AngularJS.

Взагалі то часто існує проблема переходу від jQuery "мислення" до AngularJS "мислення": в AngularJS можна створити власні HTML-теги прямо на сторінці проекту, наприклад

<tags-input></tags-input>

І потім на стороні JS-скриптів описувати поведінку цього тега. Можете проглянути мій (застарілий) код, де я використовую AngularJS в зв'яці з jQuery

8

Re: JS Framework для невеликих фрагментів з AJAX на готовому сайті

Кажуть HTML6 буде більш семантичним і там нарешті можна буде мислити логічними категоріями документа, а не смикати повсякчас JS і думати про бравзери

9

Re: JS Framework для невеликих фрагментів з AJAX на готовому сайті

якщо  переписувати  функцiонал сторIнки  то чи  простiше взагалi повикидати яваскрипти  i написати  по  людськи

10

Re: JS Framework для невеликих фрагментів з AJAX на готовому сайті

0xDADA11C7 написав:

Кажуть HTML6 буде більш семантичним і там нарешті можна буде мислити логічними категоріями документа, а не смикати повсякчас JS і думати про бравзери

Цікаво що називається "логічними категоріями документа" =)

11

Re: JS Framework для невеликих фрагментів з AJAX на готовому сайті

Користувацікі теґи, щось подібне до зв’язки XML+XLST.

12

Re: JS Framework для невеликих фрагментів з AJAX на готовому сайті

Прихований текст

Взагалі-то це не в Angualr можна створювати нові теги а в HTML.

13 Востаннє редагувалося ktretyak (29.03.2015 20:43:40)

Re: JS Framework для невеликих фрагментів з AJAX на готовому сайті

Invader написав:

Взагалі-то це не в Angualr можна створювати нові теги а в HTML.

Це з якої точки зору подивитись. Якщо словник розглядати як самодостатній організм, то можна сказати що в HTML створюється новий тег.
Але якщо вважати що словник лише зберігає теги, які створені з-зовні, то саме AngularJS їх створює.

14

Re: JS Framework для невеликих фрагментів з AJAX на готовому сайті

Це як createElement в JS,створює HTML елемент

15 Востаннє редагувалося ktretyak (29.03.2015 21:22:45)

Re: JS Framework для невеликих фрагментів з AJAX на готовому сайті

Коротенький приклад як AngularJS інкапсулює код.

Наприклад, можна на HTML-сторінці написати тег:

<cst-list ng-model="cache"></cst-list>

А вже у js-файлі описувати:
1. яку підвантажувати вьюху для даного тега
2. де брати дані для розпечатки у вьюсі
3. який саме динамічний вміст вставляти

angular.module('postDirective',['postFactory'])

.directive('cstList', [ function()
{
  return {
    restrict: 'E'
    ,scope: { cache: '=ngModel' }
    ,controller:
    [
      '$scope', function($scope)
      {
        $scope.Math = window.Math;
        
        $scope.searchInContext = function(breadcrumbs, index, crumb, last, isContext)
        {
          var uri = '';
          
          for(var i = 0; index >= i; ++i)
          {
            var context = breadcrumbs[i];
            uri += context.name + '=' + context.id;
            
            if( index == i )
            {
              if(isContext)
                uri += last ? '' : '&' + breadcrumbs[ i + 1 ].name + '=' + breadcrumbs[ i + 1 ].id;
              else
                uri += '&' + crumb.name + '=' + crumb.id;
            }
            else
            {
              uri += '&';
            }
          }
          
          return uri;
        }

        $scope.linksWithLogo = [];
        var tagNames = [];
      }
    ]
    ,templateUrl: '/views/post/read/list_tags.html'
  };
}])
Подякували: Chemist-i, 0xDADA11C72

16

Re: JS Framework для невеликих фрагментів з AJAX на готовому сайті

caballero написав:

якщо  переписувати  функцiонал сторIнки  то чи  простiше взагалi повикидати яваскрипти  i написати  по  людськи

Що Ви маєте на увазі під "по людськи"? Код, звісно, можна рефакторити, можна більш дрібно розбити js-файли. В моєму випадку, найбільшими проблемами є:

  • івент на завантажений DOM треба вішати через незмінний батьківський DOM

  • після завантаження AJAX'ом контенту, в ньому необхідно ініціалізувати всі js-елементи (selectordie, confirmation, ajaxform, слайдери, управління html5-audio/video)

  • "важкість" коду

З приводу конкретних прикладів, ось шматок коду який непогано демонструє проблеми 2 і 3:

    $('#manage-collections-modal').on('hidden.bs.modal', function(){
        $.get(document.URL+' .form-collectionid>option', function(response){
            var responseJQ = $('<div></div>').html(response);
            $('.form-collectionid').each(function(e,elem){
                var current = $(elem).val();
                var newHtml = responseJQ.find('#'+$(elem).attr('id')).html();
                var newJQ = $('<div></div>').html(newHtml);
                $(elem).html(newHtml);
                if(newJQ.find('option[value="'+current+'"]').length){
                    $(elem).val(current);
                }
                $(elem).selectOrDie('update');
            });
        });
    });

Код вище при закритті модального вікна всього-навсього отримуює і передає оновленні опціі в селект. Таких функцій дуже багато.

17 Востаннє редагувалося ktretyak (30.03.2015 09:11:13)

Re: JS Framework для невеликих фрагментів з AJAX на готовому сайті

  1. івент на завантажений DOM треба вішати через незмінний батьківський DOM

  2. після завантаження AJAX'ом контенту, в ньому необхідно ініціалізувати всі js-елементи (selectordie, confirmation, ajaxform, слайдери, управління html5-audio/video)

  3. "важкість" коду

Код вище при закритті модального вікна всього-навсього отримуює і передає оновленні опціі в селект. Таких функцій дуже багато.

О! Саме із такими проблемами AngularJS справляється досить добре. Яким чином? - За допомогою тих же директив, які описують поведінку користувальницьких тегів.

1. частини коду в AngularJS обмінюються даними за допомогою сервісів - цим самим вирішується ваша проблема централізації.
2. хоча самі по собі директиви в AngularJS не є чимось таким же простим як метод $.ajax() в jQuery, але я, наприклад, на них перейшов якраз коли вирішував точно таку ж проблему - ініціалізація динамічно-завантаженого контента. AngularJS пропонує підхід автоматичної ініціалізації завантаженої вьюхи, або ж частини коду у вьюхі за допомогою блоків типу

<div class="msg" ng-if="msg[0]">
  Необхідно вказати наступні дані:
  <ul>
    <li ng-repeat="m in msg">{{m}}</li>
  </ul>
</div>

Тут директива ng-if перевіряє наявність даних в змінній msg, і якщо даних немає, то цей блок не буде ініціалізовано.
3. ну і подивіться на цей же приклад щоб оцінити "важкість" коду - за допомогою директиви ng-repeat="m in msg" можуть виводитись повідомлення і автоматично передаватись у змінну {{m}}. Таким чином може виводитись цілий список (а не лише один пункт списку).

Подякували: kurichenko.oleksii1

18

Re: JS Framework для невеликих фрагментів з AJAX на готовому сайті

ktretyak написав:

1. ...
2. ...
3. ...

Дуже дякую, придивлюся до Angular. Мене тільки насторожують атрибути ng-*. За тех.завданням, сторінка на виході має бути валідною в HTML5.

19

Re: JS Framework для невеликих фрагментів з AJAX на готовому сайті

Скажіть замовнику що таке поєднання коштує надто великих зусиль і відповідних коштів. Наведіть приклад, що ось самі працівники Google створили цей фреймворк і їхній сайт теж не проходить валідацію, але це не заважає йому працювати справно.

20

Re: JS Framework для невеликих фрагментів з AJAX на готовому сайті

kurichenko.oleksii написав:
caballero написав:

якщо  переписувати  функцiонал сторIнки  то чи  простiше взагалi повикидати яваскрипти  i написати  по  людськи

Що Ви маєте на увазі під "по людськи"? Код, звісно, можна рефакторити, можна більш дрібно розбити js-файли. В моєму випадку, найбільшими проблемами є:

  • івент на завантажений DOM треба вішати через незмінний батьківський DOM

  • після завантаження AJAX'ом контенту, в ньому необхідно ініціалізувати всі js-елементи (selectordie, confirmation, ajaxform, слайдери, управління html5-audio/video)

  • "важкість" коду

   по людськи - це  значить  - визначитися  чи  потрiбно  там  взагалi стiльки яваскрипта та   аякса.    Може  тодi проблеми  iвентами  та  iншим  гемором  самi вiдпадуть.   Якщо  ви, звичайно,  не є  js-евангелiстом.         

Дуже дякую, придивлюся до Angular. Мене тільки насторожують атрибути ng-*. За тех.завданням, сторінка на виході має бути валідною в HTML5.

HTML5 не  обмежує  використання  атрибутiв. 
Вас  мало  би насторожити  що  сам  гугл нiде не  використовує  ангуляр  який   вони  самi ж   пiарять. 
    до  речi  ви не  уявляєте  скiльки  сотень  якщо не  тисяч  iвентiв та  колбекiв  генерують  js фреймворки  типу  ангуляра.