Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   MVC vs API. Ваше мнение. (https://javascript.ru/forum/misc/10776-mvc-vs-api-vashe-mnenie.html)

x-yuri 28.08.2010 20:48

Цитата:

Сообщение от B~Vladi
Ну он [Команда] хорошо подходит на это место. Контроллер будет командовать. Реализация не сложная. Конечно, я готов рассмотреть другие варианты.

там учавствуют три объекта. Виды, один контроллер... кто третий? И главное для чего?

Цитата:

Сообщение от B~Vladi
т.е. ты предлагаешь пробрасывать события V <-> C <-> M ?!

почему нет? Модель сообщает через контроллер, что изменилось, тем или иным образом. Себя никак не называет. Можно это уведомления на категории (или просто разные события сделать) разбить, на которые виды будут подписываться

Цитата:

Сообщение от B~Vladi
Ну да, вообще описание классов, внутреннего функционала. Без каких-то конкретных действий.

для элементарных компонентов (которые ближе к разметке, чем к доменной области; какой-нибудь стилизованный input type=file) вряд ли прокатит. Тоже на правах пришедшей в голову мысли

B~Vladi 28.08.2010 20:59

Цитата:

Сообщение от x-yuri
почему нет?

Да я как бэ не против:)
Цитата:

Сообщение от x-yuri
для элементарных компонентов (которые ближе к разметке, чем к доменной области; какой-нибудь стилизованный input type=file) вряд ли прокатит. Тоже на правах пришедшей в голову мысли

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

x-yuri 31.08.2010 03:33

Цитата:

Сообщение от B~Vladi
Сначала я опишу каждую составляющую более абстрактно, без привязке к отображению или к чему либо ещё, на какой-нибудь тестовой страничке.

Цитата:

Сообщение от B~Vladi
Ну да, вообще описание классов, внутреннего функционала. Без каких-то конкретных действий.

Цитата:

Сообщение от B~Vladi
Ну я начинаю разработку именно с этого... Описываю компоненты, их взаимодействие, хранение и передачу данных... А потом уже методы, ну и все остальное. Не зависимо от задачи, если она достаточно большая и сложная.

ты можешь это на каком-то конкретном примере продемонстрировать?

B~Vladi 31.08.2010 09:42

Ну вот нашел кусок кода, который находится на той стадии, когда нужно реализовывать взаимодействие с DOM. Логика и обработка данных уже готова.
var Domino = (function(){
    var sides = ['top', 'right', 'bottom', 'left'];

    // Ajax
    function ajax(opt){
      var request = XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');
      request.open(typeof opt.method == 'string' ? opt.method.toLowerCase() : 'GET', opt.url, opt.async != void 0 ? !!opt.async : true);

      if(opt.options){
        request.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
        request.setRequestHeader('Content-length', opt.options.length);
        request.setRequestHeader('Connection', 'close');
        request.send(opt.options);
      } else {
        request.send(null);
      }

      setTimeout(function(){
        if(opt.callback && request.readyState == 4 && request.status == 200){
          opt.callback(new Function('return ' + request.responseText)(), opt.data);
        } else {
          setTimeout(arguments.callee, 15);
        }
      }, 0);
    }

    // Animation
    function slideImage(opt){
      var steps = Math.floor(opt.time * opt.fps / 1000);
      var timeOuts = [];

      for(var i = 1; i <= steps; i++){
        var time = Math.floor(1000 / opt.fps * i);

        timeOuts.push(setTimeout((function(time){
          var stop = false;
          return function(){
            var integer = opt.stop * (time * 100 / opt.time) / 100;
            if(opt.call && (stop = opt.call(integer) === false)){
              var l = timeOuts.length;
              while(l){
                clearTimeout(timeOuts[--l]);
              }
            }

            if(stop || opt.stop == integer){
              opt = steps = i = l = time = timeOuts = null;
            }
          }
        })(time), time));
      }
    }

    // Test
    slideImage({
      time: 1500,
      fps: 30,
      stop: 143
    });

    function Constructor(opt){
      this.options = {};
      for(var property in opt){
        opt.hasOwnProperty(property) && (this.options[property] = opt[property]);
      }

      this.data = {
        images: [],
        nodes: [],
        timeStamp: new Date
      };

      // Наполнение
      var node = document.getElementById(opt.id);

      var l = (node.clientWidth / this.options.width) * (node.clientHeight / this.options.height);
      var fragment = document.createDocumentFragment();

      while(l--){
        var item = document.createElement('div');

        // TODO: -2 убрать
        item.style.cssText = 'width:' + (this.options.width-2) + 'px;' +
          'height:' + (this.options.height-2) + 'px; border: #f00 1px solid; float:left;';
        this.data.nodes.push(item);
        fragment.appendChild(item);
      }
      node.appendChild(fragment);
    }

    Constructor.prototype = {
      start: function(){
        var data = this.data;

        (function(){
          if(!data.images.length){
            return;
          }

          var item = data.images.shift();
          if(data.loaded && item.timeStamp != data.timeStamp){
            return arguments.callee();
          }

          var activeNode = data.nodes[Math.floor(Math.random() * data.nodes.length)];

          data.images.push(item);

          data.timer = setTimeout(arguments.callee, 1000);
        })();
      },
      stop: function(){
        clearTimeout(this.data.timer);
      },
      update: (function(){
        function onLoadImage(){
          this.data.options.img = this;
          this.data.objData.images.unshift(this.data.options);
          !this.data.index && (this.data.objData.loaded = true);
          delete this.data, this.onload;
        }

        function onLoadData(result, data){
          data.timeStamp = new Date;

          var length = result.imgs.length;
          while(length){
            var item = new Image();
            item.data = {
              objData: data,
              options: result.imgs[--length],
              index: length
            };
            item.timeStamp = data.timeStamp;
            item.onload = onLoadImage;
            item.src = item.data.options.img;
          }

          delete data.loaded;
        }

        return function(url){
          ajax({
            url: typeof url == 'string' && url.length ? url : this.options.url,
            callback: onLoadData,
            data: this.data
          });
        };

      })()
    };

    return Constructor;
  })();

  var dm = new Domino({
    width: 50,
    height: 50,
    url: 'req.js',
    speed: 30,
    id: 'contaner'
  });

  dm.start();

В двух словах, это реализация слайда группы каринок.
Сами картинки не меняются, только обработка данных. Пишется как самостоятельное приложение, без привязки к фреймворкам.

B~Vladi 31.08.2010 11:09

Это то, что ты просил?

x-yuri 05.09.2010 17:01

приблизительно

Но ты говорил, про код, не привязанный к отображению. Где граница? Ты создаешь div'ы, назначаешь css-свойства

И что там с Командой? Как участники шаблона проецируются на реальные объекты?

B~Vladi 05.09.2010 20:17

Цитата:

Сообщение от x-yuri
Но ты говорил, про код, не привязанный к отображению.

Этот код писался в моем "старом" стиле. Вопрос был о стадии разработки приложения.
Цитата:

Сообщение от x-yuri
И что там с Командой? Как участники шаблона проецируются на реальные объекты?

Этот шаблон не подходит для моих задач. Сейчас архитектура построена на MVC+Observer, причем последний относиться только к модели (взаимодействие на другие модули путем изменения только своих данных - событие update). Доступ и обработка данных осуществляется через API между модулем и хранилищем (контроллер). Так как данные хранятся в html-коде (view), парсингом занимается отображение.
Как будет рабочий прототип, можно будет уже конкретные примеры моделей (модулей) привести и вообще схему всей архитектуры.

Gozar 19.10.2010 14:40

B~Vladi,
Хотелось бы поднять старую тему и поинтересоваться, нельзя ли взглянуть одним глазком на прототип?

B~Vladi 19.10.2010 15:29

:) Кто-то ещё помнит...
Пока нет.
Архитектура утверждена в плане удобства/универсальности.
Сейчас занимаюсь оптимизацией работы с View (самое узкое место). Удалось реализовать полный парсинг DOM средней страницы (1000 элементов) за 20-30 мс, и это ещё не конец. Т.е. по определённому запросу, я уже могу быстро получать нужные мне данные из хранилища (DOM), но сохранять пока не могу.
Интерфейс работы с моделями готов. Ждет, пока свяжу с контроллером. Самое главное - удалось полностью избавиться от зависимостей между моделями. При этом никаких ограничений на работу с View не возникло.

В общем, дела идут, но сильно медленно, ибо работаю на дядьку :(
Уже присмотрел один работающий проект для бета-тестирования прототипа. Хочу посмотреть, насколько просто будет интегрирование фреймворка на уже рабочее приложение.

Я вас обязательно попрошу принять участие в бета-тестировании, больше мне надеяцо ненакого :)


Часовой пояс GMT +3, время: 02:50.