了解dojo AMD加载-函数未定义

我一直在试图找人向我解释dojo AMD加载是如何工作的，并获得一段简单的代码。我理解，如果使用例如CDN，必须调用dojo库并加载您希望使用的所有模块。我曾尝试基于主页上的活动实现其他javascript函数，我总是会得到未定义的函数或与未定义的dojo控件相关的错误。似乎最初加载的所有模块对代码的其余部分都不可用。如有任何有用的解释，我们将不胜感激

          <link rel="stylesheet" type=
        "text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.8.4/dojo/resources
                           /dojo.css" />
          <link rel="stylesheet" type=
        "text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.8.4/dijit/themes/
                           tundra/tundra.css" />
          <link rel="stylesheet" type=
        "text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.8.4/dojox/mobile/themes/
                           iphone/iphone.css" />
         <title> DOJO </title>
         <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/dojo/1.8.4/
                   dojo/dojo.js" 
              data-dojo-config="async:true"></script> 

      <script type="text/javascript" src="Scripts/login.js"></script>
     <script type="text/javascript">
      require(["dojox/mobile/parser",
                "dojo/parser",
                "dojo/on",
                "dojo/request/xhr",
                "dijit/form/Form",
                "dojo/store/Observable",
                "dojo/store/Memory",
                "dijit/Toolbar",
                "dijit/Dialog",
                "dojo/io/script",
                "dojo/query",
                "dojo/_base/lang",
                "dijit/layout/ContentPane",
                "dojox/mobile/Button",
                "dojox/mobile/deviceTheme",
                "dojox/mobile/compat",
                "dojox/mobile/Heading",
                "dojox/mobile/TextBox",
                "dojox/mobile/Opener",
                "dijit/form/TextBox",
                "dijit/form/HorizontalSlider",
                "dijit/form/ValidationTextBox",
                "dijit/Calendar",
                "dojox/mobile/ScrollableView",
                "dojo/dom",
                "dojo/domReady!",
                "dojox/mobile"],

        function (dom, domReady ,mobile, ScrollableView, 
               parser, query, domClass, domStyle, on, event, xhr,Form,
             lang, Button, deviceTheme, compat, Heading) {
            dojox.mobile.parser.parse();
        });

</script> 

我在dojo论坛上得到建议，将我的函数放在define函数中，然后使用require调用所有函数。我想不出怎么做

似乎所有最初加载的模块都不可用于 代码的其余部分

您正在使用加载dojo工具箱。使用CDN时，需要定义模块包的位置。您需要编辑dojoConfig才能使代码正常工作

请参阅这篇关于的文章。重要的部分是packages对象

<script data-dojo-config="async: 1, dojoBlankHtmlUrl: '/blank.html',
        packages: [ {
            name: 'custom',
            location: location.pathname.replace(/\/[^/]+$/, '') + '/js/custom'
        } ]"
    src="//ajax.googleapis.com/ajax/libs/dojo/1.9.1/dojo/dojo.js">
</script>

/index.html 如果选择在自己的服务器上托管dojo文件，则可以如下所示引用它们。假设DojoJS文件位于

“/js/dojo/*”

目录中

packages: [
        { name: "dojo", location: "dojo/dojo" }, 
        { name: "dijit", location: "dojo/dijit" },
        { name: "dojox", location: "dojo/dojox" },
        { name: "myModules", location: "js/modules" },
        { name: "app", location: "js/controller", main: "Controller" }
    ]

/js/controller/controller.js 这是我用来初始化web应用程序的控制器

define(["myModules/MyFirstModule"], function(MyFirstModule) {

    //Private Variables...
    var privateVariable1 = "Welcome to my Dojo Application!";
    var privateVariable2;

    /**
     * init. This is a private function that is only available within this object.
     */
    init = function() {
        // proceed directly with startup
        console.log("Startup functions are firing...");

        //Render our "form" which only contains a single text box.
        renderForm();
    },

    renderForm = function() {
        MyFirstModule.createForm("appBody");
    }

    /**
     * Enclose all public methods in the return object
     */
    return {

        /**
         * main. This is a public function that can be called from other code.
         */
        main: function() {

            //Run init() method.
            init();
        },

        /**
         * getWelcomeMessage. This public function returns the value of the privateVariable1.
         * This mimics a getter method.
         */
        getWelcomeMessage: function() {
            return privateVariable1;
        }
    };

}); //end define

/js/modules/MyFirstModule.js 这是一个自定义模块的示例。控制器类需要它作为依赖项

define([
    //The required dependencies for this module.
    "dojo/dom", "dojo/on", "dijit/form/TextBox", "dijit/form/Button"
], function(dom, on, TextBox, Button){
    // Once all modules in the dependency list have loaded, this
    // function is called to define the myModules/myFirstModule module.
    //
    // The dojo/dom module is passed as the first argument to this
    // function; additional modules in the dependency list would be
    // passed in as subsequent arguments (on, TextBox, and Button).

    // Private variables
    var firstNameTextBox;
    var submitButton;

    privateFunction = function() {
        console.log("I am a private function. I can only be called from this class.");
    };

    // This returned object becomes the defined value of this module when called elsewhere.
    return {
        /**
         * createForm. This method creates a simple form. Textbox and button.
         * @param placeMeHere This is where to place the form elements. In this demo, the are placed in the 
         * body of the html document. This is executed in the Controller class.
         */
        createForm: function(placeMeHere) {

            //Create new TextBox.
            firstNameTextBox = new TextBox({
                name: "firstname",
                value: "" /* no or empty value! */,
                placeHolder: "type in your name"
            }, "firstname");

            //Place me in the DOM.
            firstNameTextBox.placeAt(placeMeHere);

            //Render 
            firstNameTextBox.startup();

            //Create Button
            submitButton = new Button({
                label: "Say Hi"
            }, "submitButton");
            submitButton.placeAt(placeMeHere);
            submitButton.startup();

            //Greet the user.
            on(submitButton, "click", function(evt){
                console.log("Hi there, " + firstNameTextBox.get("value"));
            });

        }
    };
});

似乎所有最初加载的模块都不可用于 代码的其余部分

您正在使用加载dojo工具箱。使用CDN时，需要定义模块包的位置。您需要编辑dojoConfig才能使代码正常工作

请参阅这篇关于的文章。重要的部分是packages对象

<script data-dojo-config="async: 1, dojoBlankHtmlUrl: '/blank.html',
        packages: [ {
            name: 'custom',
            location: location.pathname.replace(/\/[^/]+$/, '') + '/js/custom'
        } ]"
    src="//ajax.googleapis.com/ajax/libs/dojo/1.9.1/dojo/dojo.js">
</script>

/index.html 如果选择在自己的服务器上托管dojo文件，则可以如下所示引用它们。假设DojoJS文件位于

“/js/dojo/*”

目录中

packages: [
        { name: "dojo", location: "dojo/dojo" }, 
        { name: "dijit", location: "dojo/dijit" },
        { name: "dojox", location: "dojo/dojox" },
        { name: "myModules", location: "js/modules" },
        { name: "app", location: "js/controller", main: "Controller" }
    ]

/js/controller/controller.js 这是我用来初始化web应用程序的控制器

define(["myModules/MyFirstModule"], function(MyFirstModule) {

    //Private Variables...
    var privateVariable1 = "Welcome to my Dojo Application!";
    var privateVariable2;

    /**
     * init. This is a private function that is only available within this object.
     */
    init = function() {
        // proceed directly with startup
        console.log("Startup functions are firing...");

        //Render our "form" which only contains a single text box.
        renderForm();
    },

    renderForm = function() {
        MyFirstModule.createForm("appBody");
    }

    /**
     * Enclose all public methods in the return object
     */
    return {

        /**
         * main. This is a public function that can be called from other code.
         */
        main: function() {

            //Run init() method.
            init();
        },

        /**
         * getWelcomeMessage. This public function returns the value of the privateVariable1.
         * This mimics a getter method.
         */
        getWelcomeMessage: function() {
            return privateVariable1;
        }
    };

}); //end define

/js/modules/MyFirstModule.js 这是一个自定义模块的示例。控制器类需要它作为依赖项

define([
    //The required dependencies for this module.
    "dojo/dom", "dojo/on", "dijit/form/TextBox", "dijit/form/Button"
], function(dom, on, TextBox, Button){
    // Once all modules in the dependency list have loaded, this
    // function is called to define the myModules/myFirstModule module.
    //
    // The dojo/dom module is passed as the first argument to this
    // function; additional modules in the dependency list would be
    // passed in as subsequent arguments (on, TextBox, and Button).

    // Private variables
    var firstNameTextBox;
    var submitButton;

    privateFunction = function() {
        console.log("I am a private function. I can only be called from this class.");
    };

    // This returned object becomes the defined value of this module when called elsewhere.
    return {
        /**
         * createForm. This method creates a simple form. Textbox and button.
         * @param placeMeHere This is where to place the form elements. In this demo, the are placed in the 
         * body of the html document. This is executed in the Controller class.
         */
        createForm: function(placeMeHere) {

            //Create new TextBox.
            firstNameTextBox = new TextBox({
                name: "firstname",
                value: "" /* no or empty value! */,
                placeHolder: "type in your name"
            }, "firstname");

            //Place me in the DOM.
            firstNameTextBox.placeAt(placeMeHere);

            //Render 
            firstNameTextBox.startup();

            //Create Button
            submitButton = new Button({
                label: "Say Hi"
            }, "submitButton");
            submitButton.placeAt(placeMeHere);
            submitButton.startup();

            //Greet the user.
            on(submitButton, "click", function(evt){
                console.log("Hi there, " + firstNameTextBox.get("value"));
            });

        }
    };
});

似乎所有最初加载的模块都不可用于 代码的其余部分

您正在使用加载dojo工具箱。使用CDN时，需要定义模块包的位置。您需要编辑dojoConfig才能使代码正常工作

请参阅这篇关于的文章。重要的部分是packages对象

<script data-dojo-config="async: 1, dojoBlankHtmlUrl: '/blank.html',
        packages: [ {
            name: 'custom',
            location: location.pathname.replace(/\/[^/]+$/, '') + '/js/custom'
        } ]"
    src="//ajax.googleapis.com/ajax/libs/dojo/1.9.1/dojo/dojo.js">
</script>

/index.html 如果选择在自己的服务器上托管dojo文件，则可以如下所示引用它们。假设DojoJS文件位于

“/js/dojo/*”

目录中

packages: [
        { name: "dojo", location: "dojo/dojo" }, 
        { name: "dijit", location: "dojo/dijit" },
        { name: "dojox", location: "dojo/dojox" },
        { name: "myModules", location: "js/modules" },
        { name: "app", location: "js/controller", main: "Controller" }
    ]

/js/controller/controller.js 这是我用来初始化web应用程序的控制器

define(["myModules/MyFirstModule"], function(MyFirstModule) {

    //Private Variables...
    var privateVariable1 = "Welcome to my Dojo Application!";
    var privateVariable2;

    /**
     * init. This is a private function that is only available within this object.
     */
    init = function() {
        // proceed directly with startup
        console.log("Startup functions are firing...");

        //Render our "form" which only contains a single text box.
        renderForm();
    },

    renderForm = function() {
        MyFirstModule.createForm("appBody");
    }

    /**
     * Enclose all public methods in the return object
     */
    return {

        /**
         * main. This is a public function that can be called from other code.
         */
        main: function() {

            //Run init() method.
            init();
        },

        /**
         * getWelcomeMessage. This public function returns the value of the privateVariable1.
         * This mimics a getter method.
         */
        getWelcomeMessage: function() {
            return privateVariable1;
        }
    };

}); //end define

/js/modules/MyFirstModule.js 这是一个自定义模块的示例。控制器类需要它作为依赖项

define([
    //The required dependencies for this module.
    "dojo/dom", "dojo/on", "dijit/form/TextBox", "dijit/form/Button"
], function(dom, on, TextBox, Button){
    // Once all modules in the dependency list have loaded, this
    // function is called to define the myModules/myFirstModule module.
    //
    // The dojo/dom module is passed as the first argument to this
    // function; additional modules in the dependency list would be
    // passed in as subsequent arguments (on, TextBox, and Button).

    // Private variables
    var firstNameTextBox;
    var submitButton;

    privateFunction = function() {
        console.log("I am a private function. I can only be called from this class.");
    };

    // This returned object becomes the defined value of this module when called elsewhere.
    return {
        /**
         * createForm. This method creates a simple form. Textbox and button.
         * @param placeMeHere This is where to place the form elements. In this demo, the are placed in the 
         * body of the html document. This is executed in the Controller class.
         */
        createForm: function(placeMeHere) {

            //Create new TextBox.
            firstNameTextBox = new TextBox({
                name: "firstname",
                value: "" /* no or empty value! */,
                placeHolder: "type in your name"
            }, "firstname");

            //Place me in the DOM.
            firstNameTextBox.placeAt(placeMeHere);

            //Render 
            firstNameTextBox.startup();

            //Create Button
            submitButton = new Button({
                label: "Say Hi"
            }, "submitButton");
            submitButton.placeAt(placeMeHere);
            submitButton.startup();

            //Greet the user.
            on(submitButton, "click", function(evt){
                console.log("Hi there, " + firstNameTextBox.get("value"));
            });

        }
    };
});

似乎所有最初加载的模块都不可用于 代码的其余部分

您正在使用加载dojo工具箱。使用CDN时，需要定义模块包的位置。您需要编辑dojoConfig才能使代码正常工作

请参阅这篇关于的文章。重要的部分是packages对象

<script data-dojo-config="async: 1, dojoBlankHtmlUrl: '/blank.html',
        packages: [ {
            name: 'custom',
            location: location.pathname.replace(/\/[^/]+$/, '') + '/js/custom'
        } ]"
    src="//ajax.googleapis.com/ajax/libs/dojo/1.9.1/dojo/dojo.js">
</script>

/index.html 如果选择在自己的服务器上托管dojo文件，则可以如下所示引用它们。假设DojoJS文件位于

“/js/dojo/*”

目录中

packages: [
        { name: "dojo", location: "dojo/dojo" }, 
        { name: "dijit", location: "dojo/dijit" },
        { name: "dojox", location: "dojo/dojox" },
        { name: "myModules", location: "js/modules" },
        { name: "app", location: "js/controller", main: "Controller" }
    ]

/js/controller/controller.js 这是我用来初始化web应用程序的控制器

define(["myModules/MyFirstModule"], function(MyFirstModule) {

    //Private Variables...
    var privateVariable1 = "Welcome to my Dojo Application!";
    var privateVariable2;

    /**
     * init. This is a private function that is only available within this object.
     */
    init = function() {
        // proceed directly with startup
        console.log("Startup functions are firing...");

        //Render our "form" which only contains a single text box.
        renderForm();
    },

    renderForm = function() {
        MyFirstModule.createForm("appBody");
    }

    /**
     * Enclose all public methods in the return object
     */
    return {

        /**
         * main. This is a public function that can be called from other code.
         */
        main: function() {

            //Run init() method.
            init();
        },

        /**
         * getWelcomeMessage. This public function returns the value of the privateVariable1.
         * This mimics a getter method.
         */
        getWelcomeMessage: function() {
            return privateVariable1;
        }
    };

}); //end define

/js/modules/MyFirstModule.js 这是一个自定义模块的示例。控制器类需要它作为依赖项

define([
    //The required dependencies for this module.
    "dojo/dom", "dojo/on", "dijit/form/TextBox", "dijit/form/Button"
], function(dom, on, TextBox, Button){
    // Once all modules in the dependency list have loaded, this
    // function is called to define the myModules/myFirstModule module.
    //
    // The dojo/dom module is passed as the first argument to this
    // function; additional modules in the dependency list would be
    // passed in as subsequent arguments (on, TextBox, and Button).

    // Private variables
    var firstNameTextBox;
    var submitButton;

    privateFunction = function() {
        console.log("I am a private function. I can only be called from this class.");
    };

    // This returned object becomes the defined value of this module when called elsewhere.
    return {
        /**
         * createForm. This method creates a simple form. Textbox and button.
         * @param placeMeHere This is where to place the form elements. In this demo, the are placed in the 
         * body of the html document. This is executed in the Controller class.
         */
        createForm: function(placeMeHere) {

            //Create new TextBox.
            firstNameTextBox = new TextBox({
                name: "firstname",
                value: "" /* no or empty value! */,
                placeHolder: "type in your name"
            }, "firstname");

            //Place me in the DOM.
            firstNameTextBox.placeAt(placeMeHere);

            //Render 
            firstNameTextBox.startup();

            //Create Button
            submitButton = new Button({
                label: "Say Hi"
            }, "submitButton");
            submitButton.placeAt(placeMeHere);
            submitButton.startup();

            //Greet the user.
            on(submitButton, "click", function(evt){
                console.log("Hi there, " + firstNameTextBox.get("value"));
            });

        }
    };
});

---

---

谢谢你的回复。我不确定我是否理解……我实际上是在尝试调用chklogin函数，因为它被错误检查为未定义。我要加载dojo库的其余部分，我只是不确定将chklogin函数放在何处才能工作。好的，对不起。我还建议使用define（）将该代码移动到模块中。你试过教程了吗？它显示了如何实现使用define.no的目标。谢谢您的帮助。我看了它，并不是一个伟大的读者。当有人告诉我这件事时，我能理解。我的理解是，他们在.js文件中创建了一个名为mymodule的模块；然后在主程序中需要该模块（mymodule）并将其用作函数。因此，在我的例子中，创建一个名为chklogin的模块，然后require它，当用户单击按钮时，它将从主require[]函数中调用该模块chklogin。对的很抱歉，这里的内容太多了，但我很难阅读文档。你太棒了。非常感谢。这会让我走的，不客气。我很感激你的好话。如果您对示例有任何疑问，请提供建议。我在解释的时候可能会罗嗦，注意力不集中。谢谢你的回复。我不确定我是否理解……我实际上是在尝试调用chklogin函数，因为它被错误检查为未定义。我要加载dojo库的其余部分，我只是不确定将chklogin函数放在何处才能工作。好的，对不起。我还建议使用define（）将该代码移动到模块中。你试过教程了吗？它显示了如何实现使用define.no的目标。谢谢您的帮助。我看了它，并不是一个伟大的读者。当有人告诉我这件事时，我能理解。我的理解是，他们在.js文件中创建了一个名为mymodule的模块；然后在主程序中需要该模块（mymodule）并将其用作函数。因此，在我的例子中，创建一个名为chklogin的模块，然后需要它，当用户