Просмотреть наследование модели при использовании Durandal

Question

Я создаю приложение с использованием Durandal, и мне нужно поделиться некоторыми функциями в моделях просмотра.

У меня есть 5 экранов для сборки, и все они практически одного и того же экрана, за исключением того, что в функции активации они будут вызывать разные точки конца api, но в противном случае модели просмотра и просмотра будут идентичны.

Есть ли шаблон, которым я должен следовать, чтобы правильно структурировать его для продвижения повторного использования кода?

Answer 1

Если взгляды и модели просмотра идентичны, за исключением вызовов различных действий api, как насчет того, чтобы просто принимать параметр как часть маршрута? Затем в функции активации вы можете включить параметр. Значения маршрута могут быть обозначены так, чтобы ваш URL был релевантным, например [http://site/page/subtype], где подтип является параметром (вместо использования числовых значений)

Что касается наследования, в зависимости от особенностей, которые вам нужны, существует так много способов сделать JavaScript Наследование это может быть немного запутанным. Существуют некоторые полнофункциональные модели наследования, предоставляемые библиотеками, такими как base2 и Prototype. John Resig also has an inheritance model, что я успешно использовал.

В целом, я предпочитаю придерживаться более простых решений, когда речь идет о наследовании JS. Если вам нужен довольно полный набор функций наследования, эти библиотеки хорошо рассмотреть. Если вы действительно заботитесь только о доступе к набору свойств и функций из базового класса, вы можете пройти с помощью простого определения модели представления как функции и замены прототипа функции желаемым базовым классом. Обратитесь к Mozilla's Developer Docs за хорошей информацией о наследовании.

Вот пример:

//viewModelBase 
define(function (require) { 
    "use strict"; 

    function _ctor() { 

     var baseProperty = "Hello from base"; 
     function baseFunction() { 
      console.log("Hello from base function"); 
     } 
     //exports 
     this.baseProperty = baseProperty; 
     this.baseFunction = baseFunction; 
    }; 

    //return an instance of the view model (singleton) 
    return new _ctor(); 
}); 

//view model that inherits from viewModelBase 
define(function (require) { 
    "use strict"; 

    function _ctor() { 

     var property1 = "my property value"; 
     function activate() { 
      //add start up logic here, and return true, false, or a promise() 
      return true; 
     } 
     //exports 
     this.activate = activate; 
     this.property1 = property1; 
    }; 

    //set the "base" 
    var _base = require("viewModelBase"); 
    _ctor.prototype = _base; 
    _ctor.prototype.constructor = _ctor; 

    //return an instance of the view model (singleton) 
    return new _ctor(); 
}); 

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

Если вы хотите, чтобы переходный (не одиночный) просто возвращался _ctor. Затем вам понадобится создать экземпляр нового экземпляра после его().

Еще одно замечание: в общем случае функции должны быть определены на прототипе, а не внутри самой функции-конструктора. См. this link for more information on why. Поскольку этот пример приводит только к одному экземпляру, это спорный вопрос, поэтому функции находятся внутри конструктора для улучшения удобочитаемости, а также возможность доступа к приватным варам и функциям.