Является ли этот код кода javascript хорошим?

Question

Я работаю над заявлением о назначении назначения с несколькими арендаторами, используя Asp.net MVC и knockoutjs. Мне нужна помощь в решении шаблона кода javascript. У меня есть следующий сценарий:

я получаю сложный ViewModel (имени: TenantModel) с сервера и в JavaScript Я использую knockout mapping plugin для создания нокаутирующих моделей.

Посмотрим, что у меня есть в моем TenantModel:

TenantModel содержит различные сложные типы, такие как:

• Список <EmployeeModel>
• Список <CustomerModel>
• Список <ServicesModel>
• Профиль Модель
• и многое другое ..

Эти сложные типы могут дополнительно содержать сложные типы, такие как:

• EmployeeModel содержит перечень услуг подпадает под его юрисдикцию.
• ProfileModel содержит ContactModel

Сначала я расскажу свои усилия:

Я решил использовать Module Pattern в JavaScript коде. Так в настоящее время имеют в виде, чтобы структурировать яваскрипт код что-то вроде этого:

var profile = (function() { 

    var _viewmodel; 

    var initialize = function() { 
     //initialize _viewmodel here 
    }; 

    var bind = function (node) { 
     ko.applyBindings(_viewmodel, node); 
    }; 

    return { 
     initialize: initialize, 
     bind: bind 
    }; 

})(); 


var employee = (function() { 

    var _viewmodel; 

    var initialize = function() { 
     //initialize _viewmodel here 
    }; 

    var bind = function (node) { 
     ko.applyBindings(_viewmodel, node); 
    }; 

    return { 
     initialize: initialize, 
     bind: bind 
    }; 

})(); 


var tenant = (function() { 

    var _viewmodel; 

    var initialize = function (jsonTenantModel) { 
     _viewmodel = ko.mapping.fromJSON(jsonTenantModel, { 
      'Profile': { 
       create: function (option) { 
        //create Profile using profile module 
       } 
      }, 
      'Employees': { 
       create: function (option) { 
        //create Employees using Employee module 
       } 
      } 
     }) 
    }; 

    var bind = function (node) { 
     ko.applyBindings(_viewmodel, node); 
    }; 

    return { 
     initialize: initialize, 
     bind: bind 
    }; 

})(); 

Ребят я не опыта Javascript программист, но я хочу написать расширяемый и управляемый яваскрипт кода. Я хочу знать, что я думаю в правильном направлении? Или есть ли другой лучший способ добиться такого сценария?

Answer 1

Ваш подход к использованию RMP с нокаутом - хорошее решение. И будет долгий путь, помогая вам поддерживать масштабируемость и управляемость приложения. Однако ваши модули выглядят слишком сложными для цели.

Есть несколько вещей, которые вам необходимо учитывать.

1. Как вы собираетесь обрабатывать зависимости внутри своих модулей? Возможно, подумайте об использовании require.js?

2. Как ваши модули будут взаимодействовать между собой (если это необходимо)? Вам нужно внедрить систему обмена сообщениями (которая сама будет модулем)

3. Вы хотите, чтобы ваше приложение было одной страницей (для этого требуется совершенно новый набор соображений) один или классический многостраничный подход?

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

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

// Sketch of employee model 
function Employee(data){ 
    var self = this; 
    self.FirstName = ko.observable(data.FirstName); 
    self.LastName = ko.observable(data.LastName); 
    self.FullName = ko.computed(function(){ 
     return self.FirstName() + ' ' + self.LastName(); 
    }); 
} 

// Sketch of a possible list of employees 
// This viewmodel now will have a dependency on the Emplyee model 
// So if you have for example require.js you can go: 

// dataservice could be another module which you create to separate data calls 
// from your business logic 

require(["models/employee", "services/dataservice"], function(employee, dataservice) { 
    // and now employee model is availbale with this context: 

    function EmployeesList(data){ 
     var self = this; 
     self.employees = ko.observableArray(); 
     self.editDetails = function(employee){ 
      // code for editing employee 
     } 
     self.activate = function(){ 
      // So you can now add new employees in the 
      // collection based on your model 
      ko.utils.arrayForEach(data, function(item){ 
       self.employees.push(new employee(item)) 
      }); 
     } 
     return { 
      employees: self.employees, 
      activate: self.activate 
     } 
    } 

    // a data service which might have a getEmployees method which can take options like MinAge: 
    dataservice.getEmployees({ 'MinAge' : 36 }, function(employeeData){ 

     var myEmployeesList = new EmployeesList(employeeData) 

     // You might get tired of calling activate all the time for your view modules 
     // And also feel you have to deal with the area they might effect 
     // If you use a SPA framework (if you are making spa) then they usually have 
     // a automatic mechanism for activating modules and applying the binding e.g. Durandal.js 
     myEmployeesList.activate(); 

     ko.applyBindings(myEmployeesList); 
     // or 
     ko.applyBindings(myEmployeesList, $('#employeesContainer')[0]); 
    }); 
}); 

Некоторые материалы для чтения:

SPA JumpStart – Architecture