在Durandal视图模型中返回函数和返回对象有什么区别

What is the difference between returning a function and returning an object in a Durandal viewmodel?

本文关键字:返回 对象 什么 区别 函数 视图 模型 Durandal      更新时间:2023-09-26

我正在考虑在我的应用程序中实现一个向导类型的系统,并查看GitHub上dfiddle-2.0项目上的第一个向导示例。步骤视图模型都是函数,我正在努力理解为什么。

以下是dfiddle用于向导的index.js的内容:

define(['durandal/activator', './step1', './step2', './step3', 'knockout'], function( activator, Step1, Step2, Step3, ko ) {
    var steps = [new Step1(), new Step2(), new Step3()];
    var step = ko.observable(0);
    var activeStep = activator.create();
    var stepsLength = steps.length;
    var hasPrevious = ko.computed(function() {
        return step() > 0;
    });
    var hasNext = ko.computed(function() {
        return (step() < stepsLength - 1);
    });
    // Start with first step
    activeStep(steps[step()]);
    return {
        showCodeUrl: true,
        steps: steps,
        step: step,
        activeStep: activeStep,
        next: next,
        previous: previous,
        hasPrevious: hasPrevious,
        hasNext: hasNext
    };
    function next () {
        if ( step() < stepsLength ) {
            step(step() + 1);
            activeStep(steps[step()]);
        }
    }
    function previous () {
        if ( step() > 0 ) {
            step(step() - 1);
            activeStep(steps[step()]);
        }
    }
});

以下是它在step1.js 中使用的内容

define(function() {
    return function() {
        this.name = 'Step 1';
        this.s1one = 'Unique to' + this.name;
        this.s1two = 'Another property unique to' + this.name;
    };
});

以下是我目前用于index.js.的内容

define(['knockout'],
    function (ko) {
        var rootPath = "viewmodels/wizards/steps/";
        var steps = ["step1", "step2", "step3"];
        var step = ko.observable(0);
        var activeStep = ko.observable(); 
        var stepLength = steps.length;
        var hasPrevious = ko.computed(function () { return step() > 0 });
        var hasNext = ko.computed(function () { return step() < stepLength - 1 });
        var activate = function () {
            return activeStep(rootPath + steps[step()]);
        };
        return {
            steps: steps,
            step: step,
            activeStep: activeStep,
            next: next,
            previous: previous,
            hasPrevious: hasPrevious,
            hasNext: hasNext,
            activate: activate
        }
        function next() {
            if (hasNext()) {
                step(step() + 1);
                activeStep(rootPath + steps[step()]);
            }
        }
        function previous() {
            if (hasPrevious()) {
                step(step() - 1);
                activeStep(rootPath + steps[step()]);
            }
        }
    });

还有我的step1.js

define(function () {
    var name = ko.observable("Step 1");
    var s1one = ko.observable("Unique to " + name());
    var s1two = ko.observable("Another property unique to " + name());
    var returnVm = {
        name: name,
        s1one: s1one,
        s1two: s1two
    };
    return returnVm;
});

绑定是相同的,那么这两种方法有何不同?只返回一个对象而不使用函数会损失什么?

区别很微妙,但很重要。返回对象的模块是singleton。同一个对象将在依赖它的所有其他模块之间共享。返回函数的模块称为构造函数。依赖模块将使用new关键字实例化此构造函数。因此,每个实例都是唯一的。

以下是从Durandal文档中收集到的更多信息:

模块的define仅在首次需要模块时执行一次。因此,如果您返回一个对象实例,那么您就创建了一个singleton,它将在应用程序的整个生命周期中保留在内存中。如果不需要这样做,请返回一个构造函数,允许使用者根据需要创建/释放对象,从而更好地控制对象的生存期。

在你的例子中,你没有失去任何东西。任何一种方法都有效。哪个更正确取决于许多因素。如果您不需要每次都需要模块的唯一实例,那么单例是最好的选择。然而,如果说您需要同一对话框模块的多个实例,但每个实例都有自己的数据,那么可以使用构造函数。

我希望这能有所帮助。