访问 dojo 模块中的 javascript 变量

Accessing javascript variable in dojo module

本文关键字:javascript 变量 dojo 模块 访问      更新时间:2023-09-26

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

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

在此模块中,如果我使用 sp varible 作为中心,则代码正常工作。但是如果我使用中心作为起点,中心将为空。喜欢关注

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

我删除了可变sp并使用了this.startPoint,但中心为空。

那是

因为你引用了错误的对象。如果在 center 属性中使用 this,则实际上不再引用模块。因为您正在实例化一个新对象,所以它实际上将引用全局对象,即(如果您使用的是浏览器)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的第一个参数是定义继承模块的列表,在本例中为 none。

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

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

我可以解释更多,但我认为阅读本教程会很有用。

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

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

出现此问题的原因是此范围。.

希望这对您有所帮助..

模块

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

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

正如您可以从内联注释中看出的那样,module_id是一个可选参数,通常仅在使用非 AMD 级联工具时才需要(可能还有其他一些边缘情况也很有用)。当这个参数被排除在外时,我们称该模块为匿名。

使用匿名模块时,模块标识的想法是 DRY,因此避免文件名和代码的重复变得微不足道。由于代码更具可移植性,因此可以轻松地将其移动到其他位置(或文件系统周围),而无需更改代码本身或更改其 ID。该module_id等效于简单包中的文件夹路径,以及未在包中使用时的文件夹路径。开发人员还可以在多个环境中运行相同的代码,只需使用与 CommonJS 环境(如 r.js)配合使用的 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();
});

希望这对您有所帮助...

您的第一种方法是正确的,但是您在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