当前位置 : 主页 > 网页制作 > Dojo >

Dojo -- Modules篇之AMD介绍

来源:互联网 收集:自由互联 发布时间:2021-06-15
为了使得代码更加容易维护和调试, dojo 引入了AMD。本文介绍AMD的一些基本用法。 如何加载Dojo模块 为了更好的理解Dojo的模块,在这里先写个例子,说明一下Dojo如何加载模块的。至于

为了使得代码更加容易维护和调试,dojo 引入了AMD。本文介绍AMD的一些基本用法。

如何加载Dojo模块

为了更好的理解Dojo的模块,在这里先写个例子,说明一下Dojo如何加载模块的。至于什么是模块以及如何创建模块,会在下面讲到。

我们先创建一个hello-amd.html 文件,内容如下:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
</head>
<body>
    <!-- load Dojo -->
    <script src="./dojo/dojo.js" data-dojo-config="async: true"></script>

    <script> require([ "app/counter.js" ], function (counter) { console.log(counter.getValue()); counter.increment(); console.log(counter.getValue()); counter.decrement(); console.log(counter.getValue()); }); </script>
</body>
</html>

再建立一个counter.js 文件,内容如下:

define(function(){
    var privateValue = 0;
    return {
        increment: function(){
            privateValue++;
        },

        decrement: function(){
            privateValue--;
        },

        getValue: function(){
            return privateValue;
        }
    };
});

我们在学习其他语言的时候,例如java语言,我们可以通过包名和类名来找到这个类。这里的一个java类可以看成一个模块。那么Dojo也是可以通过文件路径和文件名来找到模块的。例如上面的app/counter.js
文件结构:

那么这里的counter就是模块名字,通过counter就可以引用到这个模块,并调用里面的方法。执行这个html的结果如下:

0
1
0

如果你想把相关的数据和操作放置在一起,那么你可以通过Dojo的module把它们组织在一起,并使用define 方法定义成一个模块,js文件名便是模块名字。以后就可以通过这个js名字作为模块的名字,其他模块便可使用这个js名字来引用这个模块。

模块引用模块

当系统一复杂,必然存在模块依赖其他模块的情况。在dojo中,如何在define 方法中获取其他模块的引用呢?如下:

define([
    "dojo/_base/declare",
    "dojo/dom",
    "app/dateFormatter"
], function(declare, dom, dateFormatter){
    return declare(null, {
        showDate: function(id, date){
            dom.byId(id).innerHTML = dateFormatter.format(date);
        }
    });
});

app/dateFomatter是我们自己定义的模块,如果需要依赖dojo/domdojo/_base/declare ,只需要在app/dateFomatter这个参数前,把dojo/domdojo/_base/declare 传入给define 方法即可。

引用插件

代码如下:

define([
    "dojo/_base/declare",
    "dijit/_WidgetBase",
    "dijit/_TemplatedMixin",
    "dojo/text!./templates/NavBar.html"
], function(declare, _WidgetBase, _TemplatedMixin, template){
    return declare([_WidgetBase, _TemplatedMixin], {
        // template contains the content of the file "my/widget/templates/NavBar.html"
        templateString: template
    });
});

注意,引用dojo插件时,必须加上感叹号!,如上面的代码。dojo/text!

网友评论