Question

我正在寻找在我的应用程序中实现向导类型系统并查看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;
});

绑定是一样的，那么这两种方法有何不同？我只是返回一个对象而不是使用函数而失去了什么？

Answer 1

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

以下是从Durandal documentation收集的更多信息：

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

在你的例子中，你没有失去任何东西。两种方法都有效。哪个更正确取决于许多事情。如果每次需要时都不需要模块的唯一实例，那么单例是最佳选择。但是，如果说您需要同一个对话框模块的多个实例，但每个实例都有自己的数据，那么构造函数就是可行的方法。

我希望这会有所帮助。

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

1 个答案: