Dojo - 你好世界 - 使用 CDN 模块 - 开始工作

Dojo - hello world - using CDN module - get it work

在阅读Dojo的介绍时,我(作为新手)遵循了hello world教程。

如何让这个本地演示工作(通过 CDN 方法)?在 POC 之后,我会将其放在网络服务器等上。

第 1 步:我将模块复制到演示文件夹中:

define([
    'dojo/dom'
], function(dom){
    var oldText = {};
    return {
        setText: function (id, text) {
            var node = dom.byId(id);
            oldText[id] = node.innerHTML;
            node.innerHTML = text;
        },
        restoreText: function (id) {
            var node = dom.byId(id);
            node.innerHTML = oldText[id];
            delete oldText[id];
        }
    };
});

然后在当前文件夹中我放入 Html 文件:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Tutorial: Hello Dojo!</title>
</head>
<body>
    <h1 id="greeting">Hello</h1>
    <script>
        var dojoConfig = {
            async: true,
            packages: [{
                name: "demo",
                location: location.pathname.replace(/\/[^/]*$/, '') + '/demo'
            }]
        };
    </script>
    <script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script>
    <script>
        require([
            'demo/myModule'
        ], function (myModule) {
            myModule.setText('greeting', 'Hello Dojo!');
            setTimeout(function () {
                myModule.restoreText('greeting');
            }, 3000);
        });
    </script>
</body>
</html>

当在浏览器上双击 Html 文件时,没有看到流量,也没有更改和重新更改演示文本。

新手获得道场并不简单"hello world"运行。

更改标记为 ** ... **

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Tutorial: Hello Dojo!</title>
</head>
<body>
    <h1 id="greeting">Hello</h1>
    <script>
        var dojoConfig = {
            async: true,
            packages: [{
                name: "demo",
                **location: 'K:/k_schijf/dojo/demo'**
            }]
        };
    </script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script>
    <script type="text/javascript">
        require(
            **[ "demo/myDojoModule.js" ],** 
        function (myDojoModule) {
            myDojoModule.setText('greeting', 'Hello Dojo!');
            setTimeout(function () {
                myDojoModule.restoreText('greeting');
            }, 3000);
        });
    </script>
</body>
</html>

使用来自 Google 的 CDN 的工作 "Hello World" 示例。

var dojoConfig = {
  async: true
};

require(["dijit/form/Button", "dojo/dom", "dojo/domReady!"], function(Button, dom){
    // Create a button programmatically:
    var myButton = new Button({
        label: "Click me!",
        onClick: function(){
            // Do something:
            dom.byId("result1").innerHTML += "Thank you! ";
        }
    }, "progButtonNode").startup();
});
<link href="https://ajax.googleapis.com/ajax/libs/dojo/1.10.0/dijit/themes/claro/claro.css" rel="stylesheet"/>
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script>
<button id="progButtonNode" type="button"></button>
<div id="result1"></div>