javascript - 在 Backbone js 中抽象逻辑

Question

我正在使用 Marionette 开发一个 Backbone 应用程序，我需要一些帮助来组织代码中的逻辑。

目前我有几个 View 处理非常相似的逻辑，我想将其抽象化以避免重复:

查看 1

onRender: function() {
    var pluginData = this.$("selector1").plugin();
    var pluginResult = this.handlePluginData(pluginData);
    this.doSomethingWithResult1(pluginResult);
}

View 2

onRender: function() {
    var pluginData = this.$("selector2").plugin();
    var pluginResult = this.handlePluginData(pluginData);
    this.doSomethingWithResult2(pluginResult);
}

等等

注意:handlePluginData 做同样的事情，doSomethingWithResultN 不同但可以用一些参数抽象。

所以问题是:

• 我应该如何抽象它？我想从 BaseView 类扩展并在其中添加逻辑，但我不知道是否有更好的方法。

• 可以添加一个处理计算的自定义 Model 类吗？我使用 rails 有一段时间了，我习惯于在数据库中建模 === 表。

非常感谢!

Answer 1

我认为 Backbone View 类已经足够抽象了。您所要做的就是在创建新的 View 实例时传递不同的选项。

而且我发现你把计算逻辑放在了View的render方法中。因为Backbone是一个基于MVC的框架，所以逻辑应该放在Model和View注册事件处理程序中，当Model触发哪个 View 感兴趣的事件时负责渲染布局。

在我看来，您可以添加一个模型来处理计算和重新定义您的 View 。

我的简单示例:

1.定义一个响应逻辑计算的模型:

var MathModel = Backbone.Model.extend({
    result: 0,
    initialize: function(){
        console.log("calculate target: "+this.get("selector"));
        console.log("calculate method: "+this.get("method"));
        var number = this.handlePluginData();
        this.doSomethingWithResult(number);
    },
    handlePluginData: function(){
        return $(this.get("selector")).text();
    },
    doSomethingWithResult: function(number){
        if(this.get("method")==="square"){
            this.set({result:(number*number)});
        }else{
            this.set({result:(number*number*number)});
        }

    }
});

2.重新定义View类:

View 将为模型“结果”数据更改事件注册一个监听器，并根据您分配的模型呈现初始布局。

var AbstractView = Backbone.View.extend({
        initialize: function(){
            this.listenTo(this.model,"change",this.onModelChange);
            this.number = this.model.get("result");
            this.render();
        },
        render: function(){
            this.$el.html(this.number); 
        },
        onModelChange: function(model){
            this.number = model.get("result");
            this.render();
        },
        plusOne:function(){
            this.model.doSomethingWithResult(this.model.handlePluginData());
        }
    });

3.在实例化新 View 时将不同的选项传递给模型。

var view1 = new AbstractView({el:"#result1",model:new MathModel({selector:".square",method:"square"})});
var view2 = new AbstractView({el:"#result2",model:new MathModel({selector:".cubic",method:"cubic"})});

4.HTML:

<div id="select-target">
    <span class="square">2</span>
    <span class="cubic">2</span>
    <button id="plus-one">+1</button>
</div>
<div id="result">
    <span id="result1"></span>
    <span id="result2"></span>
</div>

5.加一按钮点击事件处理:

您可以观察到 View 如何在模型更改时重新呈现其布局。

$("#plus-one").click(function(){
        $(".square").text(Number($(".square").text())+1);
        $(".cubic").text(Number($(".cubic").text())+1);
        view1.plusOne();
        view2.plusOne();
    });

希望对您有所帮助。