Question

我正在使用Asp.net MVC和knockoutjs开展多租户预约安排应用程序。我想在javascript代码模式决策中提供帮助。我有以下情况：

我从服务器获取复杂的ViewModel（ name：TenantModel ），在javascript中我使用knockout mapping plugin来创建挖空模型。

让我看看我的TenantModel中有什么：

TenantModel包含各种复杂类型，例如：

列表与LT; EmployeeModel＆GT;
列表与LT; CustomerModel＆GT;
列表与LT; ServicesModel＆GT;
ProfileModel
还有更多..

这些复杂类型可以进一步包含复杂类型，例如：

EmployeeModel包含其管辖范围内的服务列表。
ProfileModel包含ContactModel

首先，我将告诉我的努力：

我决定在javascript代码中使用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程序员，但我想编写一个可扩展且可管理的JavaScript代码。我想知道我正在思考正确的方向吗？或者还有其他更好的方法来实现这种情况吗？

Answer 1

您使用淘汰赛淘汰赛的方法是一个很好的决定。并且将帮助您保持应用程序的可扩展性和可管理性。但是，您的模块看起来太复杂了。

您需要考虑的事情很少。

您将如何处理模块中的依赖项？也许考虑使用require.js？
您的模块如何在彼此之间进行通信（如果需要）？您是否需要实现消息传递系统（它本身就是一个模块）
您希望您的应用成为单页（这需要一整套新的考虑因素）一种或经典的多种方式吗？

但是，良好的做法是将这些模型与其视图模型分开，最好是在整个单独的文件中，您可以优化并组合生产。

将视图模型视为集合持有者并将这些集合中的成员作为您的模型，这是一种简单的方法。

// 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

这个javascript代码模式是好的吗？

1 个答案: