AMD原理等在这里就不进行说明了，作者也是菜鸟一枚，只是对自己的一个实例进行说明，如有错误，望指出。
首先，先推荐一篇AMD方面的文章，有兴趣的可以参考：http://efe.baidu.com/blog/dissecting-amd-what/
接下来便是我自己的实例了：
1.模块化编程，则需要先有个模块了，而模块便是由HTML与js结合成的，在widget目录下，定义一个待编辑模块目录：
HTML内容如下：
<div id="mapType-wrapper" class="${baseClass}" data-dojo-attach-point="mapTypeDom">
<div id="mapType">
<div class="mapTypeCard normal active" data-name="normalMap">
<div class="switch-box"><input type="checkbox" class="switch">
<p>显示收藏点</p>
</div> <span>地图</span></div>
<div class="mapTypeCard satellite" data-name="satellite">
<div class="switch-box"><input type="checkbox" class="switch" checked="true">
<p>开启路网</p>
</div> <span>卫星</span></div>
<div class="mapTypeCard panorama choosedType" data-name="panorama"> <span>全景</span></div>
</div>
</div>
data-dojo-attach-point="mapTypeDom"为该标签指定实践时使用。 接下来是js中的内容，使用dojo/text!将js与html结合，并加载样式（css）和添加鼠标移入移除事件：
/**
* Created by lenovo on 2016/12/18.
*/ define([
"dojo/_base/declare",
"dojo/text!/scada/app/widget/viewchoose/templates/viewchoose.html",
"dijit/_WidgetBase",
"dojo/dom",
"dojo/on",
"dijit/_TemplatedMixin", ], function (declare, template, _WidgetBase, dom, on, _TemplatedMixin) { return declare([_WidgetBase, _TemplatedMixin], { templateString: template,// 设置模板页
baseClass: "viewchoose",// 基础样式名称 /**
* 控件销毁时的处理。
*/
uninitialize: function () { }, /**
* 控件在渲染到页面上显示时的处理。
*/
startup: function () { }, /**
* 控件加载到页面DOM上，浏览器渲染显示之前的处理。
*/
postCreate: function () {
alert("1");
this._initRes();// 初始化资源
this._initEvent();// 初始化内部事件 }, /**
* 初始化本控件内部的事件处理。
*
* @private
*/
_initEvent: function () {
this.initEvent();
}, /**
* 初始化本控件内部的资源（样式、脚本、数据等）。
*
* @private
*/
_initRes: function () {
//加载样式
dynamicLoad.resource([require.toUrl("/scada/app/widget/viewchoose/css/viewchoose.css")]);
},
initEvent: function () {
this.own(
on(this.mapTypeDom, "mouseover", function () {
// $('#dijit__TemplatedMixin_0').removeClass('viewchoose');
$('.viewchoose').addClass('expand');
}),
on(this.mapTypeDom, "mouseout", function () {
$('.expand').removeClass('expand');
})
);
}, });
});
js中均有注释，就不在做说明。
2.接下来便是如何引用该模块。
创建测试的HTML，以及js：
test.html中，需引入jquery、dojo相关包，以及test.js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<meta name="format-detection" content="telephone=no">
<meta name="screen-orientation" content="portrait">
<meta name="x5-orientation" content="portrait">
<title>测试AMD</title>
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script type="text/javascript" src="../js/fastclick.js"></script>
<script type="text/javascript" src="../js/resize.js"></script> <script type="text/javascript" src="../../conf/config.js"></script>
<script type="text/javascript" src="../../lib/framework/core.js"></script> </head>
<body>
<div id="testamd"></div> <script type="text/javascript">
$("html,body").addClass("full-body");
// 加载需要导入的脚本和样式
dynamicLoad.resource([
baseConfig.resRoot + "/library/3.17/3.17/dijit/themes/tundra/tundra.css",
baseConfig.resRoot + "/library/3.17/3.17/dojo/dojo.js",
baseConfig.webRoot + "/app/widget/test.js"
], true, function () {
}); </script>
</body>
</html>
test.js中引入模块化的对象，放入需使用的地方：
/**
* Created by lenovo on 2016/12/21.
*/ require([
"viewchoose/ViewChooseWidget.js","dojo/dom","dojo/domReady!" ],function (widget,dom) {
var viewchooseObj = new widget();
var contDom = dom.byId('testamd'); viewchooseObj.placeAt(contDom);
})
以上。