Javascript 主干js中的逻辑抽象

我正在使用

木偶

开发一个

主干

应用程序，我需要一些帮助来组织代码中的逻辑

目前，我有几个视图处理非常相似的逻辑，我想抽象一下以避免重复：

视图1

视图2

等

注意：

handlePluginData

做同样的事情，

doSomethingWithResultN

它是不同的，但可以用几个参数进行抽象

因此，问题是：

• 我想从

  BaseView

  类进行扩展，并在其中添加逻辑，但我不知道是否有更好的方法

• 可以添加一个处理计算的自定义

  模型
  类？。我已经使用
  rails
  一段时间了，我习惯于在数据库中建模===表
  

---

多谢各位

我认为主干视图类已经足够抽象了。创建新视图实例时，只需传递不同的选项

我发现您将计算逻辑放在View的渲染方法中。因为主干是基于MVC的框架，所以逻辑应该放在模型和视图寄存器事件处理程序中，该处理程序负责在模型触发视图感兴趣的事件时呈现布局

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

我举一个简单的例子：

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.重新定义视图类：

视图将注册模型“结果”数据更改事件的侦听器，并根据指定的模型呈现初始布局

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.实例化新视图时，向模型传递不同的选项

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>

---

希望这对您有所帮助。

对于Hum来说，这似乎是一个更好的问题，您可能是对的，但是，我知道我想抽象那个代码，我要问的是如何在主干中尤其如此，如果使用一个没有“表”的模型，也没关系。主干与否，当您的问题是“我有这个代码；我如何更改它”这就是代码审查。对于你的第二个问题，“可以…”通常意味着它是基于观点的。你能加一个模型吗？你当然可以！你应该吗？我不知道。如果这个“模型”只是在其他模型上运行计算，那么听起来您最好使用一个helper类（它类似于一个模型，但不是一个

Backbone

model）。它很有帮助，谢谢！。我仍然不能接受

MathModel=Backbone.Model.extend

我想我将使用一个自定义类并实例化它。

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"})});

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

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