在Durandal视图模型中返回函数和返回对象有什么区别
What is the difference between returning a function and returning an object in a Durandal viewmodel?
我正在考虑在我的应用程序中实现一个向导类型的系统,并查看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,它将在应用程序的整个生命周期中保留在内存中。如果不需要这样做,请返回一个构造函数,允许使用者根据需要创建/释放对象,从而更好地控制对象的生存期。
在你的例子中,你没有失去任何东西。任何一种方法都有效。哪个更正确取决于许多因素。如果您不需要每次都需要模块的唯一实例,那么单例是最好的选择。然而,如果说您需要同一对话框模块的多个实例,但每个实例都有自己的数据,那么可以使用构造函数。
我希望这能有所帮助。
相关文章:
- javascript函数,它接受两个输入:一个对象和一个键,并返回对象中该键的相应值
- 通过数组值返回对象
- JavaScript:返回对象的函数
- 为什么document.getElementsByClassName(“className”)返回对象
- 如何返回对象
- Promise没有;t返回对象的数组
- 面料:“;鼠标:向下”;在event.target中未返回对象
- Lodash:返回对象的第一个键,该对象的值(即数组)中有一个给定的元素(即字符串)
- Javascript:返回对象
- 为什么 javascript 返回对象位置 true 或 false
- 解析查询查找方法返回对象而不是数组
- 来自函数的返回对象在 jQuery 中未从 $.post 定义
- JavaScript 返回对象未按预期工作
- 返回“[对象对象] NaN” - Javascript
- 何时从创建返回对象
- Javascript:接收对象并返回对象中描述的所有数字的列表的函数
- JSDoc:返回对象结构
- node.js请求返回对象
- 返回对象的ECMAScript 6箭头函数
- 如何从控制器返回对象列表并使用JQuery(SpringMVC,ajax)显示它们