【Dojo 1.10】笔记2 使用服务器环境及使用模块

程序员文章站 2022-04-14 13:06:01

又开坑了。上次静态html页面完成本地module的引用，算是成功了，但是并不知道是怎么运作的，没关系慢慢来。我用的环境是VSCode，这次因为官方说要在服务器环境下运行，所以就用上了VSCode的简单服务器插件Live Server. 1. 构造起目录一个js文件，用于定义自己的模块，用def ......

又开坑了。上次静态html页面完成本地module的引用，算是成功了，但是并不知道是怎么运作的，没关系慢慢来。

我用的环境是VSCode，这次因为官方说要在服务器环境下运行，所以就用上了VSCode的简单服务器插件Live Server.

1. 构造起目录

【Dojo 1.10】笔记2 使用服务器环境及使用模块

一个js文件，用于定义自己的模块，用define方法。

一个html文件，组织页面，调用js文件里写好的模块。

关于js文件怎么写，代码给出：

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];
            }
        };
    }
);

myModule

出效果再看解释。

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: "modules",
                location: location.pathname.replace(/\/[^/]*$/, '') + '/modules'
            }]
        };
    </script>
    <script src="https://cdn.bootcss.com/dojo/1.10.4/dojo.js" data-dojo-config="async: true"></script>

    <script>
        require([
            'modules/myModule'
        ], function(myModule) {
            myModule.setText('greeting', 'Hello Dojo!');

            setTimeout(function() {
                myModule.restoreText('greeting');
            }, 3000);
        });
    </script>
</body>

</html>

useMymodules