0

我正在使用 dojo 创建一个模块。这个模块是关于配置的。

define(["geometry/Point"], function (Point) {
        var sp = new Point(122, -142);
        return {            
            startPoint: new Point(122, -142),
            globalOptions: {
                logo: false,
                center: sp
            },

        };
    })

在这个模块中，如果我使用sp变量作为中心，代码就可以工作。但如果我使用中心作为起点，中心将变为空。喜欢以下

define(["geometry/Point"], function (Point) {
        return {            
            startPoint: new Point(122, -142),
            globalOptions: {
                logo: false,
                center: this.startPoint
            },

        };
    })

我删除了变量sp并使用了 this.startPoint但 center 为空。

4

4 回答 4

2

那是因为你引用了错误的对象。如果你this在center属性中使用，你实际上不再引用你的模块了。因为您正在实例化一个新对象，所以它实际上将引用全局对象，即（如果您使用的是浏览器）window。

您的第一个解决方案之所以有效，是因为sp它具有范围，因此可以从您的模块以及您的globalOptions属性中访问它。

编辑（根据评论的要求）：

要声明一个模块以访问其功能，您应该使用：

define(["dojo/_base/declare", "dojo/_base/lang", "dojo/_base/array"], function(declare, lang, array) {
    return declare(null, {
        param: ["a", "b", "c"],
        action: function() {
            this.otherAction(); // Call other action
        },
        otherAction: function() {
            array.forEach(this.param, lang.hitch(this, "lastFunction"));
        },
        lastFunction: function(item, idx) {
            console.log(idx + " " + item);
        }
    });
});

这个例子展示了 Dojo 的一些基础知识。要创建一个模块，您应该使用dojo/_base/declare. 第一个参数null是定义继承模块的列表，在这种情况下没有。

参数和函数可以以类似的方式声明。this例如，应该通过提供上下文来从另一个函数调用一个函数this.otherAction()。

如果你失去了this上下文，你可以使用lang.hitch(). 它实际上调用了函数，但保留了上下文。这就是我所做的lang.hitch(this, "lastFunction")。

我可以进一步解释它，但我认为阅读本教程会很有用。

于 2013-09-12T08:07:15.267 回答
1

你是不是想做这样的事情，

define(["geometry/Point"], function (Point) {
        return {            
            startPoint: new Point(122, -142),
            globalOptions: {},

            postCreate: function () {
            this.globalOptions = {
            logo: false,
            center: this.startPoint
            }

          }    
        };
    })

发生此问题是因为此范围..

希望对你有帮助..

于 2013-09-12T08:13:13.387 回答
1

模块

这里需要注意的两个关键概念是用于促进模块定义的define方法和用于处理依赖项加载的require方法。define 用于根据使用以下签名的提议定义命名或未命名模块：

    define(
    module_id /*optional*/,
    [dependencies] /*optional*/,
    definition function /*function for instantiating the module or object*/
    );

从内联注释可以看出，module_id 是一个可选参数，通常仅在使用非 AMD 连接工具时才需要（可能还有其他一些有用的边缘情况）。当这个参数被忽略时，我们称模块为匿名的。

使用匿名模块时，模块身份的概念是 DRY，避免文件名和代码重复变得微不足道。由于代码更具可移植性，因此可以轻松地将其移动到其他位置（或文件系统周围），而无需更改代码本身或更改其 ID。module_id 等效于简单包中的文件夹路径，并且在包中不使用时。开发人员还可以在多个环境中运行相同的代码，只需使用与 r.js 等 CommonJS 环境配合使用的 AMD 优化器。

回到定义签名，dependencies 参数表示您正在定义的模块所需的依赖项数组，第三个参数（“定义函数”）是执行以实例化模块的函数。准系统模块可以定义如下：

// A module_id (myModule) is used here for demonstration purposes only

define('myModule',
['foo', 'bar'],
// module definition function
// dependencies (foo and bar) are mapped to function parameters
function ( foo, bar ) {
// return a value that defines the module export
// (i.e the functionality we want to expose for consumption)
// create your module here
var myModule = {
doStuff:function(){
console.log('Yay! Stuff');
}
}

return myModule;
});

// An alternative example could be..
define('myModule',
['math', 'graph'],
function ( math, graph ) {

// Note that this is a slightly different pattern
// With AMD, it's possible to define modules in a few
// different ways due as it's relatively flexible with
// certain aspects of the syntax
return {
plot: function(x, y){
return graph.drawPie(math.randomGrid(x,y));
}
}
};
});

另一方面，如果您希望动态获取依赖项， require通常用于在顶级 JavaScript 文件或模块中加载代码。

// Consider 'foo' and 'bar' are two external modules
// In this example, the 'exports' from the two modules loaded are passed as
// function arguments to the callback (foo and bar)
// so that they can similarly be accessed

require(['foo', 'bar'], function ( foo, bar ) {
// rest of your code here
foo.doSomething();
});

希望这对你有帮助......

于 2013-09-13T04:34:54.733 回答
0

startPoint您的第一种方法是正确的，但是您在定义中不需要一些重复：

function test() {

    var startPoint = "x,y"

    return {            
        startPoint: startPoint,            
        globalOptions: {
            logo: false,
            center: startPoint
        }
    };
}

console.log(test().startPoint)
console.log(test().globalOptions)

在 JSBIN 中测试：http: //jsbin.com/IxENEkA/1/edit

于 2013-09-12T08:10:38.070 回答