Question

我正在处理一个包含大量输入控件和相关div的页面。在这个页面上有用例，我根据用户点击各种后续屏幕中的输入控件的顺序显示/隐藏div。

现在，div首先加载自身，并通过显示/隐藏，屏幕会更改为用户。现在显示/隐藏我可以使用css并根据业务逻辑将view *类添加到.main content div。

例如：

.main div{
  display: none;
 }
.main.view1 div.a,.main.view1 div.b,.main.view1 div.f{
  display:block;
 }

.main.view2 div.c,.main.view2 div.f {
  display:block;
 }
.main.view3 div.c,.main.view3 div.f {
  display:block;
 }

....etc

但这种方式没有。 css课程变得无法管理。

请建议我是否可以使用更好的方法来管理用户流程。我认为牵线木偶中有些区域可以帮助我解决这个问题。如果答案是marionette.regions，请建议最好的方法并详细说明

Answer 1

您可以将应用程序建模为状态机，以对复杂的工作流进行建模。

定义状态机：

定义应用程序可以处于的所有状态。
定义每个州允许的一组操作。每个操作都会将应用程序的状态从一个状态转换为另一个状态。
为每个操作编写业务逻辑，包括对服务器的持久更改以及相应地更改视图的状态。

此设计类似于创建DFA，但您可以根据需要添加额外的行为。

如果这听起来太抽象，那么这是一个简单状态机的例子。

假设您正在构建一个简单的登录应用程序。

设计状态和操作

INITIAL_STATE：用户首次访问该页面，两个字段均为空。假设您只想让username可见，而不是password处于此状态。（类似于新的Gmail工作流程）
USERNAME_ENTRY_STATE：当用户输入用户名并点击return时，在此状态下，您需要显示用户名并隐藏密码。您可以将onUsernameEntered作为此状态下的操作。
PASSWORD_ENTRY_STATE：现在，将隐藏用户名视图，并显示密码视图。当用户点击return时，您必须检查用户名和密码是否匹配。我们称之为onPasswordEntered
AUTHENTICATED_STATE：当服务器验证用户名/密码组合时，假设您要显示主页。我们称之为onAuthenticated

我暂时忽略了处理身份验证失败的情况。

设计视图：

在这种情况下，我们有UsernameView和PasswordView

设计模型：

单个Auth模型足以满足我们的示例。

设计路线：

查看使用Marionette处理路线的最佳做法。应该在登录路由中初始化状态机。

样本伪代码：

我只显示了与管理状态机相关的代码。渲染和事件处理可以照常处理;

var UsernameView = Backbone.View.extend({

    initialize: function(options) {
        this.stateMachine = options.stateMachine;
    },

    onUserNameEntered: function() {
         username = //get username from DOM;
         this.stateMachine.handleAction('onUserNameEntered', username)
    },

    show: function() {
       //write logic to show the view
    },

    hide: function() {
       //write logic to hide the view
    } 

});

var PasswordView = Backbone.View.extend({

    initialize: function(options) {
        this.stateMachine = options.stateMachine;
    },

    onPasswordEntered: function() {
         password = //get password from DOM;
         this.stateMachine.handleAction('onPasswordEntered', password)
    },

    show: function() {
       //write logic to show the view
    },

    hide: function() {
       //write logic to hide the view
    } 

});

每个州都有一个entry函数，用于初始化视图和exit函数，它将清理视图。每个州还将具有与该州的有效行动相对应的功能。例如：

var BaseState = function(options) {
   this.stateMachine = options.stateMachine;
   this.authModel = options.authModel;
};

var InitialState = BaseState.extend({

    entry: function() {
        //show the username view
        // hide the password view
    },

    exit: function() {
       //hide the username view
    },

    onUsernameEntered: function(attrs) {
        this.authModel.set('username', attrs.username');
        this.stateMachine.setState('PASSWORD_ENTRY_STATE'); 
    }


});

同样，您可以为其他州编写代码。

最后，状态机：

var StateMachine = function() {
    this.authModel = new AuthModel;
    this.usernameView = new UserNameView({stateMachine: this});
    //and all the views

    this.initialState = new InitialState({authModel: this.authModel, usernameView: this.usernameView});
    //and similarly, all the states

    this.currentState = this.initialState;
};


StateMachine.prototype = {

    setState: function(stateCode) {
        this.currentState.exit(); //exit from currentState;
        this.currentState = this.getStateFromStateCode(stateCode);
        this.currentState.entry();  
    },

    handleAction: function(action, attrs) {
        //check if action is valid for current state
        if(actionValid) {
            //call appropriate event handler in currentState
        }
    }


};

StateMachine.prototype.constructor = StateMachine;

对于一个简单的应用程序，这似乎是一种矫枉过正。对于复杂的业务逻辑，值得付出努力。此设计模式会自动阻止双击按钮等情况，因为您已经移动到下一个状态，并且新状态无法识别先前状态的操作。

一旦建立了状态机，团队的其他成员就可以插入状态和视图，也可以在一个地方看到全局。

Redux等图书馆在这里展示了一些繁重的工作。所以你可能也想考虑React + Redux + Immutable.js。

使用Backbone Marionette中的css或区域管理视图

1 个答案:

设计状态和操作

设计视图：

设计模型：

设计路线：

样本伪代码：