dojo - 声明函数

时间:2014-01-10 20:11:20

标签: javascript dojo

我似乎无法获得关于声明工作的dojo示例。示例链接:http://dojotoolkit.org/reference-guide/1.9/dojo/_base/declare.html#id3

以下是我如何设置它:

/index.html:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <script src="//ajax.googleapis.com/ajax/libs/dojo/1.9.2/dojo/dojo.js" data-dojo-config="async: true"></script>
    <script src="/my/Employee.js"></script>
    <script src="/my/Person.js"></script>
    <script>
        var dojoConfig = {
            parseOnLoad: true,
            packages: [{
                "name": "my",
                "location": location.pathname.replace(/\/[^/]+$/, "") + "/my"
            }
            ]
        };
    </script>

    <script>
        require(["my/Person"], function (Person)
        {
            var folk = new Person("phiggins", 42, "Tennessee");
        });

        require(['my/Employee'], function (Employee)
        {
            var matt = new Employee("Matt", 33, "California", 1000);

            console.log(kathryn.askForRaise(), matt.askForRaise()); // 3600, 20
        });
    </script>
    <title></title>
</head>
<body>

</body>
</html>

/my/Person.js

define(["dojo/_base/declare"], function (declare)
{
    return declare(null, {
        constructor: function (name, age, residence)
        {
            this.name = name;
            this.age = age;
            this.residence = residence;
        }
    });
});

/my/Employee.js

define(["dojo/_base/declare", "my/Person"], function (declare, Person)
{
    return declare(Person, {
        constructor: function (name, age, residence, salary)
        {
            // The "constructor" method is special: the parent class (Person)
            // constructor is called automatically before this one.

            this.salary = salary;
        },

        askForRaise: function ()
        {
            return this.salary * 0.02;
        }
    });
});

我试图在所有回调方法中设置一个断点(return declare ...),它永远不会进入那里。它也永远不会进入require块的回调。

感谢任何帮助

2 个答案:

答案 0 :(得分:1)

您要做的至少一项更改是删除行

<script src="/my/Employee.js"></script>
<script src="/my/Person.js"></script>

AMD模块的一个主要卖点是,您可以拥有可重复使用的模块,而无需在html文件中的任何位置添加脚本标记。

另一个调试技巧是检查检查员是否存在任何控制台错误或网络错误。

答案 1 :(得分:1)

HTML文件只有几个小问题。

在加载Dojo的脚本标记中,您添加了data-dojo-config属性。这是告诉Dojo应该如何表现的两种方法之一 - 另一种方法是定义全局dojoConfig对象。你们两个都做到了!因此,请删除data-dojo-config属性。

现在,Dojo需要在加载时了解配置对象。因此,必须在加载Dojo的脚本标记之前定义dojoConfig。由于刚删除async:true,请将其添加到配置对象中。

此外,正如Buffalo所提到的,没有必要将Person和Employee模块包含在脚本标记中。 Dojo使用称为AMD(异步模块定义)的模式来加载模块。基本上,这是你在这里和那里看到的definerequire函数。这些加载模块非常方便地为您插入脚本标记(只要您告诉他们在dojoConfig中找到您的命名空间的位置)。

所以你的头脑应该是这样的:

<script>
    var dojoConfig = {
        parseOnLoad: true,
        async: true,
        packages: [{
            "name": "my",
            "location": location.pathname.replace(/\/[^/]+$/, "") + "/my"
        }]
    };
</script>
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.9.2/dojo/dojo.js"></script>

实际上你需要让Dojo加载你应该的类。但是,我认为你可能想要注意另一个小问题:

首先,您需要Person模块。 Dojo将在幕后执行模块加载魔术,并在完成后调用function(Person) {...}。接下来,您对Employee模块执行相同操作并调用function(Employee) {... }。您应该记住,您无法保证在function(Person)之前调用function(Employee)。例如,如果您加载了Person和其他100个模块,则首先调用function(Employee)

(我之所以提到这是因为我怀疑凯瑟琳是一个错字,而你打算改用民间物品。我现在看到情况可能并非如此,但无论如何我都会留在这里。) / p>