JavaScript ООП и MVC

Question

Я пытаюсь выяснить, что MV * основа многих существующих может дать мне то, что мне нужно ...

1. Я использую многостраничный веб-приложения ASP.NET, поэтому я не Не хотите использовать маршрутизаторы.

2. Он должен быть очень маленьким ... что-то вроде Backbone.js, в настоящее время я не хочу использовать что-то огромное, как Ember.js или Angular.js.

3. У меня будут «модули или контроллеры», которые на самом деле являются «единичными экземплярами», которые получат свои «данные» с сервера в виде объектов JSON (когда-то будет AJAX и когда-то встроен в HTML). Важно, чтобы иметь возможность использовать наследование для модулей, так что хотел бы быть в состоянии сделать что-то вроде этого (псевдокод):

   App.Module1 = SomeFramework.create({ 
       model: null, 
       init:function(data){ this.model = data } 
   }); 
   App.Module2 = SomeFramework.create(App.Module1, { 
       config: null, 
       init: function(data, config){ 
         this._super(data); this.prop = data; 
       } 
   }); 
   
   //Later I will use one of this modules 
   App.Module1.init(data); /* OR */ App.Module2.init(data, config); 
   

4. я буду иметь разные модели, которые могут иметь множество экземпляров.

5. Модули/Контроллеры должны иметь возможность обнаруживать «изменения модели».

Мне нравится Backbone, но он пропускает некоторые вещи, как создание «отдельных модулей», которые способны передаваться по наследству и Backbone не имеет «контроллер», потому что теперь это маршрутизатор и создавать экземпляры на основе URL ,

Answer 1

Нет ничего меньше, чем писать обычный ванильный javascript, это было бы моим советом.

И добавьте пару micro libraries для манипуляций с DOM и ajax, если вам нужно.

Вы хотите наблюдать за своими моделями, но привязка данных может быть тяжелой, магия стоит дорого. Почему бы просто не использовать библиотеку pub-sub для связи с модулями, которые изменили данные модели? Это просто, мало и безопасно.

Я приведу несколько примеров с чем-то, что я знаю, рамки soma.js. Он очень легкий, не имеет маршрутизатора (обычно я советую использовать director.js). Он обеспечивает инъекцию зависимостей, основанную на событиях систему наблюдателей, а также базовые ООП, такие как наследование. Он очень сфокусирован на предотвращении высокосвязного кода, поэтому модули поддерживаются и многократно используются. Ванильный javascript - это ключ, который является возможной инъекцией зависимости.

Забавно, кто-то думал, что я исхожу из .NET-фона с этой картой, возможно, он обращается к вам.

Для части ajax вырезайте jquery, так что есть только материал ajax (поэтому он маленький) или используйте что-то вроде reqwest.

Вот краткий обзор того, что вы можете сделать.

Inheritance

// create "super class" 
var Person = function(name) { 
    this.name = name; 
}; 
Person.prototype.say = function() { 
    console.log("I'm a Person, my name is:", this.name); 
} 

// create "child class" that will inherit from its parent 
var Man = function(name) { 
    Person.call(this, name); // call super constructor 
} 
Man.prototype.say = function() { 
    // Person.prototype.say.call(this); // call super say method 
    console.log("I'm a Man, my name is:", this.name); 
} 

// apply inheritance 
soma.inherit(Person, Man.prototype); 

// create Person 
var person = new Person("Doe"); 
person.say(); 

// create Man 
var john = new Man("John Doe"); 
john.say(); 

Try it out

Вот еще один пример с некоторыми ярлыками.

// create "super class" 
var Person = function(name) { 
    this.name = name; 
}; 
Person.prototype.say = function() { 
    console.log("I'm a Person, my name is:", this.name); 
} 

// create an "extend" shortcut 
Person.extend = function (obj) { 
    return soma.inherit(Person, obj); 
}; 

// create "child class" and apply inheritance using an "extend" shortcut 
var Man = Person.extend({ 
    constructor: function(name) { 
    Person.call(this, name); // call super constructor 
    }, 
    say: function() { 
    // Person.prototype.say.call(this); // call super say method 
    console.log("I'm a Man, my name is:", this.name); 
    } 
}); 

// create Person 
var person = new Person("Doe"); 
person.say(); 

// create Man 
var john = new Man("John Doe"); 
john.say(); 

Try it out

Модули

рамочные делает вас в состоянии ваниль Javascript, поэтому очень многоразовые.

Вот что модель, или модуль, или что-нибудь еще может выглядеть следующим образом (ваниль Javascript):

(function(clock) { 

    'use strict'; 

    var TimerModel = function() { 

    }; 

    TimerModel.prototype.update = function() { 
     // update something 
    }; 

    TimerModel.prototype.add = function(callback) { 
     // add something 
    }; 

    TimerModel.prototype.remove = function(callback) { 
     // remove something 
    }; 

    TimerModel.prototype.dispose = function() { 
     // destroy model 
    }; 

    clock.TimerModel = TimerModel; 

})(window.clock = window.clock || {}); 

Dependency injection

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

Правило инъекции может выглядеть так:

injector.mapClass("myModel", Model); 

Чтобы получить модель где-то еще, просто использовать «именованные», форсунка будет заботиться обо всем (и очень хорошо, чтобы решить вложенные зависимости) :

var Module = function(myModel) { 
    // myModel has been injected 
} 

Try an example

More information

Communication (pub-sub, Observer Pattern)

Инструмент, основанный на событиях (взаимозаменяемый с узлом DOM для высокой развязки), доступен для связи: диспетчер. Вы также можете получить его с инъекцией:

var Module = function(myModel, dispatcher) { 
    // myModel and dispatcher have been injected 
} 

Отправка события:

this.dispatcher.dispatch('do-something'); 

Слушайте события:

dispatcher.addEventListener('do-something', function(event) { 
    // react to an event 
}); 

Template

Вы можете использовать очень мощный плагин, как механизм шаблонов (настоящая неразрушающая манипуляция с DOM), называемая soma-template.

Или любой другой шаблон двигателя по вашему выбору.

Построить приложение

Вот статья, которая сделает вас построить масштабируемую и ремонтопригодны приложения: http://flippinawesome.org/2013/07/15/soma-js-your-way-out-of-chaotic-javascript/

Это не так, рамки также обеспечивают Mediators и Commands, чтобы сделать код для повторного использования. Check out the site, он имеет tons of demos.

Я надеюсь, что все это поможет вам.

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

Romu

Answer 2

Да, магистраль не имеет разработки, основанной на модуле, или, скорее, магистральной системы не соответствует модульной схеме. Вы можете использовать require.js для модульного рисунка. Это очень маленькая библиотека и хорошо синхронизируется с Backbone.