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

Question

我正在处理一个包含大量输入控件和相关 div 的页面。此页面上有一些用例，我应该 show/hide div 取决于用户在各种后续屏幕中单击输入控件的顺序。

现在 div 都在第一次加载时出现，到 showing/hiding 时，屏幕会为用户更改。现在 show/hide 我可以使用 css 并根据业务逻辑将视图* class 添加到 .main 内容 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 class 变得难以管理。

请建议我是否可以使用更好的方法来管理用户流。我认为 marionette 中的某些区域可以帮助我管理它。如果答案是marionette.regions

，请提出最佳方法并详细说明

Answer 1

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

定义状态机：

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

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

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

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

设计状态和动作

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

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

manage views with css or regions in Backbone Marionette

css

backbone.js

marionette

设计状态和动作

设计视图：

设计模型：

设计路线：

示例伪代码：